Project Overview
Amoeba Music, an iconic independent record store founded in 1990, has built a reputation as a haven for music lovers in Berkeley, San Francisco, and Hollywood. Despite its strong brand presence, its online storefront struggled to deliver a seamless and intuitive shopping experience.
This case study explores my approach to redesigning Amoeba’s website, balancing the store’s nostalgic appeal with modern usability and e-commerce best practices. Through extensive user research, usability testing, and iterative design, I worked to enhance search functionality, product discoverability, and overall site navigation to better serve both longtime customers and new visitors.
Tools: Figma, FigJam, Photoshop, Illustrator, Optimal Workshop, Pen & Paper
Timeline: Three-week sprint
My Role
UX Research & Strategy
UX & UI Design
Usability Testing & Iteration
Responsibilities:
Conducted competitive analysis, heuristic evaluations, and user interviews to identify usability challenges.
Developed wireframes, prototypes, and high-fidelity designs to modernize the interface while preserving Amoeba’s brand aesthetic.
Facilitated user testing to validate design decisions and refine key interactions based on real feedback.
Understanding the Problem
Despite Amoeba Music’s strong brand identity and loyal customer base, its website struggled with discoverability, usability, and visual appeal. Customers looking to browse or buy physical media online often found the experience frustrating.
Usability Study: Identifying Key Issues
Before diving into design solutions, I conducted usability studies to uncover the most pressing challenges users faced on Amoeba Music’s website.
Key Insights from Usability Testing:
Interface Elements
Users found the search bar too small, making it difficult to locate and use.
Layout Overload
The crowded and cluttered layout created a sense of overwhelm, making navigation difficult.
Aesthetic Appeal & Trust
The outdated design raised credibility concerns, with users questioning whether the website was secure and reliable for online purchases.
Checkout Confusion
The cart and checkout process lacked clarity, leading to hesitation and abandoned purchases.
These findings highlighted the need for improved navigation, a more modern UI, and a streamlined purchase flow to enhance the user experience.
Heuristic Evaluation
To further evaluate the functionality and structure of the existing website, I conducted a heuristic evaluation based on Jakob Nielsen’s usability principles. This revealed specific areas where the design failed to meet best practices.
Key Heuristic Opportunities:
Navigation & Terminology (Match Between System & Real World)
The "What’s in My Bag?" link was unclear, leading to confusion about its purpose. The name did not align with user expectations, making it harder to understand at a glance.
Shopping Cart Overlay (User Control & Freedom)
A disruptive overlay appeared whenever users added items to their cart, interrupting the browsing flow and restricting user control. This led to frustration and task abandonment.
Filtering & Sorting (Flexibility & Efficiency of Use)
Users struggled to refine search results due to missing or outdated filtering options. The system lacked intuitive ways to sort products, forcing users to rely on inefficient manual browsing.
How This Informed Design
✔ Renamed ambiguous menu items to align with user expectations.
✔ Removed intrusive cart overlays to ensure a smoother shopping flow.
✔ Enhanced filtering and sorting functionality for a more efficient browsing experience.
✔ Modernized the UI to improve trust and usability.
✔ Optimized search prominence and interaction for better accessibility.
Competitive & Comparative Research
To position Amoeba Music’s online experience competitively while preserving its identity, I conducted a competitive and comparative analysis. This helped uncover industry best practices, highlight where Amoeba lagged behind, and reveal opportunities for improvement.
Direct Competitors: Independent Record Stores with Online Shops
Rasputin Music, Rough Trade, Bull Moose, and Vintage Vinyl cater to physical media enthusiasts, offering a mix of new, used, and rare music collections.
Indirect Competitors: Digital Music & Streaming Platforms
While not direct rivals in physical media sales, Spotify, Apple Music, Amazon Music, and Bandcamp shape how users discover music and set expectations for modern browsing experiences.
Key Takeaways from Competitors:
Curation Drives Engagement
Rough Trade’s editorial approach fosters trust. Amoeba could strengthen its “Music We Like” section to improve music discovery.
Affordability & Accessibility Matter
Rasputin & Bull Moose emphasize transparent pricing and deals. Amoeba needed clearer promotions and a more intuitive shopping flow.
Nostalgia is a Selling Point
Vintage Vinyl’s success proves collectors seek exclusivity. Amoeba’s brand already evokes nostalgia, but its online experience needed to reflect that better.
Users Expect Personalization
Streaming platforms condition users to expect recommendations. Amoeba could refine “Music We Like” for better curation.
Seamless Shopping is Key
Amazon removes friction from the buying process. Amoeba’s checkout flow needed a modern overhaul.
Stronger Artist-Fan Connection
Bandcamp thrives by highlighting indie artists. Amoeba could do the same by showcasing independent & local releases better.
How This Informed Design
✔ Refined product discovery – Strengthened Amoeba’s curation model to improve exploration.
✔ Optimized shopping flow – Streamlined checkout & navigation for better usability.
✔ Balanced nostalgia & usability – Modernized the UX while preserving Amoeba’s vintage aesthetic.
Feature Inventory: Aligning with Industry Standards
Through user interviews and heuristic evaluations, I identified several usability gaps in Amoeba’s website. To benchmark expectations, I analyzed common features across competing music retailers and evaluated where Amoeba could improve.
Key Features That Needed Optimization:
Clear “Add to Cart” Functionality
Users expect straightforward labeling for purchases. Amoeba’s “BUY” button was misleading, with some mistaking it for a one-click purchase (like Amazon’s “Buy Now”).
💡 Solution: Renamed it to “Add to Cart” with a shopping cart icon for clarity.
Robust Sorting & Filtering Options
Competitor sites offer layered filtering, letting users refine searches by genre, format, release date, and availability. Amoeba’s filters were outdated, missing key genres like Pop and R&B, and lacked intuitive sorting.
💡 Solution: Expanded genre categories and refined filtering options for better browsing.
Enhanced Browsing Experience
Most competitors default to a thumbnail grid, making browsing more visual. Amoeba’s text-heavy results and cluttered layout made album discovery less engaging.
💡 Solution: Shifted to a thumbnail-first approach for a modernized catalog.
How This Informed Design
✔ Updated UI language – Renamed buttons for clearer intent (“BUY” → “Add to Cart”).
✔ Improved filtering system – Expanded categories and introduced better sorting controls.
✔ Revamped browsing experience – Adopted a visual grid for easier album discovery.
Final Thoughts
By integrating best practices from competitors, I ensured Amoeba Music’s redesign stayed true to its roots while offering a modern, user-friendly experience. These refinements not only improved usability but also strengthened the brand’s nostalgic appeal in a digital space.
Synthesizing Research into Design
With insights from user interviews, heuristic evaluations, and competitive analysis, I synthesized findings to define key pain points and inform design solutions. This process involved affinity mapping, persona development, and journey mapping, ensuring that design decisions directly addressed user needs.
Affinity Mapping: Identifying Patterns
To extract meaningful insights, I categorized raw interview data into key behavioral patterns, pain points, goals, and needs. To maintain a holistic, unbiased approach, I grouped user-interface data separately from general shopping behaviors.
Highlighted User Insights:
🔹 Users prioritize efficiency – They want to quickly locate and buy a specific product without unnecessary steps.
🔹 Search reliability is critical – A poor search experience discourages purchases and creates frustration.
🔹 Payment flexibility matters – Users expect one-tap options like Apple Pay or PayPal.
🔹 Browsing is secondary – Unlike in-store shopping, online users prefer direct search over casual browsing.
Key User Statements ("I Statements")
To ensure that design choices aligned with real user needs, I distilled findings into four core "I Statements" representing the most common user mindsets:
✔ "I want to go directly to the product I have in mind and buy it."
✔ "I dislike when my shopping is interrupted or prolonged."
✔ "I am influenced by and enjoy product recommendations—if they’re accurate."
✔ "I strongly prefer features that expedite online shopping."
User Persona
Based on research insights, I developed a user persona to represent the diverse user base. Let me introduce you to Ethan:
Ethan Basrawi
Scientist | San Francisco, CA, USA
“The ease of having the intention to buy something and getting it very quickly is nice.”
Behaviors:
Listens to favorite albums on vinyl puts him in a good mood.
Buys physical media because certain titles have extra sentimental value.
Goals:
Locate and purchase what he has in mind as quickly and efficiently.
Get accurate recommendations for music he’d want to purchase in the future.
Needs:
Find good deals then have a secure and quick checkout process online.
Use an intuitive search function and organized catalogue.
Pains:
Wastes trips to local stores when inventory is wrong or missing online.
Encounters major issues with organization both in-store and online when shopping locally.
Journey Map
To further define opportunities for improvement, I mapped out a prospective user journey, outlining key interactions, emotions, and friction points.
Text-Based & Accessible Journey Map
USER EXPECTATIONS
✅ The website loads successfully
✅ There is an efficient search feature
✅ Can make the purchase securely
TOUCH POINTS
Key:
A = Action
T = Thoughts
F = Feelings
E = Emotions
Step 1: Visit Website
A Launch browser; Go to amoeba.com
T I know exactly what I want; I hope it’s easy to find
F It seems the site got a face lift; I am curious how it responds
E 🧐
Step 2: Find Desired Album
A Locates search bar; Enters in desired album key search terms
T "The site navigated me right to the album I wanted, it just knew"
F "That was quite refreshing; I usually have a harder time with this search"
E 😲
Step 3: Read Reviews
A Looks at the ratings on the album; Skims a few reviews
T "I am curious if others have mentioned anything about the quality of the vinyl"
F "I feel way more confident in my decision to purchase this album based on these reviews"
E 😌
Step 4: Complete Purchase
A The vinyl is in stock and allows to be added to cart
T "They finally added Apple Pay and PayPal"
F "I am relieved I can go back to shopping locally"
E 🤩
Addressing Key Opportunities:
Refined thumbnail layouts to reduce visual clutter while maintaining rich album details.
Renamed ambiguous categories like "Music We Like" to "Amoeba Recommended" or "Staff Picks" for better clarity.
How This Informed Design
✔ Streamlined search & navigation – Prioritized fast, accurate search results.
✔ Reduced shopping friction – Simplified checkout & inventory display.
✔ Enhanced product discovery – Improved curation & recommendation algorithms.
By synthesizing research findings into clear, user-driven insights, I laid the groundwork for a targeted, user-centric redesign that would make Amoeba’s digital shopping experience as enjoyable as visiting their stores in person.
Laying the Foundation: From Sketches to Structure
With clear insights from research and usability studies, I transitioned into the design phase. The goal was to create a modern, user-friendly online storefront that preserved Amoeba’s nostalgic charm while improving searchability, browsing, and checkout efficiency.
Sketching & Ideation
To kick off the design process, I sketched several homepage concepts focused on streamlining product discovery. Research findings made it clear that most users knew exactly what they wanted before visiting the site, making an efficient search experience the top priority.
Key priorities in early sketches:
✔️ A prominent, high-visibility search bar for instant product access.
✔️ A decluttered homepage that reduced cognitive load and visual noise.
✔️ A modernized browsing experience, leveraging intuitive sorting & filtering.
These sketches helped me explore different layout possibilities while ensuring that Amoeba’s brand identity remained intact.
Low & Mid-Fidelity Wireframes
Once I refined the initial sketches, I translated them into low-fidelity wireframes in Figma. The focus was on defining the core user flows, search interactions, and product discovery experience before adding visual details.
Early wireframe objectives:
✔️ Reworked homepage with a cleaner, search-driven interface.
✔️ Grid-based browsing layout for better visual organization.
✔️ Revamped filtering system with updated genre categories.
After gathering feedback on the low-fidelity wireframes, I built mid-fidelity wireframes to refine the layout, test user interactions, and prepare for usability testing.
Bringing It to Life: Interactive Prototyping & Refinement
To test the usability of the new design, I created an interactive prototype in Figma. This allowed me to simulate key interactions and gather feedback before committing to high-fidelity visuals.
Key improvements tested in the prototype:
✔️ A frictionless search experience, making it effortless to find albums.
✔️ More intuitive cart & checkout flow, reducing abandoned purchases.
✔️ Better-defined call-to-action buttons, improving user navigation.
Finding That "Modernized Nostalgia" Look
After completing the wireframes and testing the initial prototype, I tackled the challenge of crafting a visual style that captured Amoeba Music’s retro, eclectic energy while modernizing its digital presence. Drawing inspiration from competitor research and the vibrant colors of Amoeba’s iconic logo, I refined the interface to strike a balance between nostalgia and contemporary usability.
Through three informal user studies and feedback from fellow designers, I gathered key insights that informed the final design adjustments, ensuring the prototype resonated with both longtime Amoeba fans and new users.
Feedback-Driven Refinements
Usability testing validated many of my design decisions but also revealed areas that needed adjustment.
Insights from usability testing:
✔️ Search bar placement mattered—users wanted it centered and highly visible.
✔️ Overuse of retro design elements felt dated—needed a balance of modern & nostalgic.
✔️ Cart interactions needed more clarity—adjustments improved checkout flow.
Based on these findings, I iterated on the visual style, cart interactions, and UI refinements, ensuring that the final design felt intuitive, engaging, and brand-authentic.
How This Informed Design
✔️ Prioritized search-first navigation, aligning with user behaviors.
✔️ Improved product discoverability, using enhanced sorting & filtering.
✔️ Balanced modern UI improvements with Amoeba’s classic branding.
By combining research insights with iterative testing, I delivered a revitalized online shopping experience that honored Amoeba Music’s legacy while optimizing usability.
Final Prototype & Key Enhancements
After multiple iterations and usability feedback, I refined the prototype to ensure a streamlined and engaging shopping experience while preserving Amoeba Music’s distinctive aesthetic.
The Final Design Introduced
✔ A high-visibility search bar, making it easier for users to find specific albums quickly.
✔ A refined browsing experience, implementing grid-based layouts with improved sorting and filtering options.
✔ Clearer purchasing interactions, updating ambiguous "BUY" buttons to “Add to Cart” for better clarity.
✔ A visually engaging UI, balancing Amoeba's retro charm with a modernized digital presence.
This final iteration captures the nostalgia and energy of Amoeba Music while delivering a smoother and more intuitive e-commerce experience. The prototype demonstrates how the redesign improves usability, discoverability, and trust.
Interactive Prototype
Please enjoy the prototype below to see the solution in action.
Click here to request a copy of the Figma file.
Note: The prototype works best in full screen mode; active elements can be identified by clicking anywhere on the screen to reveal blue highlight boxes.
Using this prototype, you can see the user task flow in action by:
1️⃣ Clicking "Shop", "Music" from the home page
2️⃣ Click the album "Born to Die" to view album details
3️⃣ Read reviews
4️⃣ Browse album art
5️⃣ Add the album to your cart
This prototype was designed for desktop view and cannot be viewed from a mobile device. Please visit this page on a computer or a device with a larger screen.