Mobile Tech House

UX Case Study

Duration: 10 Weeks

Mobile Tech House is a website for people who love smartphones or people who just need to have enough information so that they can buy a new phone of their choice, or know about smartphones.


My Role as Designer

I completed the user experience design for this project. I conducted the design process with ideation and research to create an MVP design for a core flow.


Responsibilities

  • Ideation

  • User Research

  • User Interviews

  • Wireframing

  • Usability Studies

  • Prototyping

Problem && Solution

Provide easily understandable information about smartphones to enthusiasts and people generally looking to know about smartphone technology or a particular phone of choice.


Create a website that is easy on the eyes with clear and concise content that not only fulfills the need of an average user but also tends to sway an enthusiast.

Mobile Tech House

UX Case Study

Duration: 10 Weeks

Mobile Tech House is a website for people who love smartphones or people who just need to have enough information so that they can buy a new phone of their choice, or know about smartphones.


My Role as Designer

I completed the user experience design for this project. I conducted the design process with ideation and research to create an MVP design for a core flow.


Responsibilities

  • Ideation

  • User Research

  • User Interviews

  • Wireframing

  • Usability Studies

  • Prototyping

Problem && Solution

Provide easily understandable information about smartphones to enthusiasts and people generally looking to know about smartphone technology or a particular phone of choice.


Create a website that is easy on the eyes with clear and concise content that not only fulfills the need of an average user but also tends to sway an enthusiast.

Mobile Tech House

UX Case Study

Duration: 10 Weeks

Mobile Tech House is a website for people who love smartphones or people who just need to have enough information so that they can buy a new phone of their choice, or know about smartphones.


My Role as Designer

I completed the user experience design for this project. I conducted the design process with ideation and research to create an MVP design for a core flow.


Responsibilities

  • Ideation

  • User Research

  • User Interviews

  • Wireframing

  • Usability Studies

  • Prototyping

Problem && Solution

Provide easily understandable information about smartphones to enthusiasts and people generally looking to know about smartphone technology or a particular phone of choice.


Create a website that is easy on the eyes with clear and concise content that not only fulfills the need of an average user but also tends to sway an enthusiast.

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

I conducted interviews to understand what the users need from a website about smartphones. I tried to have two sets of user groups, one that was mobile tech enthusiasts and the other that was occasionally looking towards a smartphone.

With the first user group, we identified that already existing websites hold their value for enthusiasts, but for others, such sites had content that was difficult to understand.

I conducted interviews to understand what the users need from a website about smartphones. I tried to have two sets of user groups, one that was mobile tech enthusiasts and the other that was occasionally looking towards a smartphone.

With the first user group, we identified that already existing websites hold their value for enthusiasts, but for others, such sites had content that was difficult to understand.

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.

Primary

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.

Secondary

Mobile Phone

Pakistan

  • The website contains very detailed information.

  • The navigation system is poor and complicated to navigate through.

  • The website is ancient and the UI is as old.

  • The content structure makes the website very overwhelming.

Mobile Mall

Pakistan

  • There is a different visual feel to the app.

  • There is a bombardment of ads that makes the experience very bad.

  • The navigation system is very complex with nested navigations across pages.

Mega

Pakistan

  • The website has a conventional visual feel that makes it easy to understand.

  • The UI is consistent across the whole website with reused elements.

  • Navigation is quite dense.

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

" Buying a new phone can be exhausting."

" Buying a new phone can be exhausting."

Demographics

  • Age - 33

  • Education - College Graduate, MBA

  • Occupation - Financial Consultant

  • Family - Wife & Parents

  • Hometown - Karachi, Pakistan

  • Age - 33

  • Education - College Graduate, MBA

  • Occupation - Financial Consultant

  • Family - Wife & Parents

  • Hometown - Karachi, Pakistan

  • Age - 33

  • Education - College Graduate, MBA

  • Occupation - Financial Consultant

  • Family - Wife & Parents

  • Hometown - Karachi, Pakistan

About

About

Zohaib is a financial consultant for multiple small tech companies and is a mobile tech enthusiast. As he is constantly working on his phone, the battery dies out, not lasting him the work day. So now he is looking for a new phone with good battery performance.

Zohaib is a financial consultant for multiple small tech companies and is a mobile tech enthusiast. As he is constantly working on his phone, the battery dies out, not lasting him the work day. So now he is looking for a new phone with good battery performance.

Zohaib is a financial consultant for multiple small tech companies and is a mobile tech enthusiast. As he is constantly working on his phone, the battery dies out, not lasting him the work day. So now he is looking for a new phone with good battery performance.

Goals

Goals

  • Wants to buy a new phone within his budget as his old phone is dying out. 

  • Would love to compare different phones and choose the best among them. 

  • Preferably would love to have a phone with decent battery life. 

  • Wants to buy a new phone within his budget as his old phone is dying out. 

  • Would love to compare different phones and choose the best among them. 

  • Preferably would love to have a phone with decent battery life. 

  • Wants to buy a new phone within his budget

  • Would love to compare different phones and choose the best among them. 

  • Preferably would love to have a phone with decent battery life. 

Frustrations

Frustrations

  • Is overwhelmed by the variety of options within his budget.

  • Comparison between phones does not indicate the better option.

  • Searching is too simple and cannot find phones with particular features.

  • Is overwhelmed by the variety of options within his budget.

  • Comparison between phones does not indicate the better option.

  • Searching is too simple and cannot find phones with particular features.

  • Is overwhelmed by the variety of options within his budget.

  • Comparison between phones does not indicate the better option.

  • Searching is too simple and cannot find phones with particular features.

Zareen Malik

" I love capturing all the moments in life"

" I love capturing all the moments in life"

Demographics

  • Age - 23

  • Education - College Graduate

  • Occupation - Social Media Manager

  • Family - 2 Siblings & Parents

  • Hometown - Islamabad, Pakistan

  • Age - 23

  • Education - College Graduate

  • Occupation - Social Media Manager

  • Family - 2 Siblings & Parents

  • Hometown - Islamabad, Pakistan

  • Age - 23

  • Education - College Graduate

  • Occupation - Social Media Manager

  • Family - 2 Siblings & Parents

  • Hometown - Islamabad, Pakistan

About

Zareen is a social media manager at a young startup. She is a vibrant and in love with her job, but lately the content quality of her work in comparison to others is fading. With the fault being with her phone camera, she is looking to get a new phone with the best camera out there.

Zareen is a social media manager at a young startup. She is a vibrant and in love with her job, but lately the content quality of her work in comparison to others is fading. With the fault being with her phone camera, she is looking to get a new phone with the best camera out there.

Zareen is a social media manager at a young startup. She is a vibrant and in love with her job, but lately the content quality of her work in comparison to others is fading. With the fault being with her phone camera, she is looking to get a new phone with the best camera out there.

Goals

  • Looking for a new phone with a great camera.

  • As a person with not much interest in technology, support in finding a phone would be great.

  • I would love a phone that can take great photos upclose and from distance.

  • Looking for a new phone with a great camera.

  • As a person with not much interest in technology, support in finding a phone would be great.

  • I would love a phone that can take great photos upclose and from distance.

  • Looking for a new phone with a great camera.

  • As a person with not much interest in technology, support in finding a phone would be great.

  • I would love a phone that can take great photos upclose and from distance.

Frustrations

  • There are many phones with great cameras, but there are not many detailed reviews on which is the best.

  • Not able to search & filter phones with best camera out there.

  • Phone details do not have anything on camera results.

  • There are many phones with great cameras, but there are not many detailed reviews on which is the best.

  • Not able to search & filter phones with best camera out there.

  • Phone details do not have anything on camera results.

  • There are many phones with great cameras, but there are not many detailed reviews on which is the best.

  • Not able to search & filter phones with best camera out there.

  • Phone details do not have anything on camera results.

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

  • Buy a new smartphone

  • Battery life is the most important feature

  • A powerful processer can help with work

  • Buy a new smartphone

  • Battery life is the most important feature

  • A powerful processer can help with work

  • Buy a new smartphone

  • Battery life is the most important feature

  • A powerful processer can help with work

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

  • Buy a new smartphone

  • One with best camera results

  • Phone with a great display can help with work

  • Buy a new smartphone

  • One with best camera results

  • Phone with a great display can help with work

  • Buy a new smartphone

  • One with best camera results

  • Phone with a great display can help with work

Site Map

After mapping user stories to basic website requirements, I created an initial site map for the website having key navigations.

Site Map

After mapping user stories to basic website requirements, I created an initial site map for the website having key navigations.

GETTING IT OUT THERE

Wireframes

Taking the time to draft iterations of each page on paper ensured that the elements that made it to digital wireframes would be well-suited to address user pain points. I prioritized the smartphone specifications viewing flow.

GETTING IT OUT THERE

Wireframes

Taking the time to draft iterations of each page on paper ensured that the elements that made it to digital wireframes would be well-suited to address user pain points. I prioritized the smartphone specifications viewing flow.

Build

BUILDING THE BLOCK


The Prototype

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

Backend Software Engineer

Backend Software Engineer

"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.

10%

#0D2C54

10%

#0D2C54

30%

#F5AA39

30%

#F5AA39

60%

#EEEDDE

60%

#EEEDDE

#203239

10%

#203239

#AEBDCA

30%

#AEBDCA

#1C6758

60%

#1C6758

Typography

Typography

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

Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz

Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz

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

Accounting for user needs & feedback from the usability studies, the UI design was focused primarily on the smartphone specifications viewing flow.

Accounting for user needs & feedback from the usability studies, the UI design was focused primarily on the smartphone specifications viewing flow.

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?

Created with 💙 and lots of 🍔🥤

Created with 💙 and lots of 🍔🥤

Created with 💙 and lots of 🍔🥤