Mobile Tech House - MTH
Provide easily understandable smartphone information to individuals seeking to enhance their understanding of smartphone technology.
UX Case Study
Mobile Tech House - MTH
Provide easily understandable smartphone information to individuals seeking to enhance their understanding of smartphone technology.
UX Case Study
Mobile Tech House - MTH
Provide easily understandable smartphone information to individuals seeking to enhance their understanding of smartphone technology.
UX Case Study
Role
UX Designer, UX Researcher
Tools
Figma, FigJam, Google Suite, Jamboard, Whimsical
Responsibilities
Ideation, User Research, User Interviews, Wireframing, Usability Studies, Prototyping
Role
UX Designer, UX Researcher
Tools
Figma, FigJam, Google Suite, Jamboard, Whimsical
Responsibilities
Ideation, User Research, User Interviews, Wireframing, Usability Studies, Prototyping
Role
UX Designer, UX Researcher
Tools
Figma, FigJam, Google Suite, Jamboard, Whimsical
Responsibilities
Ideation, User Research, User Interviews, Wireframing, Usability Studies, Prototyping
Overview
A long time ago, I was the go-to friend for mobile technology advice. With my knowledge of the latest iPhones, Galaxies, HTCs, and Xperias, I loved helping my friends find the perfect phone within their budget. However, they struggled to understand technical details when I recommended websites for information.
This inspired me to design a user-friendly website providing easily understandable smartphone information. Mobile Tech House emerged as a plain and simple website bridging the gap between smartphone enthusiasts and individuals seeking practical information.
The goal was to present smartphone details concisely, without overwhelming users with technical jargon. Mobile Tech House provided clear insights into camera quality, performance, and more. Users could easily grasp the information they needed to make informed smartphone purchases.
Problem
Rich overwhelming websites that are content heavy and too technical to understand easily.
Solution
Design a user-friendly website providing easily understandable smartphone information.
Website
User Friendly Interface
Visually Appealing Design
Simple and Easy Information
Comparisons & Reviews
Key Features of Smartphones
Mobile Responsiveness
Overview
A long time ago, I was the go-to friend for mobile technology advice. With my knowledge of the latest iPhones, Galaxies, HTCs, and Xperias, I loved helping my friends find the perfect phone within their budget. However, they struggled to understand technical details when I recommended websites for information.
This inspired me to design a user-friendly website providing easily understandable smartphone information. Mobile Tech House emerged as a plain and simple website bridging the gap between smartphone enthusiasts and individuals seeking practical information.
The goal was to present smartphone details concisely, without overwhelming users with technical jargon. Mobile Tech House provided clear insights into camera quality, performance, and more. Users could easily grasp the information they needed to make informed smartphone purchases.
Problem
Rich overwhelming websites that are content heavy and too technical to understand easily.
Solution
Design a user-friendly website providing easily understandable smartphone information.
Website
User Friendly Interface
Visually Appealing Design
Simple and Easy Information
Comparisons & Reviews
Key Features of Smartphones
Mobile Responsiveness
Overview
A long time ago, I was the go-to friend for mobile technology advice. With my knowledge of the latest iPhones, Galaxies, HTCs, and Xperias, I loved helping my friends find the perfect phone within their budget. However, they struggled to understand technical details when I recommended websites for information.
This inspired me to design a user-friendly website providing easily understandable smartphone information. Mobile Tech House emerged as a plain and simple website bridging the gap between smartphone enthusiasts and individuals seeking practical information.
The goal was to present smartphone details concisely, without overwhelming users with technical jargon. Mobile Tech House provided clear insights into camera quality, performance, and more. Users could easily grasp the information they needed to make informed smartphone purchases.
Problem
Rich overwhelming websites that are content heavy and too technical to understand easily.
Solution
Design a user-friendly website providing easily understandable smartphone information.
Website
User Friendly Interface
Visually Appealing Design
Simple and Easy Information
Comparisons & Reviews
Key Features of Smartphones
Mobile Responsiveness
Directly see the final website design
If you want to directly see the final prototype then here you go.
Directly see the final website design
If you want to directly see the final prototype then here you go.
Directly see the final website design
If you want to directly see the final prototype then here you go.
Design Process
While I followed the design thinking process, I didn't stick to a strict plan. Instead, I took notes on existing solutions, both good and bad examples of how things look on screens, just to get my creative ideas flowing. This helped me brainstorm different ways to overcome challenges I might encounter and explore solutions that worked well for similar problems in the past.
Even though I felt confident in my design choices, I made sure to do more research and gather feedback from users to validate my decisions. This helped me improve and refine my work based on real insights. I also had an agile mindset, which means I was open to continue making things better.
While I followed the design thinking process, I didn't stick to a strict plan. Instead, I took notes on existing solutions, both good and bad examples of how things look on screens, just to get my creative ideas flowing. This helped me brainstorm different ways to overcome challenges I might encounter and explore solutions that worked well for similar problems in the past.
Even though I felt confident in my design choices, I made sure to do more research and gather feedback from users to validate my decisions. This helped me improve and refine my work based on real insights. I also had an agile mindset, which means I was open to continue making things better.
1. Research
2. Define
3. Ideate
4. Build & Test
5. Design
Research
To gain insights into users' experiences and identify areas for improvement, I conducted 5 unmoderated interviews. Through these interviews, I aimed to understand users' challenges with existing websites and validate the need for our solution. To ensure a smooth process, I provided participants with a document guiding them in answering the questions and sharing their thoughts effectively. I had two primary goals from these interview sessions.
Understand the limitations and issues of the current experience
Validate our idea and need for creating an app
I conducted an unmoderated study involving 5 participants from my friends and family across different age groups (15-45). Two of them were tech-savvy and three were not.
To gain insights into users' experiences and identify areas for improvement, I conducted 5 unmoderated interviews. Through these interviews, I aimed to understand users' challenges with existing websites and validate the need for our solution. To ensure a smooth process, I provided participants with a document guiding them in answering the questions and sharing their thoughts effectively. I had two primary goals from these interview sessions.
Understand the limitations and issues of the current experience
Validate our idea and need for creating an app
I conducted an unmoderated study involving 5 participants from my friends and family across different age groups (15-45). Two of them were tech-savvy and three were not.
80% of people thought visuals and content makes the experience overwhelming.
80% of people thought visuals and content makes the experience overwhelming.
The insight highlighted the importance of a more simple visual design and understandable content hierarchy.
The insight highlighted the importance of a more simple visual design and understandable content hierarchy.
60% of people had reservations on the credibility of the reviewers of smartphones.
60% of people had reservations on the credibility of the reviewers of smartphones.
Most people were not sure if the reviewer was providing credible information or if the reviewer can be trusted.
Most people were not sure if the reviewer was providing credible information or if the reviewer can be trusted.
100% of people shared that they had a hard time applying advance searching.
100% of people shared that they had a hard time applying advance searching.
Everyone had a hard time applying filters, this insight highlights the importance of understandable search filters.
Everyone had a hard time applying filters, this insight highlights the importance of understandable search filters.
Competitive Audit
After analyzing various websites that provide information on mobile phones, I made observations regarding their visual design, content structure, hierarchy, and navigation. While there were many websites to explore, a few stood out for their well-executed overall design, informative content, and visual appeal. However, most of them tended to overwhelm users with excessive information.
During this process, I took detailed notes to identify effective elements that contribute to a positive user experience. By assessing different websites, I aimed to gain insights and inspiration for the design of our own platform. It was important to strike a balance between providing valuable information and avoiding an overwhelming user interface.
After analyzing various websites that provide information on mobile phones, I made observations regarding their visual design, content structure, hierarchy, and navigation. While there were many websites to explore, a few stood out for their well-executed overall design, informative content, and visual appeal. However, most of them tended to overwhelm users with excessive information.
During this process, I took detailed notes to identify effective elements that contribute to a positive user experience. By assessing different websites, I aimed to gain insights and inspiration for the design of our own platform. It was important to strike a balance between providing valuable information and avoiding an overwhelming user interface.
Define
After confirming the viability of the idea and understanding what users want, I began outlining our app's goals by focusing on the following:
Clearly defining the intended users for whom we will design the app.
Planning how to organize and present the content in a logical and easy-to-understand way.
Creating a list of features to include in the app based on our previous research.
Visualizing different design options and prioritizing the user experience to ensure a seamless and enjoyable journey for our users.
After confirming the viability of the idea and understanding what users want, I began outlining our app's goals by focusing on the following:
Clearly defining the intended users for whom we will design the app.
Planning how to organize and present the content in a logical and easy-to-understand way.
Creating a list of features to include in the app based on our previous research.
Visualizing different design options and prioritizing the user experience to ensure a seamless and enjoyable journey for our users.
User Personas
To ensure that our solution caters to the needs of typical users, I created two personas representing the target audience seeking a new smartphone for work and productivity purposes. These personas reflected the characteristics and preferences of regular users, allowing us to design the MVP flow accordingly.
I aim to develop a user flow for the MVP design by considering these personas. The flow aims to guide users through the website, providing the necessary information to make informed decisions about their smartphone purchases.
To ensure that our solution caters to the needs of typical users, I created two personas representing the target audience seeking a new smartphone for work and productivity purposes. These personas reflected the characteristics and preferences of regular users, allowing us to design the MVP flow accordingly.
I aim to develop a user flow for the MVP design by considering these personas. The flow aims to guide users through the website, providing the necessary information to make informed decisions about their smartphone purchases.
Feature Prioritization
Based on the previous research, the key flow for the MVP design of the app is going to be the smartphone specifications viewing flow.
Based on the previous research, the key flow for the MVP design of the app is going to be the smartphone specifications viewing flow.
Ideate
After establishing the prioritized flow for the MVP design, I began by mapping out the entire website. This involved creating a visual representation of the site and outlining possible navigation and structure.
Once the site map was complete, I swiftly moved on to crafting paper wireframes. These rough sketches allowed me to explore different layout ideas and visualize how the site could be structured. Using these initial wireframes as a starting point, I proceeded to refine the design and create a cohesive flow.
Confident with my design choices, I then translated the paper wireframes into digital versions. During this process, I enhanced the UI elements, refined the layout, and optimized the content structure to improve user experience.
After establishing the prioritized flow for the MVP design, I began by mapping out the entire website. This involved creating a visual representation of the site and outlining possible navigation and structure.
Once the site map was complete, I swiftly moved on to crafting paper wireframes. These rough sketches allowed me to explore different layout ideas and visualize how the site could be structured. Using these initial wireframes as a starting point, I proceeded to refine the design and create a cohesive flow.
Confident with my design choices, I then translated the paper wireframes into digital versions. During this process, I enhanced the UI elements, refined the layout, and optimized the content structure to improve user experience.
Site Map
Paper Wireframes
Digital Wireframes
Build & Test
Using the low-fidelity wireframes as a starting point, I proceeded to create a functional prototype in Figma. I then shared this prototype with participants to conduct a usability test. The feedback received during these tests proved invaluable in identifying pain points, usability gaps, interface improvements, and overall design enhancements.
The primary goals of the usability test were to assess how easily users could search for and select a phone while viewing its specifications. Additionally, we wanted to evaluate the ease of comparing two phones and gauge user satisfaction with the reviews provided by verified reviewers.
By analyzing the feedback and insights gathered from the participants, I was able to refine the prototype further. This iterative process allowed me to make necessary adjustments and improvements to enhance the user experience.
Using the low-fidelity wireframes as a starting point, I proceeded to create a functional prototype in Figma. I then shared this prototype with participants to conduct a usability test. The feedback received during these tests proved invaluable in identifying pain points, usability gaps, interface improvements, and overall design enhancements.
The primary goals of the usability test were to assess how easily users could search for and select a phone while viewing its specifications. Additionally, we wanted to evaluate the ease of comparing two phones and gauge user satisfaction with the reviews provided by verified reviewers.
By analyzing the feedback and insights gathered from the participants, I was able to refine the prototype further. This iterative process allowed me to make necessary adjustments and improvements to enhance the user experience.
User testing
The summarized insights from user testing were:
Users need better searching options and appropriate filter interactions.
Users need a more definitive visual to differentiate between compare and specifications pages.
Users need complete information about the review such as the date and reviewer.
The summarized insights from user testing were:
Users need better searching options and appropriate filter interactions.
Users need a more definitive visual to differentiate between compare and specifications pages.
Users need complete information about the review such as the date and reviewer.
3/5 Users could were not able to search for a phone from the home page and were confused where they could start to search.
This insight highlighted how a search bar on the home page could help facilitate user searching and connect the homepage with the phone finder page.
This insight highlighted how a search bar on the home page could help facilitate user searching and connect the homepage with the phone finder page.
4/5 Users were able to compare two phones
3/5 Users satisfied with reviews from a trusted source and liked how there was a pros and cons section
These insights highlighted the importance of adding search functionality on the home page, having visual difference in specifications and compare pages. Also highlighting the missing detail of the reviewer in review page.
These insights highlighted the importance of adding search functionality on the home page, having visual difference in specifications and compare pages. Also highlighting the missing detail of the reviewer in review page.
Design
After receiving validation from user testing and gaining valuable insights from the usability study on the low-fidelity prototype, I proceeded to develop the user interface for the website.
To begin, I focused on creating essential navigation components, such as a navbar and footer, to establish a clear and consistent navigation system. Once these foundational components were in place, I gradually built other UI elements and added them to the sticker sheet.
With a set of basic UI components at my disposal, I began refining the website pages, incorporating the created UI elements. This step allowed me to ensure visual consistency and maintain a cohesive design throughout the website.
After receiving validation from user testing and gaining valuable insights from the usability study on the low-fidelity prototype, I proceeded to develop the user interface for the website.
To begin, I focused on creating essential navigation components, such as a navbar and footer, to establish a clear and consistent navigation system. Once these foundational components were in place, I gradually built other UI elements and added them to the sticker sheet.
With a set of basic UI components at my disposal, I began refining the website pages, incorporating the created UI elements. This step allowed me to ensure visual consistency and maintain a cohesive design throughout the website.
Smartphone Specification Viewing Flow
By consistently working on the designs, I completed the core flow of smartphone specifications viewing flow.
By consistently working on the designs, I completed the core flow of smartphone specifications viewing flow.
Responsiveness
While the main focus was on web design, I also developed responsive designs specifically for the smartphone specifications viewing flow.
While the main focus was on web design, I also developed responsive designs specifically for the smartphone specifications viewing flow.
Results, Learnings & Next Steps
I accomplished the MVP design of the website by designing the complete flow of smartphone specification viewing. This involved creating a simple user experience that allowed users to easily navigate through the website, and view a smartphone's specifications, reviews, and camera results.
During the website design phase, I discovered that initial ideas are just the starting point of the creative process. Iterations were influenced by usability studies and feedback from peers, allowing for continuous improvement. I also explored creating a sticker sheet for reusable components to enhance consistency across the website.
Moving forward, my plan includes conducting another round of usability studies to further refine the UI and interaction design. Additionally, I will conduct further research to identify new areas of need and potential enhancements for the app.
I accomplished the MVP design of the website by designing the complete flow of smartphone specification viewing. This involved creating a simple user experience that allowed users to easily navigate through the website, and view a smartphone's specifications, reviews, and camera results.
During the website design phase, I discovered that initial ideas are just the starting point of the creative process. Iterations were influenced by usability studies and feedback from peers, allowing for continuous improvement. I also explored creating a sticker sheet for reusable components to enhance consistency across the website.
Moving forward, my plan includes conducting another round of usability studies to further refine the UI and interaction design. Additionally, I will conduct further research to identify new areas of need and potential enhancements for the app.
THE END
Thankyou 🙏🏻
I appreciate your time and attention, I hope you have liked the work. Want to share your thoughts?
I appreciate your time and attention, I hope you have liked the work. Want to share your thoughts?
