EchoSphere
A concept, mobile-first, e-commerce platform for high-end audio products
Role: Lead Product Designer / UX Designer & Researcher / Brand Designer
Tools: Figma, FigJam, Miro
Project Overview
The Brief:
The EchoSphere project focused on designing a mobile e-commerce website for a premium speaker company. Our ideal customer, based on the provided brief, is Gretchen—a woman in her early 40s living in the U.S. with her partner. She works part-time, has never purchased a similar product, and often relies on influencer recommendations for buying decisions. This guided the design approach to be intuitive, engaging, and visually appealing to new users unfamiliar with high-end audio products.
Wireframing Process
The initial phase involved creating low-fidelity wireframes in Figma to map out the user journey from the homepage to the checkout. The focus was on minimal navigation friction, ensuring users could easily browse, select products, and complete purchases. Key wireframes included product detail pages, order summary, shipping, and payment sections.
Usability Testing & Insights
After developing the initial prototype, I conducted usability testing with three participants representing a range of demographics and user behaviors. The goal was to evaluate how well the design met the needs of both new and experienced online shoppers—particularly those unfamiliar with premium tech products.
Each participant was given key tasks such as browsing products, adding items to the cart, and completing a checkout. Observations and post-task interviews helped identify usability issues, accessibility concerns, and opportunities for refinement. The feedback from these sessions played a critical role in shaping the next iteration of the prototype and ensured the design remained user-centered and inclusive.
Participants included:
• Sharon (70, Single Woman): Sharon highlighted that the product pages lacked clear “Add to Cart” buttons, making the purchasing process confusing. She also suggested larger font sizes and more contrast for better readability.
• Jake (28, Tech-Savvy Professional): Jake appreciated the modern aesthetic but pointed out that the checkout process felt a bit slow. He recommended adding a quick-pay feature and streamlining the address input fields.
• Maria (35, Busy Mom): Maria loved the vibrant design but found the navigation menu slightly hidden. She suggested making the menu icon more prominent and adding “Individual Product Pages” to feature each speaker in detail. Color Palette, Typography, and Logo Design:
Brand Identity
The color palette was inspired by the dynamic and immersive sound experience EchoSphere promises—warm oranges and reds paired with cool teals and blacks create a balance of energy and sophistication. For typography, the logo font “Orbitron” was chosen for its futuristic feel, while “Instrument Sans” served as the secondary font for its readability and clean lines.
The EchoSphere logo, created in Illustrator, features a sleek, geometric design with modern, abstract shapes that symbolize sound waves and connectivity, reflecting the brand’s innovative approach to audio technology. Prototyping & Iteration:
Using Figma, I developed an interactive prototype that incorporated user feedback from initial testing. The “Add to Cart” buttons were made more prominent, the checkout flow was optimized with quick-pay options, and the navigation menu was adjusted for better visibility. Multiple iterations were tested to ensure a seamless user experience.
Final Design
The final product is a sleek, mobile-optimized e-commerce site that balances bold aesthetics with functionality. The vibrant gradients and clean typography reflect EchoSphere’s modern brand identity, while intuitive navigation ensures a smooth shopping experience. User feedback was integral to refining the design, resulting in a visually appealing and user-friendly interface that caters to both new and experienced online shoppers.
Personal Reflection
Working on EchoSphere challenged me to think holistically about how visual design, user flow, and branding come together in a mobile e-commerce experience. While I had experience with wireframing and prototyping, this project pushed me to refine those skills under tight deadlines, balancing creative decisions with practical user needs.
Conducting user testing reinforced how small oversights—like a hidden navigation menu or unclear call-to-action—can create friction, especially for older users or those less familiar with tech.
Additionally, I gained deeper insight into how brand identity—through color, typography, and tone—can influence the emotional tone of an experience. EchoSphere helped me grow not just as a designer, but as a problem-solver, learning to adapt, iterate quickly, and advocate for choices grounded in both research and creativity.