Role: Lead Product Designer/UX Designer & Researcher/Brand Designer
Tools: Figma, Adobe Illustrator, Adobe Photoshop
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.
User Testing & Personas:
- 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:
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.
This project not only enhanced my skills in wireframing, prototyping, and user testing but also deepened my understanding of creating designs that align with brand identity and user needs.
SableLux Design 