Case Study: Electric Fetus Site Redesign

Case Study: Electric Fetus Site Redesign.

INTRO

I want you all, for a minute, to imagine yourself on a cold rainy autumn night in Minneapolis, Minnesota. You want to buy a vinyl record, a cd, maybe a funky gift to cross someone off your Christmas list. You enter Electric Fetus. The legendary record store on 4th and Franklin. When you enter you’re greeted with dim lights, loud music, and the earthy smell of nag champa incense wafting through the air….

….of course this a dream. We’re in the middle of a pandemic and these local comforts are dangerous at a time like this. So, instead, we go to their website. And we are greeted with confounding navigation, overwhelming UI, and seemingly random information architecture.

PROBLEM STATEMENT

Enter our problem statement. The target user likes to browse for used records at their local record store. Due to covid, they need an elegant way to recreate this experience online.

The current state site navigation is confusing, misleading, and at times perplexing. Why are candles and incense listed under “shop music” when there is a separate “shop gifts” global nav? Why does only a handful of artists and events have a link in the “shop music” tab? We intended to find out.

USERS

The Fetus draws in a diverse crowd. The legendary record store has been a staple of the Minneapolis community since 1968. It is renowned for its collection of new and used LPs, as well as unique gifts, clothes, and, (shall we say: medicinal) paraphernalia. For this design challenge, we focused on a millennial user who prefers to shop locally and in-store, but cannot due to the Covid-19 pandemic.

ROLES AND RESPONSIBILITIES

Our team consisted of 1 individual (me) currently enrolled in General Assembly’s User Experience Design Immersive. This was my first time analyzing an e-commerce site and using Sketch to complete the redesign over a two-week sprint.

PROCESS

I began my research began by completing a comparative and competitive analysis and discovered that Electric Fetus exists in an interesting place among its e-commerce peers. The site is much more amateur than its big competitors like Barnes & Noble or Amazon, but head and shoulders above other independent record stores in Minneapolis when it comes to the UI of their websites. These other local sites are nonprofessional and most do not offer online orders as Electric Fetus’ site does.

It is important to note that the Fetus has established street cred and cool-factor in the community. I approached my redesign keeping in mind that we would have to maintain the look and feel of a local record store, while still having effective navigation. I wanted a visual representation Electric Fetus’ core values which lead me to make a word cloud from interviews with past Electric Fetus customers. This gave me a direction and kept us on-brand during our design process.

To start the reorganization of the site’s nav, I did a card sort activity with 5 participants. As one can imagine, the participants grouped the genres in one pile, the curated playlists in another, and the event-related releases in yet another. The incense, candles, and other gifts were grouped into a “gifts” category.

It is at this point when I went back to our problem statement. I had identified the site’s problem but our designers wanted to refocus on the barriers the user is experiencing.

I simplified our problem statement to just focus on our Persona (Kara) and their browsing experience in-store and online.

Current state nav chart

Future state nav chart

I then took to designing and made a nav chart of the current state to focus our design. Currently, there are 35 individual categories all stuffed under the “shop music” global nav.

Per my card sorting the music was grouped by genre, gifts with gifts, and so on. Doing this helped me to further refine my problem statement. I thought again about my word cloud and focused our design iteration on recreating the feelings Kara has about the in-store experience: familiarity, comfort, convenience, and of course satisfaction with their purchase.

My greyscale prototype kept the layout of the current page largely the same while incorporating room for our new dropdown menu categories. User testing here confirmed my navigation scheme is more intuitive and easy to complete a given task.

For the high-fidelity, I kept the record layout on the pages to simulate the experience of thumbing through racks of vinyl records, while still keeping the UI clean and easy to read, with juuuuust the right amount of professionalism. I even used the same color palette as the logo. During hi-fidelity usability testing, the participants were able to quickly complete their task of finding and purchasing a specific album, while still maintaining the browsing experience and being exposed to other products during the task. Users were asked to select a specific album and complete the purchase process. Users were also asked to call out instances of recommended purchases.

NEXT STEPS

My prototype went leaps and bounds toward better navigation. But the work isn’t done. In the future, I would like to tackle the search bar as many of my testers reported that they tend to use that feature when they know specifically what they’re looking for. Currently, the search results are confusing and quite hard to look at. I did a comparative analysis of how Spotify does a search. Typing in “Gorillaz” for example brings up the artist name, similar artists with the same name, songs, albums, playlists. All with photos to support. I feel a similar layout would fit perfectly with my redesign.

I want to leave you with a revelation. A cautionary tale of design discovery. When researching my design and putting the final touches on my high-fidelity. I decided to take a break from design and go back to do some discovery. Why is this site layed out the way it is? Why are candles listed under music? Why are there 3 playlists listed with no content in them? After some research, I found the answer.

Our site, our beloved Electric Fetus site. Is built from a template.

Our friends at Electric Fetus got their website through a marketing company based out of Virginia that offers content management and web hosting to some 40 odd independent record stores. That means 40 of the same perplexing navigation and same search functionality. Now, it doesn’t mean our work was any less valuable to our client. But it does mean I have about 40 new sites to design. So if you’ll excuse me….

Thank you for reading.