Case Study: A UX Student’s First Design Project

Introduction

In our first week at General Assembly we jumped into the fundamentals of UX design. Project 1 put these concepts into practice. The experience was a great way to quickly test our understanding [and assumptions] of the UX design process. Here’s to swimming in the deep-end…with a life jacket!

Brief

Design an interactive paper prototype of an application that effectively solves a common user problem.

I. Discovery & Research Phase

Idea Mapping

We were given a wide range of topics to pick from. The broad scope of the brief left a lot of wiggle room for interpretation. I choose “fashion” and began by mapping out any and all ideas that came to mind — the weirder the better! Idea mapping allowed my mind to relax and consolidate the ambiguous nature of the assignment.

Mind mapping exercise of anything related to fashion.

User Interviews

I then wrote a bunch of correlated questions and set off to conduct a series of 1:1 user interviews. The goal of these interviews was to better understand fashion preferences, the fashion landscape, and common problems that existed.

Conducting user interviews can often be challenging, especially when you are unfamiliar with the nuances of framing questions. I found that asking open-ended questions was a great way to understand a participant’s problems and needs. Otherwise you may run the risk of unwittingly leading the participant.

“I guess it’s just easier to buy the same shades online and forget about it.”

Throughout the interviews a couple common themes popped up: women rarely changed their make-up selection and women disliked trying on make-up in store. My research showed that women spent on average 30 minutes a day applying make-up, and yet they only took approximately 3 to 4 dedicated trips to buy make-up. Why the discrepancy between daily beauty routines and trips to the make-up aisle?

Persona

I took the user interview feedback and created a unique persona that highlighted the needs and concerns of my desired user base.

Jackie P., 24 years old

  • Relationship Status: Single
  • Prof. Exp.: Works ~60/week at Amazon as a Marketing Manager
  • Tech Adoption: Early Majority Adopter, Tech enthusiast
  • Favorite Apps: Snapchat, Apple Podcast, Tinder
  • Hobbies: Dancing, grabbing dinner with friends & playing club volleyball

Affinity Mapping

Following user interviews, I synthesized all of the notes and data into an affinity diagram. It was challenging to find correlations within the data, but crucial to help organize my findings. I realized that Jackie’s limited make-up selection often stemmed from lengthy in-store buying experiences. The affinity mapping process allowed me to form a succinct and distinct narrative.

Jackie’s Problems:

(1) Frustrated with a limited make-up selection

(2) Testing out new make-up in-store is time consuming

II. Design Phase

Storyboarding

Based on user research findings, I created a narrative that addressed Jackie’s pain points, our solution and desired outcome. UX Designers are story tellers. Developing a personal story placed her directly into the problem I was trying to solve and helped refine my idea.

Solution: iGlam is a mobile, augmented-reality app that allows users to quickly try on and purchase new make-up styles.

(1) Increases ability to test out make-up styles

(2) Expedites the make-up purchasing process

User Flow

I then determined the application’s core features, and steps required to complete set goals. I narrowed it down four desired goals: the application of new(1), recommended(2) and past(3) make-up styles, and an expedited purchasing process(4). The difficult part was making sure the flow remained simple and concise. Feature creep is very real.

Whenever I found myself going down a feature rabbit hole, I would ask myself: “does this action support one of the four basic goals?” and “is this the simplest way to achieve the end state?”.

Sketches

Once the user flow was completed I sketched out a basic wireframe. I prioritized the core features highlighted in the user flow, making sure not to overcomplicate the interface.

Initial sketches of the Main Screen. I tested out different styles of the “Color Palette” & “Facial Element Bar.”

Features

“Facial Element” Bar: Jackie can choose the part of her face she would like to apply make-up to; this includes eye contour, eyebrows, eyelashes, lips, skin.

“Color Palette” Pop-up: Jackie can select the color, hue and texture of the make-up.

“Look Book” Pop-up: Jackie can save and compare the looks she’s created.

“Style Watch” Page: Jackie can search through a directory of recommended popular, trending and seasonal styles.

“MyLook” Page: Jackie can look back at previously purchased and saved styles.

III. Prototyping & Testing Phase

Lo-Fi Wireframe 1.0

After tightening up the interface a bit more, I conducted a series of usability tests. Usability testing can be tricky because creator bias is something I battled with. It is important to remain impartial and refrain from leading participants. There are a few key components that can make or break the usability testing process.

Here’s what I found to be helpful:

(1) Keep the commands simple and be careful not to mention specific page elements by name.

(2) Ask the participant to explain their thought process:

  • Why did you click that [element]?
  • What do you expect to happen?

The participants were effectively able to navigate through the application. However, they did provide suggestions on how to improve the interface.

Lo-Fi Wireframe 2.0

iGlam 2.0 Paper Prototype with feature alterations mentioned below.

I took results and feedback from the usability tests and iterated upon my initial lo-fi wireframe design.

Feature Alterations & Additions

(1) ‘Erase’ Button (Main Page): Initially an undo button, Jackie can now erase make-up throughout the application process, regardless of order.

(2) ‘Sort by’ Drop-down Feature (“Color Palette” Page): Jackie can sort make-up suggestions by brand and texture.

(3) ‘Deselect/Select All’ Button (“Shopping Bag” & “MyLook” Page)

IV. Final Thoughts

What a whirlwind of a week! After applying what we learned in class, sketching, iterating and iterating some more, my first deep-dive into design has been intense and extremely rewarding. It was amazing to see my design come to life.

TLDR; Here’s a bit of what I learned during my week at General Assembly:

  • Designers are orators. Tell a story.
  • Sketch fast and often.
  • Avoid leading the participant while conducting research.
  • People rarely say what they really mean, want or do.
  • Iterate, iterate iterate.
  • Remain user-centric. When all else fails, go back to Jackie and how the decision impacts her.

Areas of Improvement:

  • Remove Assumptions & Biases: The affinity diagram was useful, but it seemed like sometimes my biases guided the mapping instead of the other way around.
  • Bring User Flows back to the User : Help them cross from A to B. At first it was difficult to remove the UI elements from the user flow. Instead, focus on the task and motivation behind the action.
  • Create a Wireflow: I felt a disconnect between the user flow and my initial sketches. In the future, I plan to incorporate a wireflow to help bridge the gap of function and purpose.
  • Place a higher emphasis on Enlightened Trial-and-Error: Due to time constraints the user research and testing felt rushed. Increase the number of wireframe iterations and user testing.

V. Next Steps

Most of the original assumptions used to formulate the problem and solution were validated. Yet questions still remain around user adoption and process improvement. Applications like Snapchat and Instagram have enabled users to trust augmented reality by disguising them as “filters”. But these features don’t result in a user wearing a physical product on their face. Will Jackie trust that the make-up will look as promised? How do we build trust through design?

Areas of focus in future iterations:

  • Conduct usability research on more intuitive design interactions.
  • Add a “swipe left” to save a look and “swipe right” to discard a look.
  • Redesign “Facial Element” bar into a button that pops-open when held longer than a specific period of time.
  • Remove “Facial Element” bar from the initial home screen and incorporate within the “Color Palette” bar.
  • Add a bookmark feature in “MyLooks” that allows users to save looks without purchasing.
  • Create a streamlined onboarding process for new users .
  • Brainstorm expanding user profiles to allow “following” and “sharing” functions.
  • Conduct further research on make-up offerings