Case study · Visual design for Julie
Introduction
Looking back at your work feels always awkward, you realise how much you have learned and, sometimes, how stupid you were a few weeks ago. The visual design challenge for this one-week project was to design the visual interface for at least three screens of the first project I did in GA.
My user was Julie, a young professional with a little problem when it becomes to shopping. She buys too many clothes she doesn’t need and as a result she has a closet full of duplicated clothing items, a feeling of guilt and a sad wallet. The solution outlined in Project 1 was an app that helps Julie to make the decision in site, she would have a data base with all her clothes and would use the app to scan new items and get the information she needs to make a wise and responsible decision.
Through several interviews with my user, I found out that the key was to raise awareness of how many clothes she already owns. Emotions play a very important role in the decision: she buys impulsively and impulses are not rational at all. How to face this challenge?
Brand qualities
The first problem I found was that I didn’t like my work at all. It looked too simple and not interesting at all. But I trusted the process and started working on the brand qualities.
Reading lists of suggested personal values for brands and thinking about Julie, I identified some characteristics I wanted for my brand:
Simple, but not basic
Fun, but not childish
Feminine, but not cheesy
Colourful, but not irritating
Informal, but not unprofessional
Gentle, but not weak
I decided to base my decisions on this personality and keep working, although I couldn’t see any tangible progress yet.
Mood boards
Looking for inspiration I did a research in several languages, to discover some useful information.
Looking for images related to shopping, I found a large variety of colours, but very quickly I realised some of them were more frequent, especially yellow and red.
Next, and still without a clear idea of what I could do, I started thinking about typography. I found out that the typographies commonly used in fashion wouldn’t fit my needs, as I wanted a fun informal look.
I also realised that my style as a visual designer is usually very clean and that would probably not obey the brand qualities I had chosen. So, worried about that, I had the idea of taking a look at patterns I could use as a fun background to make my personal style meet the requirements.
Solution
Finally, I created an outline of my brand style book.
I wasn’t feeling very confident about my ideas, so I decided to play safe. I know some colour combinations don’t fail, so I picked only three colours: yellow, black and white.
I also picked a polka dot background because it’s playful and fashionable, but also geometric and simple. Here is where my style and the personality of the brand met and I started feeling more confident about the results.
About the typography, I decided to keep it simple and avoid long texts. I chose two typographies, one very feminine and another one very masculine, to find some balance and keep the fun look.
Then I started creating the prototype in high fidelity straight away even though this is not the process I was supposed to follow. The problem is, my whole idea was about colour, contrast and emotion, and this is not something you test in low fidelity.
I started creating a background repeating the dots and let the design come alive by itself. In the first screen, it was obvious that I had to remove the dots to make readability better. I also had the idea of using the dots as buttons. Making them slightly bigger, with full opacity and a light shadow, I got the effect. User testing proved that buttons were easy to see and recognise as buttons.
In the second screen I decided to play a bit more with the disposition of the dots and I decided to keep the handwriting typeface for the buttons and the more aggressive typeface for the text. It looked good, users liked it and created a good balance.
Then, after some feedback from users, I started working on the most important screens of the app, those where the information is displayed and the decision is made. The emotions are important here, so I tested a few times until I got the desired effect.
My user, Julie, mentioned “it’s not making me feel guilty enough”. I found it funny and useful, and I realise it was okay to be a bit rude with the language when you are showing the message in a friendly background.
To create the feeling of decision and help the user be conscious about why she shouldn’t buy another item of clothing, I got inspiration from Tinder.
In this app there are no home or back buttons, and that was done on purpose. For example, at this point the user is trapped in the app: the only possibility is to navigate between this two screens, where the information is shown and where the decision is taken. Users found this pressure effective to stop impulsiveness.
The final screen shows a greeting message and a button to start again. Julie wanted to see something playful and rewarding to make her feel like she did a good thing, so I tried different alternatives and after checking with users, I decided to use the polka dots as confetti.
Clickable prototype
If you want to pretend you are Julie, you are in a shop and you have found a very cute black clutch you don’t need whatsoever, check my prototype clicking here:
Be careful with the last screen, InVision is not designed to support animations and sometimes it crushes.
