Process
WAY OF WORK
My Design Process
I started my design process with user research interviews. Empathizing with users, I identified their needs in terms of personas. I then created user stories along with user journey maps to define the requirements.
Next, I explored some user flows to create wireframes and created a working prototype.
Testing the paper & digital prototype with users led to valuable feedback that helped with the creation of visual design and high-fidelity mockups
Research
CLARITY ON USER PROBLEM
User Interviews
To understand what the users needed from a website such as ours, I interviewed people from various backgrounds, with and without interest in mobile technology.
What I did was that I provided them with websites and asked questions about them to understand their needs. This way participants had a reference point to start with and provide insights on the idea.
User Interview Questions
1. What missing information do you think is not present on such websites?
2. Is there anything, in particular, you want to add to such a website?
3. Let’s say you want to buy a new mobile phone and come to this website for information other than the spec sheet what would you like to see that can convince you to make an informed decision?
User Research Summary
Competitive Audit Summary
After the initial user research and before empathizing with the users, I performed a competitive audit to understand existing solutions. The audit was done for both direct and indirect competitors helping in identifying gaps, similarities, and inspiration for our solution.
What Mobile
Pakistan
There is detailed information about a smartphone.
Orders data by price ranges with the ability to search by brands.
Has a constant visual theme across the site.
The abundance of ads with useless data.
Visual hierarchy needs work and the user interface looks pretty ancient.
Navigation cues & CTAs are not well highlighted.
GSM Arena
Global
Harmonious visual style with a clear brand identity.
Data is organized well with a lot of variations to find anything particular.
The site comprehensive navigation is laid out in a way that helps with the site flow. site-wide
It is overwhelming for a new user when he accesses the site.
There is a lot of white space in the site layout that can be used.
Information present is too specific for a nontechy person.
Phone Arena
Global
The website is visually appealing with a structure that is well-balanced and easy to navigate.
Website links to specific retailers that sell smartphones.
The site has an overall friendly vibe too it.
There is negative space that can be better used.
The ads experience is poor and has a negative impact on the website visuals.
BUILDING THE CONNECTION
Empathy Maps
Pain Points
The visual presentation of information along with the many ads makes the experience overwhelming for new users.
While the reviews on the website help, the credibility of the mobile reviewer makes it difficult to trust the review.
The search filters are extensive but not user-friendly, giving a hard time to users for applying advanced searching.
Define
STATING THE PROBLEM
Zohaib is
A financial consultant for many tech companies, needs a phone that can last the whole day with medium to high usage because most of the time he’s on the road and conducting business on his phone
Zareen is
A social media manager at a young startup needs a camera phone with the best results and pixel-perfect quality because, with a great camera smartphone, she wouldn’t need to carry a separate camera.
KNOWING THE USER
Personas
Zohaib Aslam
Demographics
Zareen Malik
Demographics
About
Goals
Frustrations
Ideate
THERE WAS THIS TIME
User Stories
After interviewing the potential users, I translated research findings into user personas that guided the way. I then brainstormed different user stories, identifying the core user story and app feature requirements for the MVP design.
As a financial consultant for multiple companies, always on the road I want to have a mobile smartphone that last the whole day without needing a recharge so that I can conduct my business without having any breaks.
User Story
Requirement
As a social media manager for a young startup who’s life is social media content I want to have a smartphone with the best camera out there, with best image quality so that I can capture every moment with pixel perfect quality for my work.
User Story
Requirement
Build
BUILDING THE BLOCK
From the lofi wireframes, I created a working prototype in Figma and shared the prototype with participants to test. Their feedback helped identify further pain points, gaps in usability, interface, and overall improvements in design.
Test
TESTING WITH USERS
Usability Testing
Next, I conducted two rounds of usability studies. Findings from the first study helped guide the designs from wireframes to mockups. The second study used a high-fidelity prototype and revealed what aspects of the mockups needed refining.
Findings
Users need better searching options and appropriate filter interactions.
Users need a more definitive visual to differentiate compare and specs page.
Users need complete information about the review such as the date and author.
Abdul Rehman
"Trusted reviews & pros/cons sections are helpful."
Deliver
BRINGING IT TO LIFE
Visual Design
It was time to work on the visual design of the website. The users are looking for a clean and intuitive experience that lets them easily understand information about a particular device. I designed the visual in such a way that it resonated with them.
Colors
I started playing with different colors to find the right color group, with a shade of light green as the primary color, I found the combination of dark navy blue to have the exact blend of colors needed to create a visual theme. I divided the colors using a 60-30-10 ratio with some assistive colors to add value to visual cues for proper user feedback.
Poppins was chosen as the font for the app, being a geometric sans serif typeface it has many font weights and a clean font style. It is readable in almost all sizes and is excellent for emphasis.
Aa
Poppins - Medium
Poppins - Bold
Poppins - Semi Bold
Poppins - Regular
BRINGING IT TO LIFE
User Interface
The user interface elements were designed from a basic structure from the design process and then enhanced in iterations from feedback and usability studies. The overall intended tone was to make the UI simple yet intuitive enough so that users complete their journeys.
THE INTERFACE
High Fidelity Design
THE INTERFACE
Getting Started
The website's homepage has featured phones at the top with the popular phone brands right after those. Then we have top phone reviews followed by a section of top smartphones by fans and popularity.
THE INTERFACE
Find Phone & Results page
Users can find phones from a quick search bar on the homepage or with a dedicated find phone page with meaningful filters that allow users to search a wide variety of phones based on budget or specifications.
THE INTERFACE
Phone Specifications & Reviews
When users find a phone, they can view its specifications, reviews, and camera results. The reviews are from verified reviewers. There are also camera shots and a camera review as well.
THE INTERFACE
Phone Specifications
The user can view the complete specifications of a particular phone when they land on the specification page of that phone. The page has a lot of sections including reviews and a detailed summary of camera results.
RESPONSIVENESS
Mobile Design
While the priority was given to web design, I made responsive designs for our smartphone specifications viewing flow.
LIVE IN ACTION
Phone Specifications Flow
I prototyped the core flow of viewing the specification of a particular smartphone along with the associated pages.
The Takeaways & Next Steps
LESSON LEARNED AND FUTURE
Impact
The website conveys information about smartphones that is easy to understand and presents in a way such that the user does not feel overwhelmed by the information.
What I Learned
I learned that the first ideas are only the beginning of the process, competitive audit and user empathy help with understanding user pain points. Usability studies and peer feedback influenced each iteration of the website’s designs.
Next Steps
Conduct another round of usability studies to validate addressed pain points resolution.
Research and apply considerations of our secondary user-persona group and update the core flow.
Conduct more user research to determine any new areas of need.
THE END
Thankyou 🙏🏻
I appreciate your time and attention, I hope you have liked the work and understood what I intended to do but still If you have any questions?