A One-Stop Solution For Smartphone Searching
UX Case Study: Phone Zone is an app to compare phones and find the latest news/reviews
Duration: 3 months (September 25, 2020 to December 18, 2020)
Role: UX & UI Designer (project for interaction design college course)
Tools: Figma, Adobe Photoshop
The Problem
Getting a new smartphone is an exciting experience but also could be overwhelming if you can’t decide. When it comes to searching for a smartphone to buy, there are thousands of different options out there to choose from. The research process could get quite tedious once on the Internet as one may find themselves scrolling through various brand websites, phone reviews, articles, videos etc. Sure you may have narrowed your choices to the brands you prefer, but you still need to do a little research before you are fully committed to spending your money.
From personal experience, I can confirm that this process could be very time-consuming. I will admit that I am a loyal iPhone user but I do find myself searching up reviews and specifications for other competing phones on the market. I like how Apple’s website and app has a simple feature which compares its devices although still being limited to iPhones only. I also stumbled upon a few sites and apps out there that compare different phones side-by-side. The reoccurring issue I noticed was that these applications were only limited to comparing phones and there was still the need to separately search up reviews, videos and articles. There was no way to save different phones that I liked without bookmarking them to my browser’s favorites.
Goals:
Keeping in mind the initial research I conducted by examining various phone comparison applications, here were my main goals for Phone Zone before starting the needfinding process:
- Simplify user’s research process without having to scroll through various websites, videos, reviews etc.
- Ability for user to personalize their experience through filtering based on the price, size, model, brand etc.
- A side-by-side comparison of different phones which can help the user easily compare without having to go on each phone’s respective site/app.
Design Hypothesis:
I believe that an app that compares prices, specs and reviews of the latest phones will simplify the users research process and help find a smartphone that fits their needs.
I also think that this app isn’t intended for prospective phone buyers only. It could be used by really anyone whether they are just curious on what phones are releasing or are looking for a friend.
Needfinding
Interviews
To better understand the needs of potential users, I first interviewed two people:
- Person A: My younger cousin
- Person B: My older cousin
Interview Questions:
- So where do you generally go to when you are looking to find information on phones?
- Can you show me how you would usually do this search process?
- Can you tell me what’s frustrating about your current search process?
- What could be better about how you do this process?
- Is there anyone that helps you in this process, or no?
Interview Results:
Person A’s pain points :
- Recently broke her phone and is looking to find a cheaper phone.
- As a busy student, she doesn’t want to waste time in the process of searching up online and reading articles and reviews
- Wants a simpler format without any crazy tech jargon that can easily compare and filter phones.
Person B’s pain points :
- Looking for a phone for his grandfather and is having trouble finding phones that are senior citizen friendly.
- Too lazy and doesn’t have the time to research and read long articles.
- Wants to be able to filter based on accessibility and price range along with the ability to compare different phones side by side.
UX Personas
I created two UX personas that are roughly based off of the information received from the two interviewees:
Person A (Primary Target):
Person B (Secondary Target):
High-priority User Stories:
User Flows:
I chose the shorthand method and simply wrote it all down on paper.
Key Features:
Low-fidelity Wireframes:
Going into the wireframes, I wanted to make sure that I each of my user stories was visible. I wanted to design an interface that has a simple aesthetic along with a focus on visibility and consistency of the key features. Some of the inspiration for the home, search and compare screens came from apps I use on a daily basis including the Apple Store app, Snapchat, and YouTube.
My focus was to put enough design detail that could fully support the key features and functions. At this point, I still had a lot of work in terms of adding more screens that show the different states (e.g., error state, ideal state and blank state) along with making it look visually appealing. Additionally, the feedback I received complimented the thoroughness of my wireframes and advised to add a “continue as guest” option on the welcome screen for a quick option for users that are casually viewing.
High-fidelity Prototype Draft
The feedback received on the prototypes was very helpful. I was advised to add an empty and error state to appropriate screens. There were a few repetitive filler words on the “my account page” that could be simply fixed by removing the word “Favorite” as the heart icon already signifies the word. In terms of the app’s UI, it was acknowledged to have a modern aesthetic with the minimalist color choice and consistent layout which was definitely my goal!
Final Prototype
For my final iteration, I focused extensively on incorporating the empty and error states to my screens. The sign up and log in screens definitely needed error messages to alert the user if their password is incorrect or if they forgot to fill in a field.
Also, when active on a particular tab I chose to fill in the icon and highlight the text on the bottom navigation with a bright purple color. This helps indicate which tab the user is on currently.
Lastly, I added empty states to the search, compare, news and account screens. These screens show what text is written when the user hasn’t favorited anything yet and also provides a brief explanation on how to favorite a phone. Additionally, I designed a flow for how it would look like if the user edits and/or removes a favorited phone from their list.
Overall, I had a lot of fun throughout the brainstorming and design process. As a tech enthusiast, it would be great to see more applications out there that help educate users while keeping them up to date with the latest news.
Check out the final prototype below:
This article was written in partial fulfillment of the requirements of the Fall 2020 section of DMD 3035 — Interaction Design at the University of Connecticut, Digital Media & Design Department.
