Embedded Files
The Project
The Project
The product
Protowave Cases is the newest, sleekest, and snazziest player in the custom phone cases game. Aimed at the next generation of phone case buyers, these cases are robust, fun, fully customizable, and sustainable. The project took slightly over one month to complete, from conceptualization to completion.
The problem
Users want to stand behind products they believe in. Too often than not, products don't live up to the quality standards of users, which should be a base requirement for any consumer product. Additionally, the younger demographic that Protowave Cases aims to target use their phones more than any prior generation. They also want to express themselves through a fun, vibrant, or minimalist phone case. In the age of digital creators, Protowave Cases offers bulk ordering options for those who wish to resell cases with their art/designs on them. The primary goal of this responsive website is to create a phone customization flow to enable users to make the phone case of their dreams.
My Role
UX Designer on the Protowave custom phone cases user flow from conception to finalization. Project responsibilities included: initial user research, paper and digital wireframing, low and high fidelity prototyping, competitive auditing, conducting usability studies, accessibility design, and iterating on designs.
The User
The User
Initial Research
Preliminary research was done using moderated user interviews with a sample size of 3 people with as diverse a background as was possible. One user had an iPhone, one had a Google Pixel, and the last one had a 5-year-old LG phone. The user with the older LG phone expressed how difficult it is to find cases for their phone which makes availability for obscure phone models a selling point. While the majority of potential users' mobile phones will fall within the 10 most common models, additionally servicing that smaller minority that doesn't have one of these phones will let Protowave Cases reach as many customers as possible. The iPhone user brought up the quality of the case more than the other two. Phones are expensive to replace, and if the reason a phone broke was the difference between a $30 and $50 case, users believe it is worth the extra cost for higher quality. Ease of cleaning is also important to users. One user specifically mentioned with the additional information that they had a case previously with many ridges that were impossible to clean in between.
User Pain Points
Phone Selection
Other phone case businesses only offer cases for the most popular phones, leaving users with older or less common phone out of luck.
Quality
Users complained about cheaper phone cases they've purchased in the past, which have broken, fallen apart, or the plastic discoloured over time.
Cleaning
Being able to easily clean a phone case is important. Users appreciate a case that is easy to clean and doesn't get filled up with bellybutton lint-like substances.
Persona: Alexandria
Alexandria is a freelance artist who needs a way to have her art printed on high-quality phone cases. She wants to maximize potential revenue on her online store and take her business to the next level with customer requested phone cases.
Age: 29
Education: Bachelor degree
Hometown: Vancouver, Canada
Family: 1 brother, 1 sister
Occupation: Freelance artist
Goals
Wants to put her art on her phone cases to sell.
Good custom case preview menu.
Multiple areas of customization.
Bulk ordering/ pricing.
Frustrations
“Last time I ordered a custom phone case they printed it in 72dpi”
“The colours don’t print properly on other sites.”
Bio
Alexandria is a 28 year old freelance artist, trying to make a name for herself in the art world. She currently sells her art on an online shop and wants to add phone cases with her custom art on it.
Previously she had an experience where the custom phone case she ordered was printed in very low resolution which wasn’t up to her standards. Another instance, she ordered a custom phone case the colours were far darker than in the original file.
Persona: Santi
Santi is a busy college student and bartender who needs a way to buy a fun, fully customizable phone case that also protects his phone because he's tired of low quality cases breaking or not being protective enough and wants to express his personality.
Age: 21
Education: Economics student
Hometown: Elbow, Canada
Family: Parents
Occupation: Bartender
Goals
"I want a case that is easy to see from across the room.”
“My case should express who I am.”
“A good phone case is a conversation starter.”
Frustrations
"Phone cases are usually so boring.”
“Most cases don’t actually protect my phone when I drop it.”
“I don’t want a case that looks cheap.”
Bio
Santi is a 21 year old second-year economics student currently attending the University of Alberta. Santi bartends part-time at a local college bar and when he’s not working or studying for exams, he’s partying!
He’s frustrated that every phone case he comes across is either solid black, or incredibly uninteresting. Steve tried ordering a custom case once but the quality was very poor as well as the design was offset from where he thought it would be.
User Journey Map
Goal: Order a phone case that expresses his fun personality while also protecting his phone.
Initial Design Process
Initial Design Process
Competitive Audit
In the phone case industry, the real competitors are the direct competitors. Indirect competitors typically offer a smaller phone selection, and the cases are very basic. These basic cases are not what the target demographic for Protowave Cases wants in a case. They might satisfy the quality requirement for users, but they don't allow for customization. Additionally, the cases are usually not manufactured sustainably, and research shows that more and more consumers care about sustainability. Many of the more popular custom phone case brands were audited, with notable aspects of each listed below.
Paper Wireframes
From the beginning, a mobile-first approach was taken mainly due to secondary research showing that in 2022, 58% of all multi-device sales closed the sale on a mobile device (Merchant Savvy Statistic, 2022). On top of the fact that it is a store for phone cases, focusing on the mobile audience first only makes sense. The scope of this project through the lens of the Google UX design certificate was to create a desktop experience along with mobile mockups for a responsive website so while initial designs and the process focused on the mobile experience, the majority of final deliverables are for a desktop experience.
Digital Wireframes
The main goal of this project is to deliver a user experience that guides the user through the process of selecting between many different customization options. This was accomplished mainly by breaking the customization process into multiple screens with a central progress bar to not overload the user. Having every customization option on one screen could increase confusion and lead to mistakes.
Usability Study
Study Type
Unmoderated usability study
Location
Canada, remote
Participants
4 participants
Length
15-20 minutes
Findings
The simple and minimal UI design helps users focus on the action items.
Users want to spend as little of their time as possible placing an order for a phone case.
Creating a more intriguing visual design could add enjoyment to the customization process of the site.
Refining the Design
Refining the Design
Mockups
Based on the competitive audit and secondary research findings, the target audience that the site should appeal to is those in the age bracket of 21-35. From this, the visual design choice of using fun colours was decided. Not only fun colours but also colours popular in arcades from the late 1990s and early 2000s. Adding nostalgic colours creates a conscious or subconscious bond between the user and the site, which is an absolute net positive.
Hi-fi Prototype
Overall, the most notable change between the lo-fi and hi-fi prototypes was in visual design and more minor added details. The visual design is somewhat bold and risky, but users often respond positively to unique and fun design choices.
Desktop Hi-fi prototype in Adobe XD
Site Map
This IA for this service follows a sequential model, as the site's primary use is to customize phone cases. There are secondary user flows, such as the premade case selection and the gallery, where users can check out new or trending cases.
Accessibility by Design
Accessibility by Design
Initially, the visual design was a risk that users with visual impairments like colour blindness might have trouble seeing the contrast in the bold and colourful menus. While there are many varieties of colourblindness and visual impairments, one test user with a common type of colourblindness was sought out to participate in the usability study. This user did not navigate the site noticeably slower than the non-colourblind users.
Multiple options for navigation were included in the form of header buttons, footer buttons, and a search bar to ensure users always have a way to find the product or service they're looking for.
Going Forward
Going Forward
Next Steps
Complete mobile flow in entirety.
Add additional product types such as accessories and premades.
Lessons learned: When designing a function flow, make the experience as enjoyable and predictable as possible for the user. Users like to know their progress, and the whole process should be as painless as possible. Adding features to delight the user makes a longer process go by faster and issues aren't as likely to upset them as much if they should arise.
Page updated
Google Sites
Report abuse