Project Caser
Project overview
The Product: A website flow for a smartphone case ordering company called CASER
Project Duration: The estimated duration of this project was one month.
My Role: Lead UI Designer, Researcher
Client
Caser Incorporated
Date
June 2023
My Responsibilties: I am responsible for the user research, empathy maps, user journey, paper and digital wire framing, mockups, Lo-Fi and Hi-Fi Prototypes.
User Research Summary
For this project, I will walk you through the steps I used in designing an efficient flow for a phone casing app. Before launching, I conducted a user research to understand the challenges users face in finding custom designs, payments, and processing of their orders, and how we can further overcome those challenges. Every design is useless if the users are not placed in the heart of the design.
For this project, the primary research method was used to get first-hand feedback from our users. I conducted interviews, created empathy maps, story boards and user journeys to determine users needs and their pain points in using the smartphone case website.
Research Questions
On average, how many users were able to complete the user flow?
Are users able to choose their own designs?
On average, how long does it take a user to finish the flow?
How easy was it for users to navigate back and forth the website.?
What major recommendations did users give?
Research Goals
Determine how well our user can complete the core tasks within the app
Determine the challenges users face when using the website.
Determine the possible solutions to the challenges.
Painpoints
I was able to carry out interviews and give out questionnaires. The results gathered from this were four specific pain points.
Design
Users complained about the website color and design
Navigation
Users complained that it is difficult to navigate in the app
Small Texts
Users complain of small texts in the website, illegible and hard to see.
Tracking
Users complained about the tracking system that it is almost non existent
Personas
After determining our users preliminary challenges, I sorted out to create our personas. These personas represented the subset of our potential users, in a large populace. They will represent the population of users whose problem I am trying to solve.
I created two personas for this cause as seen below.
Meet Kishane
“I love walking my dogs in the evenings, I enjoy the stroll”
Problem statement:
Kishane is a mother of two, who needs a legible and user friendly website because she needs to buy a new phone case from her favorite company
Bio:
Age: 27
Education: College Diploma
Hometown: Toronto
Family: 4
Occupation: Graphic Designer
Goals:
Wants a simpler navigation
Wants a legible design and font.
Wants an easy-to-use design and layout.
Frustrations:
Confused with layout
Hard to navigate around
Illegibility.
Kishane is a graphic designer, blessed with a husband and two kids. She works from home, As with the nature of her job, she uses her laptop to order smartphone cases. Kishane is visually impaired and as such needs legibility. She complains about the website not being legible. With the overall design not being visually appealing, she finds it difficult to navigate through the website. She wants an overhaul so she can have a seamless flow with the website.
“I am a smartphone enthusiast who loves customizations”
Meet Manpreet
Bio:
Age: 35
Education: Masters
Hometown: Brampton
Family: 5
Occupation: Insurance broker
Problem statement:
Manpreet is a smartphone geek who wants to be able to track his orders because he loves phone designs
Goals
Wants a customize option.
Wants to be able to track his orders from the site .
Frustration:
Does not enjoy using the website.
Wants to track but cannot do that without running into problems
Manpreet is a professional enthusiast who works for Manu Life as an insurance broker. Manpreet is well-paid and has a wife and a daughter. Manpreet is a smartphone geek and he buys at least one every year. As a result, he finds himself ordering phone cases for his phones. However, he is constantly frustrated about the website he uses, he loves the product they have, but he does not like the website design. Other times, he finds it difficult to track his items from within the website. Manpreet wants these to be fixed so he can enjoy doing what he loves.
Our User Journey Map
Now that we have met Kishane and Manpreet, let’s explore their journeys. This is the set of actions our personas undertook in completing the core tasks of the app from start till finish. Kishane and Manpreet both portray different emotions and undertake different actions to complete their respective tasks.
Kishane’s Journey
Manpreet’s Journey
The Ideation Process
After empathizing with our users, and defining the user problem, here comes the ideation phase. During the ideation process, I made a storyboard, sitemap, paper, and digital wireframes.
I created a storyboard that imaginatively depicts our users using the website on a laptop and completing the core task.
Storyboard
Site Map
Paper Wireframes
I created a lot of wireframes during the ideation phase, but I settled on only a few screens to act as a guide for our designs. These wireframes kept the user’s needs front and center throughout, trying to come up with a design that is user-centric.
After creating the paper wireframes, I moved forward in bringing these designs to the digital world. Using Figma.
Digital Wireframes
Prototyping
Now that I have created the digital wireframes using Figma, I moved forward to create a low-fidelity prototype after which the first usability testing will commence. I need to get feedback from users to move past this stage. Once I get insights, I can make iterations and move to mockups, then high fidelity prototype where another round of usability study will be conducted.
First Usability Study: Parameters
Study type
Unmoderated usability study
Methodology
For our website, I am conducting the unmoderated usability study on June 25th and 26th in Toronto, Canada during normal business hours. Five individuals will be interviewed. I intend to possibly give insights from the research. Each session would be approximately 30 minutes, including, but not limited to a short introduction, a list of tasks as well as a brief but detailed questionnaire
Participants
Participants are all between the ages of 15 - 55.
Two females and three males.
Two participants with visual impairment.
One participant works from home
Two participants work from the office
Location
Remote, Canada
Script
Short intro
Before we begin, do I have your consent to take both audio and video recordings of this interview?
I want you to know that this isn’t a test. There is no “right” answer, and none of your responses will be considered wrong.
If you have any questions, please don’t hesitate to ask.
This data is being collected to help improve a website for an e-commerce company. Your answers will help us make the app easier for people to use
Basic Questions
What kind of smartphone do you use?
Do you consider yourself a smartphone enthusiast?
How do you feel about technology in general?
What accessories have you bought for your smartphone?
How did you purchase, online or in person?
How do you feel about ordering for cases online vs in-person?
Do you find it generally easy using a website for ordering?
Which do you think is preferable?
Usability study tasks
Prompt 1: Select your phone category from the homepage.
Prompt 1 follow-up: How easy or difficult was this task to complete? Is there anything you would change about the process of selecting?
Prompt 2: Choose a case design you like and add it to cart.
Prompt follow-up: How easy or difficult was it to perform this task?
Prompt 3: Go to the previous screen
Prompt 3 follow-up: How fast was it to figure out?
Prompt 4: Repeat the previous action and go to the checkout screen
Prompt 4 follow-up: How easy was it to complete this task?
Prompt 5: Place an order for a phone case.
What did you like and dislike about it
Findings
Themes:
2 out of 5 participants found it difficult to navigate to a previous page.
1 out of 5 participants wanted an option to favorite a design.
2 out of 5participants were not able to see buttons clearly.
After the interviews, I came up with three themes and formulated three insights/findings from these themes.
Actionable Insights:
Users need more visible button for interaction within the website.
Users want a favorite button for their best phone case designs.
Users need buttons with much emphasis and legibility .
Notes:
Based on these findings, we have three major areas of iterations to make and add to our our mockup design.
Mockups
A simplied homepage layout
A confirmation page
A better tracking system
High Fidelity Protoype
After creating mockups, the next step was to create a hi-fi protoype so we can test with our users. We used the same usability research parameters for this round as well as we came up with a one insight.
Notes:
I iterated on the design from the insights I got in the second round of usability testing. As seen on the prototype above, there is now a refined checkout page with easy navigation.
Actionable Insights:
Users want a refined checkout screen
Accessibility Consideration
As with every design, we have to ensure they are inclusive and have accessibilty options for other users. Users with disability will also benefit as much as users with out disability. Users without disability may even find the usability smoother as a result. For accessibilty, we incorporated some few considerations.
For accessibility, we made the top navigation bar color of our website dark blue, with white color for emphasis.
We included an easy to understand navigation so as to enable all users move back and forth pages/screens.
Lastly,we made the GUI simple and laid emphasis on all action buttons, with a dark blue background, paired with white text. These way most users would be able to read and recognize buttons.
Key Takeaways
With the final design, users are happy with the whole design layout, the visibilty of text, the tracking screen, the checkout screen and the GUI.
Thus, this answers our research questions, solved our users pain points as well as meeting our research goal.
What I learned
In this project, I learned that we must keep on researching and keep on iterating on designs to best fit our users need. Afterall, they are the reason for designing.
Next Steps
Although our design has gone gold and handed out to the engineering team, research will not stop. Design is a continuous process.
Research Participants
