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.

Mood board: shopping
Mood board: clothing stores

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.

Mood board: fashion typographies

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.

Mood board: classic patterns found in clothing

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.

Brand colour

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.

Typefaces

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.

Some screens of the prototype

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.

Evolution of information display and decision screen

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:

https://invis.io/9PAW13CR8

Be careful with the last screen, InVision is not designed to support animations and sometimes it crushes.

--

--

--

Pequeña por fuera, grande por dentro.

Love podcasts or audiobooks? Learn on the go with our new app.

See beauty through users’ eyes…

Creating an APP to pivot a “sunset” product — case study

Part 1: EXPLORE | A step-by-step guide to using UX research for local news product development.

How to make the invisible, visible

The World of 3D-design

Thanking 639 people in 2020

How Design Conference Organizers Are Innovating in Response to COVID-19

The Alexa Recalls Innovation Pilot: Designing for Voice in Government

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Ángela Burón

Ángela Burón

Pequeña por fuera, grande por dentro.

More from Medium

The Elements of Successful UX Design

Elements of Ux design

15 Amazing UX Cover Letter Tips to Help You Land Your Next Role

Omotenashi and UX design

photo montage, polaroid, of a photograph of a happy Asian woman in a store, held by a washitape of emojis, newspaper clippings, a stamp and a japanese heron illustration.

UI/UX Articles and Interesting Tidbits of the Week