Proud Hound Coffee

Overview

Following the Thinkful UX/UI Design program, I realized that there were some issues with the website I had created for Proud Hound Coffee (The company I currently work for) so I decided it was time to update the site and correct those issues.

— Scope:

• Increase contrast in the top navigation

• Create a more uniform and consistent website/brand

• Responsive Issues on Mobile

• “Add to Cart” sticky button to decrease cart abandonment

• Take new photos of all products (Consistent look)

— Constraints

• Time: 1 month

• Budget: There was no budget for the project, which meant I had to be resourceful throughout the entire project.

Problem

Proud Hound Coffee has been using the website I built via Shopify for the past year and a half and since the Thinkful program, I realized there were some major issues with the website. Most importantly were accessibility with the main navigation menu and some parts of the website weren’t responsive (like the video on the home page).

Solution

A responsive e-commerce website that allows customers to view products, filter products, login/sign up so you can see previous orders and check out faster. In addition to creating a more accessible website, I wanted to add a sticky “add to cart” button so that it was always in view when browsing a product. I had researched and found that other websites utilizing a sticky “add to cart” button had seen sales increase by up to 10% and cart abandonment decline.

Website Prior to Redesign

Research

Survey

I created a survey through Post Purchase Survey on Shopify which would prompt customers to fill out the survey after checkout to get feedback on their experience using our website.

The survey got over 100 responses which were very helpful in confirming what I believed were some major issues with the site.

— Responses: 

• “Website homepage on mobile looks a little weird but didn’t impact buying”

• “Sort the shop section by coffee first merch after”

• “Navigation bar is hard to see”

• “Gift Option”

• “Grind options and education about the different grind sizes”

The survey got many positive responses as well and for some people, the contrast issues or responsiveness did not seem to be an issue, but I knew that the website needed to be fully accessible. I didn’t want the accessibility of the site to be something that prevented someone from shopping with us.

Design

I was able to wrap up with the research portion and take everything I had learned to begin redesigning the website.

Branding

I chose colors for the website based on the Proud Hound branding colors and ones that would allow for the greatest legibility. I also wanted the website to look clean and fresh and not overload it with all the colors.

Product Photos

I wanted to update the product photos so they all looked alike for consistency because they were all shot differently with different backgrounds prior and it did not look great (I forgot to screenshot the old website before updating the photos 🙃). I opted for a pink background and this is what all product photos will be shot on going forward.

I chose fonts that were within Proud Hound’s branding guidelines in order to make everything cohesive.

Outcomes and Results 

The result is a responsive e-commerce website that is more accessible and easier to use than the original. The addition of the sticky “add to cart” button has proved beneficial so far although it hasn’t been in use long enough to give specific data. (Will update this when I have more information.)

Updates for Proud Hound Coffee 3.0

Since launching the new website I have been updating and adding new features and information.

• Brew Guides with recipes for different ways of brewing coffee

• Pricing calculator for events & catering

• Added coffee info cards so that when scrolling through the shop you can get a quick look at the origin, farm info, importer, and tasting notes.

Lessons

• I learned how willing people are to share their opinions on something - I anticipated to get very few responses to the survey but ended up with over 100.

• I worked solo on this project so it was important to plan out what was a high priority to get the new site launched and what could be added and updated after the initial launch

• I learned some basic Liquid (Shopify Language) in order to customize some specific things