The Good Stuff Website Redesign — Case Study
The Good Stuff is a Vancouver based frozen smoothie online store. Using fresh ingredients they design different recipes that focus on healthy living and good taste. As a fairly new startup, they requested that I look at their current site and see if I can improve it in any way. I took on the role as a solo UX researcher and designer as well as front end developer and set out to see if I could make their checkout process more intuitive.
Research
User Testing
After quickly browsing the site myself I made a quick list of some of the issues I saw. Using this shortlist I created a few user tasks that I could give to users to see how they would navigate the site. Also, I checked a few competitor websites to see how their stores handled the checkout process.
I gathered a bunch of volunteers and scheduled a solid week of user tests, doing anywhere from 3 to 5 tests a day. These tests were either done in person or over the internet using a screen sharing program. For these tests, I gave participants a list of activities to do, such as successfully order some smoothies, or navigate a competitors site. I recorded the screen capture of all these tests so I could review them at a later time and consolidate all the similar problems I found. After the test, I interviewed the users on how they felt about the experience as well as quizzed them on important information to see if they understood some requirements for the ordering process.
After all the testing was done I made a list of pain-points that had occurred multiple times during the user tests.
Pain Points
Here are some the problem I found with the site
Item Cards
Each item in the store was displayed with an item card, however, the dimensions of these cards would change when the user hovered over them. The button that would appear on the bottom would sometimes disappear when the user went to click on them as a result. The image carousel was also rarely used (except for the nutrient information), adding clutter without providing many benefits.
Item Detail Page
Clicking into the details page for the item would provide users with a bit of background for each item. What ended up happening was if users were interested in learning about one item they were likely to want to do the same with other items too, causing them to bounce in and out of item description pages. I wanted to preserve the availability of this information while limiting the number of time users would have to bounce in and out of pages.
Minimum Order Size & Info Banner
Orders could not be completed without having at least 6 items in the shopping cart. Despite this information appearing at the top of the shop page none of the users I tested read the entire line and a vast majority was not aware of the minimum order size. Users would end up going to the checkout page only to discover they were not able to proceed without navigating back to the store page and adding to their order. Additionally, the information banner at the top of the page confused some users. Some thought the icons were buttons they had to click to manage their delivery options. To cut down on the confusion the amount of information on this page would need to be simplified.
Top Navigation
Several other small problems were also present on the site, such as the top nav having links to an item page for information and an item page for adding the items to your cart, which were redundant and added needless complexity to the checkout experience. Additionally, the top nav did not indicate what page the user was currently on.
Design
Wire-framing
Over numerous design brainstorming sessions, I sought to address the pain-points listed above. I created wire-frames for each solution and created a prototype out of them.
Item Cards
The first thing I did to the item cards was to simplify them. I removed the image carousel which more or less fixed the dimension problems seen before in the hover-over effect. To maintain some of the functionality of the carousel I also added the ‘blended’ image of the smoothie to as a part of the hover over effect. This also has the added benefit of giving the user more feedback on what item they are currently hovering over. The nutritional information became a toggleable image with the toggle icon only appearing on hover over. When an item was added to cart the “add to cart” button would be replaced with ‘+’ and ‘-’ buttons as well as the number of that item currently in the cart. These new buttons would always be displayed as long as the item was in the cart.
Item Detail Page
To solve the problem of having users navigate in and out of multiple item descriptions was to simply move the item description to a light-box that would be displayed whenever the user clicked on the item image or name. clicking outside of the light-box would close it so they could continue shopping without having to reload any page.
Minimum Order Size & Info Banner
To cut down on information overload the information banner in the “order now” page was removed completely. In its place, a box progress bar was placed. Whenever a user added an item to their cart a pip would be added to the bar, and once 6 pips were accumulated the “minimum order” text would change into a “checkout now” button, which would bring the user to the checkout page when clicked on. This change sought to inform the user that they needed 6 items clearly and intuitively.
Top Navigation
Since the item details were to be included in light-boxes in the ‘order now’ page it made the ‘collection’ and ‘smoothie’ pages completely redundant, so they were removed from the top nav. In its place a link for the ‘delivery area’ page was placed, as it was the most frequently visited page outside of the primary navigation according to the google analytics. To show users what page they were currently on the style of the top nav links were changed to underlined. If the user was on the ‘order now’ page the green box would be removed from the top nav link for that item.
Testing
After the prototype was created I ran a series of user tests, checking where users clicking and asking what they were thinking while navigating the prototype. Once I was confident the design was intuitive and fixed the pain points I identified previously I moved ahead to the development phase.
Development
Learning Liquid
This was my first time developing a page for shopify so I spent a while watching tutorials and exploring the existing code for the website before I began making my changes.
The first thing I did was inserted a bunch of <h1> tags into the code and searched the website to see where they showed up. This gave me an idea of what file corresponded to what parts of the page. Next I tried to find all the major buttons and see where the functions for the existed. This presented me with a serious challenge, however. The “add to cart” button, despite being very important to the site, didn’t appear to do anything when clicked according to the code. It existed in the HTML but didn’t reference anything and wasn’t mentioned anywhere else in the entire code. Through some sleuthing and deducing I discovered that changing the class name of the button removed the functionality. The website had several Apps that I did not have accesses to the code of, so I concluded that those apps must be listening for a click event on an element with the class name and running a function to add the item to the cart. With this knowledge I was able to create my own “add to cart” buttons by simply creating elements with that class name.
Removing items from the cart was not as simple as that button didn’t exist anywhere in the code at all. It did, however exist on the page itself in a small box called the turbo cart. To create the ‘-’ from cart button on the item card I had to make a custom function. This function looked up the ‘-’ button for the corresponding item in the turbo box and clicked on it. I also created a new ‘Clear all’ button using the same method. After this the ‘turbo checkout’ box was hidden from view on non-mobile versions of the site.
The cart progress bar was created in 3 layers, a background which contains the grey, a foreground which contains the white notches, and a middle ground which contains the green fill. The foreground and background were static div elements and the green fill would change size depending on how many items were in the cart when the page was loaded. To make the progress bar change dynamically I added some jQuery to the ‘addToCart’ and ‘removeFromCart’ functions that would increase and decrease the width of the green div accordingly. A lot of CSS manipulation and tweaking later and I had a fully functioning progress bar, complete with a dynamic ‘GO TO CART’ button.
Conclusion
Doing the redesign of this website presented me with a lot of challenges which I had to solve by myself for the most part as I was the only designer and developer on this project. Due to this, however, I gained a lot of experience digging around in preexisting, poorly commented code. Being unfamiliar with the liquid language I was unsure of some of the things I designed would be doable, but I ended up achieving everything I sought out to change.
The changes I made to the site are currently live and can be viewed at:
and if you live in the Vancouver area I recommend the Diesel Monster.
