—Web & mobile projects

Products leveraging user-oriented design, design systems and UX research methodologies.

Oblique Strategies

Our lives are governed by interwoven banks of collective customs, civic conventions, and public contracts. Often erratic, sometimes fleeting, and usually deeply ingrained in our patterns of life, these protocols silhouette our choices and shape the structure of society at every scale.

AI risk research.

Ariadna Cantis

Politicas Transmateriales, Turistificacion, Freshlatino & more.

Pa

Six case studies o

f completed web commissions.
I like to work closely with clients to learn about their needs and their target users.
I develop prototypes based on user personas and conduct user research to iterate the design.
Unless otherwise stated, both design and code were developed by Lucia Tahan.

Information website for a debate group on AI-Risk

Rationality Sessions

Challenge
To convey the idea of intelligent debate and AI-Risk in a modern way to appeal to young talent and weed out the non-specialized public.

UX Design
I opted for abstraction, relying on fresh typography, and designed an animated splash reminiscent of automation that would be slightly unnerving to the users to convey AI-risk.

Results/Testing
Usability tests for the sign-up process were successful.
In interviews, users reported being annoyed by the animation but could recall the key information presented. Further inquiry resulted in the discovery that the emotional response was very successful in improving memorability and getting the message across :)
 Rationality Madrid — rationality.persona.co

Professional portfolio website for an architecture visualization studio

Poliedro Studio

Challenge
A major project for a studio that had produced hundreds of visualizations for big architecture firms. The challenge was to amaze and excite potential clients while conveying professionalism and recognition.

UX Design
The core of the design was dynamism. The idea of awarded work and vast professional experience was communicated through sleek animation feedback and repeated symbols in a dynamic layout. The amount of projects was chosen to seem countless.

Results/Testing
I developed a live prototype with Wordpress to test the design and conduct contextual interviews prior to production. Users expressed excitement and overwhelm at the amount of experience the studio was shown to have.

Developed by PUM Studio.

 Testing prototype — poliedroweb.com  Official Poliedro Studio — poliedroestudio.com

Portfolio website for an alternative architecture researcher

Lys Villalba Portfolio

Challenge
The challenge was to create a hybrid between an academic research profile and a fresh design image.

UX Design
I proposed a bold color scheme contrasted with a conservative, small-tiled and structured layout & typography strategy.

Results/Testing
The website helped the researcher be awarded a major fellowship at Columbia University in NY.

 Lys Villalba — lysvillalba.net

Portfolio website for a senior architecture communicator and curator

Ariadna Cantis Agency

Challenge
A senior curator, Ariadna desired to market her brand as a modern agency but appeal to conservative institutions.

UX Design
We devised a minimal layout making use of white space with scarce but neatly animated UI elements and a block-like mosaic of bold images. The emphasis is on the services listed as text but the images themselves convey her work’s contemporary quality.

 Ariadna Cantis Comunicacion — ariadnacantiscomunicacion.com

Information website for an art installation in Japan

Simulated Experience

Challenge
The challenge was to convey the ideas of abstraction and interactivity while enticing the users to discover the installation.

UX Design
I designed an interactive interface where animated objects could be dragged and superimposed.

Results/Testing
Usability testing was positive, with users understanding the discovery of information as a game and reporting to want to visit the installation.

 Simulated Experience — simulatedexperience.jp

Information website for a photography exhibition in Berlin

Lama Lo

Challenge
The challenge was to unify a diverse body of work by different artists and provide a very accessible source of images for the press.

UX Design
My proposal was a very simple unifying grid, paying attention to color schemes in the work itself.

Results/Testing
Design-specialised media learned about and reported on the exhibition through this website.

 Lama Lo Exhibition — lamalo.com  Publication on It’s Nice That — itsnicethat.com

Part II: Product & Mobile

In depth case study: Find me a home, An app started in a hackathon that now has 200+ organic users

WINNER PROJECT — 1ST PRIZE MYOUTH HACKATHON SPAIN — FINALIST EUROPEAN YOUTH AWARD

Find me a home

An Android app for rehoming animals
Created by two backend/Android developers and me as the only designer.

 Download Find me a home for Android — Google Play Store
 Official website — findmeahome.org
 Github repository — github.com

 Publication — cafebabel.co.uk
 Interview winner projects — mYouth.com

What I do:

product design
UX design
UX research

UI design
illustration

interface development (XML & asset management in Android Studio)
content creation

web
branding
campaign

Case Study

Index

01 Product design: The app screens and functions
02 The design process: Prototypes
03 UX research/design case study: An appealing user flow to create a new listing
04 UX research/design case study: Rethinking the search filter screen

01 Product design: The app screens and functions

Find me a home is an app that connects people who want to take care of an animal with people who have an animal and need someone to care for it.
The app has three main user interaction possibilities:
1) as a user who has a an animal and is browsing available home listings
2) as a user who offers their home
3) as a user who needs support taking care of an animal they just found in the street

02 The design process: Prototypes

Paper and pencil sketches showing the user and animal profiles.
This kind of prototype is useful for designing the product and discussing features with developers before a high-fidelity mock-up.

An early mock-up showing the basic screens in a typical user flow.
This is just a step after developing a user flow. The key features are added in a very crude manner.
While exploring UX possibilities, this kind of prototype is useful to think about the key elements of the interaction.

A hi-fi (high fidelity) mockup created in Illustrator.

XML Layout view in Android Studio. When rendered in the compiled app, this layout results in the exact same design as the one on the left.

A hi-fi (high fidelity) mockup created in Sketch.

XML Layout view in Android Studio. Item XMLs are defined separately.

High fidelity prototype designs and their Android native coded version in Android Studio for upcoming features.
To see my code check out my Github profile:

 Lucia Tahan on Github — github.com/luciatahan

03 UX design case study: An appealing user flow to create a new listing

A traditional way of creating a new profile or listing in many apps is the form, where there is a preset profile/listing interface and the user is prompted to fill or complete their profile/listing. This is often cumbersome and boring and users give up before completing the form.

We wanted to do it better.

But we also had a unique challenge. We categorize users into three categories: Adoption Families, Foster Homes and Sitters. But just asking people what they wanted to be was going to be confusing, since they may not know the definition of each*. So we designed a conditional questionnaire where we asked simpler questions in an interactive way. Check out the steps below.

Step 1: Onboarding

Step 2: Tap to select

Step 3: GPS-Automated location. If GPS is not enabled, the user is asked for permission to enable it.

Step 4: This important step covers the complicated difference between a temporary home and an adoption family in a simple way.
If ‘Forever’ is selected, jump to Step 6.
Else proceed to Step 5.

Step 5: This enables us to differentiate between a foster home and a sitter. If requiring compensation, the user inputs a fee.

Step 6: Profile preview. Users fill the resulting profile with a photo and description. The blurred photo is a useful cue to the users. The label ‘Sitter’ is automatic depending on the user’s previous choices.

Step 7: Confirmation of success.

Finished listing.

*If you have been left wondering, an Adoption Family is someone who wants to take care of animal forever and be a family to it. A Foster Home is anyone who offers to take care of an animal in need for free or for some money to help cover the associated costs, but without a willingness to make money, and for any amount of time (from some days to forever) and who would seek to find another permanent family to it, or anyone who just wants to take care of an animal for some time for fun, to help, or to try and see what it’s like to have a pet before deciding to get one of their own. A sitter is a person who offers to take care of someone else’s pet as a service and charges a fee for it, and they may offer more services like walking dogs, grooming, visits...

UX research interviews I did revealed that if we had asked users to read these definitions and categorize themselves, we would have run into a lot of confusion. After developing this set of carefully-worded questions and turning them into conditional steps, the process has been absolutely successful.

The graphics are all original illustrations made by me to reinforce the points asked.

The color scheme follows Google’s Material Design color guidelines.

04 UX design case study: Rethinking the search filter screen

Often, filter screens are full of details and lack clarity. They have all kinds of bars and switches and checkboxes and overwhelm the users.

I wanted to design a filter screen that users would like to touch just out of satisfaction. I used only one element: the toggle icon.

Filtering results is highly visual and intuitive with large toggable icons. To help users, the icon description appears when selected: thus toggling the icon for a dog will make the word ‘dog’ appear and disappear from underneath the title ‘Animals accepted’. This greatly improved the interaction in the tests conducted.

A little anecdote: See that owl next to the cat? Usability tests revealed that users were failing to expect the owl to signify ‘Other animals’. After many iterations I drew a UNICORN and it was an instant success.

‘Other’, disabled

‘Other’, enabled

When returning to the home screen, active filters are visible in a horizontal-scroll list. The devil’s in the detail, so here I was very careful to design this layer of information in a way that would not be intrusive but rather reflect its level in the hierarchy of information: while useful and reassuring, it is not among the top-level UI elements of this screen.

A dirty UX trick: Each tag can be killed individually and thus an X closing mark signals this to the user. The X is too tiny, so tapping anywhere on the tag (not just the X) will kill the tag, but users will be fooled to believed that they aimed correctly at the little X.

There is more to come to Find me a home as we are still developing it.
You can get the app on:

 Download Find me a home for Android — Google Play Store

Part III: Usability testing hands-on

This video is from a UX research project I made at the Visual Communications Department at the Bezalel Academy of Art and Design in Jerusalem.

In the project, I asked users with different levels of computer skills to use different web apps to crop a photo. The goal was to 1) rank the web apps according to usability; 2) investigate how the previous computer skills affected the results and 3) compare the usability of the different interfaces for the different user groups.

In the video a girl who is proficient in Photoshop struggles for five minutes to crop a photo using one of the apps receiving the worst ranking in usability :)



Lucia Tahan  2017
Instagram | hello@luciatahan.com