Project Vision
In this 6 week long project, I created a shopping app for parents, where they can purchase affordable children's clothing and sell clothing that their children have outgrown. For this project, I decided to use a goal-directed design method which revolves around focusing on my persona creation and goals.
Challenges
1. Design an app with unique features and a cohesive interface
2. Create a minimalistic UI while keeping products as the focus
3. Provide a seamless purchasing & selling experience
Kickoff
In this project, I took a goal-oriented design approach that proved to be quite effective in the design efforts. I found qualitative research methods to be the most useful, consisting of a literature review, competitive analysis, persona hypothesis construction, and most important my participants unmoderated and moderated interviews. I started out by asking myself some initial key questions.
"What is the product and who is it for?"
"What are the users' goals?"
"How can the user challengers be resolved?"
"What challenges could I face moving forward?"
"What do my primary users need most?"
"Who do I see as the biggest competors?"
I conducted the unmoderated usability study in two sessions. Participants are all parents with kids under 12 years old. They are two males, two females and one nonbinary individual, between the ages of 25 and 45. One participant is a person with a visual impairment.
I then used an affinity diagram to separate the data into groups of tasks which were further categorized by high level goals for improvement in efficiency, process, depth, and familiarity. Recognizing the conflicts of interest from each audience allowed me to focus on shaping user goals and how those goals would in-turn also affect the business' goals.
Meet the Users
"I have tons of clothes at home and don't know what to do with it"
Natalia is stay at home mom who lives with her husband, two kids and pets. She spends a lot of time for shopping to choose cheaper clothes for her kids. She also want to resell clothes that does not fit her kids to earn some extra money. She wants an app where she can buy cheap clothes and then resell them.
"I chose to spend my time on things that really matter. I prefer fast online shopping."
Veranika is the Office Manager and the job takes a lot of her time. As a busy working mom, she wants an app where she can buy kids clothes fast without wasting her time for shopping in stores. She also has a lot of kids stuff that she would like to sell but does not how.
Competitive Analysis
I looked at several potential competing companies, and although none compete directly with FancyKids, they can still infringe on the businesss' revenue & popularity. FancyKids has the opportunity to capitalize on this by bringing products from each company to create a one-stop platform for buying and selling.
The majority of the features between competitors were pretty similar, however the main differences that I noticed were:
- Easily Accessible vs Hardly Accessible
- Too many screens vs Simplified Interaction
- Bright / Distracting Interface vs Minimalistic Interface
- Specialization of Services
Preparing the Journey
I constructed a user flow of what a basic start to finish journey looks like while selling an item. This helps me to understand ways users can interact with the product, as well as allowing me to see navigation though user goals.
Wireflow
After sketching out some p&p wireframes and thinking through the preliminary flow, I reviewed what was necessary, unnecessary, and what areas needs improvement. Since the app has two main sections SELL and SHOP, I prepared the flow for both of them.
SELL
SHOP
Iteration
After creating the prototype from low fidelity wireframes, I prepared a 10 question interview for participants. I asked 5 different participants to run through different scenarios in my prototype in hopes of gathering enough feedback to use for the next set of design iterations.
NEW LISTING?
All participants had a hard time finding out how to create a new listing and 2 of 5 participants gave up. I changed the button and added the text under it.
UNCLEAR ICONS.
Most participants didn’t understand that the smile icon was a button and tried to hit the text under it. I modified the button to make it more clear.
NO DROPDOWNS & ARROWS.
All participants tried to scroll down screens and hit listings, dropdowns, or arrows, which didn't work and caused users confusion. I added scroll-down options and some interactive elements like inputs or color-changing buttons to make the user experience intuitive and delightful.
Challenge 1
Design an app with unique features and cohesive interface
One of users' goals was to shop for children's clothing fast and effectively. I implemented the Try On Child feature on the app which allows users to add their children's profiles. After adding the profile, they can try on any clothing on their own child to check if it fits them. Additionally, this feature will allow users to rotate their virtual child model in three dimensions.
Challenge 2
Staying focused
The UI consists of a neutral, three-toned pink, white and brown color scheme. Using color sparingly throughout the application's interface, it allows for the items to be the focus point during user engagement.
Challenge 3
Provide a seamless purchasing & selling experience
One of the biggest pain points for users of FancyKids app was the checkout process. It was confusing and time-consuming, leading to a high cart abandonment rate. My task was to redesign the checkout process to make it more streamlined and intuitive. I conducted usability testing to identify the pain points and made iterative improvements to the design until the process was seamless and user-friendly.
With payment method and shipping specifics being accessible within a single screen, it doesn't allow for the user to second guess their purchase after the review screen. This design allows for minimal screen usage and a quicker checkout.
Final design
primary user flow 1: shop
.png)
.png)
.png)
primary user flow 2: sell
Style Guide
Combining incredibly vivid colors to create FancyKids' design came from wanting to express to users just how creative the shopping process can be. The screens feel warm and welcoming enough to draw the user further in.
The FancyKids app has color combinations with a contrast ratio of 12.49 : 1 (HEX #FAD6D6 and HEX #3F080E) and a contrast ratio of 4.88 : 1 for buttons (HEX #DD1D33 and HEX #FFFFFF) according to WCAG (Web Content Accessibility Guidelines).
colors
type
H1
AaBbCc
20pt - Raleway, bold
H2
AaBbCc
20pt - Raleway, medium
Subtitle 1
AaBbCc
16pt - Raleway, semibold
Subtitle 2
AaBbCc
18pt - Raleway, bold
Body1
AaBbCc
16pt - Raleway, light
Body2
AaBbCc
14pt - Raleway, regular
icons
buttons
