UXDi Project 2: Information Architecture

The Brief

Design and create an interactive prototype of an e-commerce site for a local small business.

Phase 1: Research

For this project, I decided to create an e-commerce site for Dutch Vinyl — a record store around the corner from my house. I’d been in there a number of times and they have a fantastic physical store, but aren’t currently selling online.

I begun by going into the store to chat to the owner, Mark. We talked for a while about why he’d opened the business and what he hoped to achieve, before I asked him why they aren’t currently selling online and whether it’s something they’d consider in the future. He said it was (another revenue stream would be helpful) but that ultimately he’d wanted to create a community of music lovers and he was concerned about how the CX would translate online. And so my business objective became clear: create an online experience that is as close possible to what customers would experience in store.

From there I needed to conduct some user research to better understand whether record lovers currently bought online and what is good and bad about the experience. It turns out the experience is largely a bad one (as I’d experienced myself more than once). This tended to drive people in store, but something that was common to the people I spoke to was that, although they enjoyed the in store experience, they were busy professionals who didn’t have a lot of time to spend in store. They all commented that if there were a site where they could still browse to find hidden gems online easily and efficiently, they would surely use it.

Now that I had a clear picture of my business and customer needs, I needed to have a look at the competitive landscape. What I found was that there were local record stores selling online but very few of them were really competing in this space. Their sites were very difficult to navigate meaning there was no way to browse. So I went back to my users to see who they saw as the competitors to local record stores. It turns out they saw music streaming services, like Spotify, Apple Music and Tidal, as the true competitors since they offered a lot of browsing options and large collections. But these services lacked something important: a physical product to enjoy.

By this stage, the problem was fairly clear: how might we make selling records online more like Spotify?

Phase 2: Information Architecture

With my problem and solution clearly defined, I begun looking at how I might create an IA that allowed users all the flexibility of browsing in store. I did both a closed and open card sort, and a treejack exercise with my users. From this, two things became clear:

1. Users would sort by artist first. This validated my assumption and confirmed an ‘artist’ category would be key to good IA.
2. Some categories are more concrete than others. For example, if you’re looking for The Rolling Stones in ‘artist’, that is a concrete search. However if you’re looking for The Rolling Stones in decade, that is much less clear cut, since they have released records over four decades. So being able to attach multiple categories to one records was important to avoid confusion.

These exercises allowed me to define not only the categories that should exist within the navigation, but also the type of navigation best suited to my site. By using faceted navigation, users could make very detailed searched, mimicking the in store experience.

Phase 3: Wireframing, Prototyping and Testing

Now that I knew what navigation categories and style I would use, I started wireframing. My first set of low fidelity wireframes helped me get a feel for the layout of each page. Once those were done, I used Balsamiq to create some medium fidelity wireframes to start testing with. The results of the test were mostly aesthetic changes, so I moved on to using Axure to create my first interactive prototype.

Being a first time user, it took a little while to get the hang of adding interactions in Axure. But they say practice makes perfect, and eventually I was able to develop a prototype I was happy with. I tested on five users by setting them various tasks to complete and recording length taken, clicks and errors and well as taking observational notes and verbatim. There were some common themes with each user, so I created an issues register and ranked each one based on business and user priority. This allowed me to set priorities for what needed to be fixed first and what could be left for later.

I ended up incorporating all of the above, which resulted in a much more functional prototype which better met the needs of both the business and the user. You can view the final version of the prototype here: http://7ux2tu.axshare.com