Case Study: Amoeba Redesign

Project Goals

Redesign the Amoeba.com shopping experience and address the following business goals:

‣ Improve the navigation

‣ Decrease shopping cart abandonment by improving the end-to-end shopping experience.

‣ Bring more awareness to the fact that Amoeba wants to buy old records and CD’s.

Current Site

Role: UX Designer

Tools: Pen and paper, whiteboard and markers, post its, myBalsamiq, Photoshop, good ol’ Google.

Duration: 2 weeks

Research

Card Sorting

Card sorting before, during, and after

To kick the redesign off I began by addressing the hub of most of a websites navigation, the top links. I broke down the top navigation on the current site and wrote each link on post its. I then rearanged them in the way that made sense to me. I also invited some of my peers to do the same.

Takeaway: This method allowed me to take the existing links on the site and find the arrangement that was more intuitive.

Market Research

I conducted market research of some of the leading music merchant websites.

What I found was that most websites had radically different ways to feature and sell music.

During my research into the ecommerce marketplace, the notion that online shopping is going mobile kept creeping into the conversation. Based on this I decided to approach the redesign from the perspective of an iPad user.

Takeaway: This helped me find out how each site differentiated from each other and how those differences translated into metrics such as bounce rate. It also helped me gear the redesign to be more mobile-friendly.

User Research

For my user research I set out to answer questions:

1. What do people think about the current site?

2. What do people like about the Amoeba store experience?

To answer the first question, I had several of my colleagues, friends, family, and even a few strangers try to purchase an item on the site while talking aloud. During the tests I took notes and created a word cloud of my findings.

Bad, very bad

To answer question 2, I went out on the prowl, both scouring online review sites and reaching out to everyone and anyone I could get ahold of that shopped at the Amoeba store. Once again, I plugged in my notes and created a word cloud.

Good, very good

Takeaway:

People loved the in-store experience for its helpful staff, huge selection to discover new music, and cool environment.

People hated the online experience because they found it messy, confusing, unprofessional, and overwhelming.

Synthesis

Persona

Scenario

Vin loves music but he feels his collection has grown stale. He has an itch to discover new music but does not want to leave his home to do so. He would also like to get rid of the music he no longer listens to.
He loves shopping at Amoeba so turns on his iPad and visits their website. Within seconds he is hurling his iPad across the room in frustration. He finds the website too cluttered and the checkout process long and tedious. He would love to have the Amoeba experience in the comfort of his own home.

Design and Iteration

Sitemap and User Flow

Takeaway:

Site structure did not have to be complex to serve customers goal.

Wireframing and Testing

A few sketches and wireframes
Testing, testing, and more testing

Takeaway:

Testers overall enjoyed the experience. However, some elements of the site, namely the grid of album covers on the homepage were said to be confusing so they were scrapped.

Prototype

The final prototype leaned heavily on the design aesthetic of the Amoeba stores. The store’s unique environment is largely attributed to the many posters lining its wall. For the site, I tried to feature plenty of album covers to give it the aesthetic of an authentic record store like Amoeba. The overall grid of the site is based around the square shape of album covers.

Based on my user research the knowledge and recommendations of Amoeba staff kept customers engaged with the brand, I made sure to feature recommendations and Amoeba comments on product listings and result pages. Keeping with the spirit of discovery, I placed an oversize search bar in the top navigation with the words ”Find Your Muse” embedded. This falls in line with the almost spiritual connection the typical Amoeba customer such as Vin feels towards music and music discovery.

To increase awareness of their selling program, a sell button is featured prominently throughout the site. I placed a consistently yellow sell button wherever a buy button would be, to give it equal importance and stress the message to the consumer. There is also a persistent banner at the top of the site advertising the fact that Amoeba will buy music as well.

To increase checkout conversion, I condensed the entire checkout into one page to expedite the checkout process. To further expedite the process, no sign up is needed but it is featured as an optional field. To keep the user engaged and aware of their status in the checkout process, I numbered the steps and placed the final step at the top of the page in red, fully visible to a user who has just begun the checkout process.

Once checked out, the user is drawn back in to the site by an oversize keep shopping button. In my testing, users couldn't help but click it every time.

If you would like to click around the prototype, here is the link.