This academic project was a mobile web from which users can search, customize and purchase different types of headphones depending on their desired activity such as exercising, studying, streaming services, etc.
This mobile web provides headphone suggestions for users depending on their needs.
framework
Surveys were conducted to gather data regarding people’s general views about headphones. Some of the findings included pain points when buying new headphones, importance of quality and material, as well as activities for which people used headphones throughout their day.
- Data from approximately 100 participants was gathered.
1:1 Interviews functioned as a data gathering system that allowed me to write down competitive research ideas and design ideas for how to develop the mobile web’s experience and overall interface.
Findings:
- Most people would buy a second pair of headphones for a different activity such as exercising or running outside.
- Most people prioritize sound and material quality.
- Most people are willing to spend more than $100 for a new pair of headphones.
- Most people would purchase headphones through the mobile web in order to get a one month free Spotify membership.
Different mobile webs as well as other competitor sites were audited and inspected to find out what UX aspects and UI elements make such sites function in a way that is appealing to their users.
- Competitive sites such as Headphones.com, as well as other non-competitor sites were analyzed for inspiration such as tesla.com, amazon.com, glassesusa.com and Flipboard. Different elements stood out such as hero images, shopping carts, customer rating systems, bottom navigation bars, and many others.
Based on survey and research results, a persona was created in order to create a clear vision of what the final product would be capable of. This persona also served as a blueprint of different ways in which the product could be created.
During this phase, we took our research and created a clear vision of the problems that need to be solved as well as different ways to make our end product functional and user-friendly.
One way to keep us focused on our end user is by creating a fictional user persona that feels as close to a real potential user as possible.
- User flow for buying small wireless headphones for running.
Sketches were the first attempt to create a visual illustration of how different pages would look such as the homepage, category page, and product description pages (PDP).
Multiple wireframe iterations were created and each new version came to fruition because of user testing and feedback.
- Versions 1 - 4 for the Product Description Page (PDP), shown from left to right respectively.
- Hick's Law of UX
- According to Hick’s law of UX, the time it takes to make a decision increases with the number and complexity of choices; hence the simplified version of the color selection feature.
The purpose of the Mood Board was to create a holistic visual representation of how the mobile web would look and feel.
According to color theory, analogous colors create a serene and comfortable feeling; hence the selection of different shades of blue as well as the futuristic approach and overall mood.
- According to the UX law of Aesthetic Usability Effect, users often perceive aesthetically pleasing designs as more usable. The idea here is to make the app feel welcoming and easy on the eye.
After many wireframe iterations and user testing sessions, multiple mockups were created for all pages.
The Style Guide / Design System was created to demonstrate how different elements come to life within the mobile web. This system is a great tool for Web Developers when we reach the development stages because it is a guide for them to know what UI elements belong together, their function and purpose, certain measurements, and more.
Prototypes were used for additional testing and navigation demonstrations. Certain goals and task flows were tested such as finding a pair of headphones specifically for exercising:
- Fitt's Law of UX
- -According to Fitt’s Law, the time to acquire a target is a function of the distance to and size of the target; hence the size of the bottom nav and primary call to action button (CTA) on the product description page (PDP).
- Heuristics: User Control and Freedom
- Users should have control and be able to navigate freely even when mistakes are made or undesired actions need to be undone, hence a clear way to add and remove items from the cart.
Changes and iterations were repeatedly made throughout the project. Such iterations came from UX / UI research, revisiting survey results, persona analysis and most importantly user testing sessions as seen below.
- Users testing the ability to select items and add them to the shopping cart.
Annotations serve as a detailed map with indications for the Web Development team. These are specifically created to let them know about each UI element’s purpose, and its mission within the mobile web.
- Every annotation forms part of a methodical and syncopated system with the sole purpose of exceeding the mobile web’s key performance indicators (KPI’s) and increasing conversions and revenue.
