Gazza Speakers: The Sound of Luxury.
E-commerce | User Research & Responsive web app
Overview
Project Context: Gazza Speakers is an e-commerce responsive app for specialized speakers with a minimalistic approach created in one month in December 2022 for Daniel Scott’s course called Figma UI UX Design Essentials. I took this course to develop my skills using this software.
Role: UX & UI Designer
Design Process: Design Thinking
Discovery - Context, Problem Statement and User Research (Competitor Analysis, Surveys, A/B Tests and Interviews)
Conceptualization - User Persona, Task Flow, Lo-Fi and Mid-Fi Wireframes and Prototype
Interaction - Hi-Fi Wireframes and Prototypes
. Exposition - Design Language System, Final Wireframes, Conclusion & Next Steps, and Prototypes
Discovery
Context
This course is focused on User Interface (UI) Design using Figma, applying the Design Thinking process to teach how to create visually stunning interfaces and engaging prototypes that meet client needs. It also focuses on user perspectives and industry trends through thorough User Research, helping to craft designs that truly resonate. It starts with creating a project brief through the Random Project Generator website. Inputting my pet's name and former city, I received a brief to kick off my work.
Problem Statement
Sofia needs a way to listen to music, news, podcasts and movies at home while working, studying or for leisure. Also, she likes to be up-to-date on fashion and trends. She will be happy with a solution that allows her to use it in many ways. It also must be aesthetically pleasing to her, as it will make her enjoy using the solution even more daily.
User Research: Competitor Analysis
With that briefing in mind, I realized my next steps would involve gaining a deeper understanding of the product and its intended users, as well as identifying the most significant problem to address.
For the Competitor Analysis, I researched over 20 distinct websites retailing speakers. These encompassed a range of platforms, including Davone, Bose, Sonos, B&W and KEF, searching for quality aesthetic relevance.
Business Requirements
The research highlighted a few key strategies. To succeed, we should focus on offering a variety of speakers with modern designs and features that attract budget-conscious buyers. Using innovative tech and materials to deliver quality sound at competitive prices is crucial, along with building a strong, reliable brand, by prioritizing style and customer value.
User Research: Surveys & A/B Test
I conducted surveys and preference tests with 23 women aged 35 to 45 to better understand potential users. The goal was to explore the right tone, aesthetic preferences for the product, and brand style. The tests identified the most favoured aesthetics, leading to the creation of a mood board.
Keywords: Minimal, Natural Wood, Family, Workspace, Light Tones, Leisure, Daylight, Elegant, Calm.
User Research: Interviews
I additionally conducted interviews with 6 participants to gather insights into their daily needs, challenges, user goals, and product-related desires. This process was chosen to refine the design solution effectively. Employing a script consisting of five open-ended questions, the interviews provided valuable data that facilitated the development of a user persona and the formulation of a comprehensive problem statement.
Quotes
2. Conceptualization
User Persona
Sophia was created to stay in my mind throughout the project, helping me better understand which flows and features would be most appropriate to her. The user persona is also extremely helpful in aligning product decisions with all stakeholders, from development to sales. The problem statement was specifically created with her in mind.
Task Flow
The course material was focused on the main action of the app, as follows:
Homepage/Marketing Page
Product Features
Checkout
Confirmation
These are the main screens developed, along with those necessary for the MVP.
Lo-Fi Wireframes & Prototype
The next step involved commencing the initial wireframing for the proposed solution. This phase entailed the creation of screens for the task flow. Particular emphasis was placed on mastering fundamental functions such as grids, spacing, icon generation, and basic layout.
Home, Product Features, Check out & Confirmation Lo_Fi Wireframes (click to access the prototype).
3. Interaction
Hi-Fi Wireframes and Prototypes
After testing the Lo-Fi prototype, I took the time to refine the wireframes by creating their user interface (UI) elements. Some key concepts from Gestalt psychology and Nielsen Norman Group (NNG) guidelines were applied to guide my design decisions. By focusing on principles like proximity and similarity, I made sure related elements were grouped correctly, which helped users navigate more easily. I also emphasized clear affordances and feedback, making it intuitive for users to understand how to interact with each element. This process not only boosted usability but also created a more engaging experience, ensuring that every interaction felt natural and straightforward.
Before & After: Home Page
Before & After: Product Features
Before & After: Check out
Before & After: Confirmation
4. Exposition
Design Language System
As the project advanced and I gained a clearer understanding of the app's structure, it was time to turn the style survey insights into action. The focus shifted to choosing sophisticated fonts, natural colours, and refined imagery that aligned with the mood board.
Introducing Gazza Speakers
Homepage
Product Features
Confirmation
Check out
Conclusions & Next Steps
Taking Daniel Scott's course was a joy. This project was especially engaging as it pushed me into new territory—an E-commerce app. Applying my research to colour schemes, fonts, and imagery was a valuable learning experience.
My challenges came from interactions I hadn't fully explored in previous projects, making it a rewarding experience. Overall, I'm satisfied with the results. As a next step, I would focus on testing the app, refining it with each iteration, and adjusting the layout based on new refinements, with different users.
Prototypes
Click to test the prototypes