As I prepared for my user interviews, I decided to focus on two persona hypotheses after finding out that the store does not host musicians.

With interview questions in tow, I went to the store to speak with customers in person and observe their buying habits. After sufficiently bothering enough crate diggers, I aggregated my interview notes and identified behaviors of both personas. 

While I interviewed members from both persona hypotheses, I decided to ultimately focus on the collectors as my primary persona. After speaking with the owner, aggregating the responses and going through the collection myself, I noticed a lot of the needs of the enthusiasts could be fulfilled by catering to the collectors first.

1) Finding a good deal for a rare, used record in pristine condition that can appreciate its value over time 

2) Interacting with knowledgeable music buffs

3) Staying informed about the new collections and events

4) Supporting independent record stores with fair pricing

Looking to complete his collection of essential jazz albums, Julian is on the hunt for Miles Davis’ Kind of Blue. He finds out about Atomic Records through Yelp and word-of-mouth.

Julian goes on the website and searches for the specific album and artist he is looking for. He finds a listing for the record and clicks on it to examine its details. He reads the history of the album, finds out that it is a first pressing, limited edition and has a grade of VG+ for its condition. He zooms into the image to inspect the physical condition of the cover and actual vinyl. He finds the price to be reasonable for its value and decides to add it to his shopping cart. 

Below the listing, he finds personalized recommendations for records that would be of interest to him based on his current search. He finds another Miles Davis album that he had not heard of and inspects it in the same way as his previous purchase. After satisfying his criteria, he adds it to his cart as well. He goes to ‘Checkout’, fills in his shipping details, pays and receives an email confirmation of his purchase.

After analyzing the findings from my user research and going through competitor sites, like Stellar Remnant, Other Music and Turntable Lab, I drafted a list of essential features. 

Transforming a static website into an e-commerce platform is a daunting task, especially for a small business. When deciding how to map out the site, I first researched how to implement the functionality of the new website in the most painless way possible. Again, I looked into competitor websites, like Stellar Remnant and Other Music, and found that they were built on Shopify. In fact, several e-commerce sites are hosted on the platform which not only provides a foundational site with the basic functionalities of inventory management, listing and payment processing, but also includes an App Store. Through the App Store, a site owner can include different functionalities, almost like a plug in. 

Doing this research ensured that my redesign was not only upgraded, but also feasible.

Armed with information about the users and platform capabilities, I created a site map to illustrate how each page is laid out and linked. 

After mapping out the entire site, I set out to see how these pages would interact with one another when a user completed a specific user flow to achieve a goal, like purchasing a Vinyl.

While I was instructed to use Sketch, I was pleasantly surprised by it. I liked how easily I could keep consistencies in my design, particularly with the positioning of layers, which allowed me to build my design from basic wireframes to responsive prototypes.

Starting off with the Desktop wireframe, I tried to keep the design as simple as possible with the homepage being the launchpad to other pages, particularly to 3.0 Shop. I drew inspiration from other e-commerce sites built on Shopify, like Quad Lock, Studio Proper and Tluxe.

After the desktop wireframes, I worked on the responsive mobile versions where I added visual design and content. 

When it came to visual design, I started with the logo since the current one was rather outdated and low quality. I used an online logo maker to quickly draw up a new one. Settling for this one below, I liked how simple yet effective it was, the disjointed text made it seem slightly psychedelic and enhanced the original design that seemed to be influenced by comic books.

For colors, I used the color palette below to ensure consistency throughout all the pages. To make the logo stand out, I made sure not to use the same color in the design. However, I wanted a pop of color so I chose orange as an accent for borders and text. I used a dark blue for the buttons to ensure they were prominent, but not jarring. 

After making these important design decisions, I applied the color palette and logo to a responsive mobile design. Creating these were a real lesson in spacing as I aimed to use the entire width of the screen as an adjustment for the smaller screen. 

Below are designs for the user flow (purchasing a Vinyl) described above:

Apart from illustrating how the pages were laid out, the site map helped me see how the pages interacted with one another. 

The next step was to create a linked prototype that would allow the users to click through an entire use case. 

Initially, I used Sketch itself to link each ArtBoard in a rudimentary fashion. Then, I transitioned into Principle to add animations into the prototype as I heard it integrated well with Apple. However, I found Principle quite tedious to use for several reasons, but primarily because it laid out every screen linearly making it hard to create links between screens that were far apart. As a result, I ended up sticking with Sketch's own prototyping capabilities. 

Nonetheless, here is a video to some of the animations I was able to create on Principle.

There were two use cases I wanted to explore (making a purchase and finding events). To help users go through those cases, I wrote up two prototype scripts. 

Screen 1 - 1.0 Home 

User scrolls down to the bottom of the screen to the footer, scrolls up and selects ‘Shop Vinyl’ and goes to 3.0 ‘Shop Online’.

User can sort using drop down menu or click on ‘Refine Search’. From ‘Refine Search’, user can search directly or filter. User browses collection, clicks on record and goes to 3.1 Product Detail.

User reads through product description, clicks on ‘History’ to view product history. User clicks on ‘Buy’, displays 3.1.1 modal.

Users clicks on ‘Go to Cart and Checkout’ and goes to 7.0 Shopping Cart

User reviews cart, clicks on ‘Checkout’ and goes to 7.1 Checkout

Users fills out information, clicks on ‘Continue to Shipping’, goes to 7.1.1 Checkout (Shipping)

User fills out information, clicks on ‘Continue to Payment’, goes to 7.1.2 Checkout (Payment) 

User fills out information, clicks on ‘Pay Now’ which displays confirmation modal.

The plan outlines the goals, establishing questions and tasks for the user testing.

After developing a plan for testing, I used Validately to test 5 users on the tasks mentioned above. The program allowed me to conduct unmoderated tests and record the partcipant's screen to see how they executed each task. 

The first question was a screener question. If a participant had not purchased a Vinyl in the last two years, they were disqualified from the test.

After asking the establishing questions mentioned in the research plan, the participants completed the tasks. Below are the results for each:

After examining the video footage and responses to questions, I aggregated some key issues with the current design: 

To address the confusion that participants had on the home page, a simple modification can be made to the text on the call to action

To address the navigational issues users had from the shopping cart, I added a 'Continue Shopping' button to allow users to add more products to their cart before checking out.

Another issue that can be addressed easily is the confusion with the 'Book A House Call' button which appeared to be too prominent in the original design. This can be remedied with an explanation of what a house call is and rearranging the layout to move the button lower. 

Addressing the other issues is beyond the scope of design and have more to do with backend functionality. If this design is ever implemented, then they can be fixed!