VT Pepper Project

Website redesign for e-commerce business

VPP customers need an online store that is easy to navigate so they can buy their favorite products quickly and conveniently.

VT Pepper Project (VPP) is a craft hot sauce and pepper product business rooted in Vermont. Alex, the man behind VPP, is dedicated to growing fresh ingredients and bringing the heat to his community. I have been a fan of VPP products for years and was brought in to improve the user experience of their e-commerce website.

When I was brought in, the VPP website was up and running but, but the interface urgently needed a redesign.

MY ROLE
User Research, Site Audit, Wireframes. Prototyping, User Testing

TIMELINE
4 months (11/22-3/23)

TOOLS
Figma, Adobe Photoshop, Google Forms, Shopify

THE CHALLENGE

Users have a hard time understanding what products are offered, what products are like, how to find what they are looking for, and who they are buying from. Users are deterred from buying products by processes that are time-consuming, confusing, and difficult.

THE SOLUTION

Redesign the website so that the navigation is seamless, all products, product information and brand information are easy to find, users can quickly and easily achieve their goals, and the visual design is professional and cohesive with brand.

Discovery

EXPLORATORY RESEARCH

In order to understand how to approach this redesign, I needed to learn more about our target audience demographics, consumer buying habits and who our competitors are. Through exploratory research, I found:

TARGET AUDIENCE

  • Demographics: hot sauce consumption is popular across all gender, age, ethnicity and income groups

  • Buying Habits: buying hot sauce online is the most popular way to purchase.

  • What Motivates Customers to Buy: peer recommendations, social media influence, the story behind the brand, style and flavor preferences, buying local, tried and true staples, food complimenting, variety, current popularity, health and nutritional value, wanting to try something new

  • What Deters Customers: Fear of wasting money on a new product and not liking, complicated and lengthy transaction processes, high cost of products, lack of availability of products, hard to build brand loyalty with so many products to try


COMPETITORS

I identified hot sauce competitors first by who were the most popular hot sauce companies in the US, followed by mid-size top e-commerce hot sauce companies, and then more comparable sized small hot sauce business competitors, especially those in Vermont.

  • Most popular: Sriracha [top in US and in VT], 2) Franks*

  • Top E-Hot Sauces (Midsize): The Heatonist*, Lucky Dogs Sauce

  • VT Competitors (Small): VT Roots, Butterfly Bakery of VT, Benitos Hot Sauce*,Angry Goat Pepper Co*

COMPETITOR ANALYSIS

After identifying large, mid-sized and comparable small-sized competitors in exploratory research, I conducted a comparative analysis of feature functionality across platforms. Using a feature matrix, I compared the VPP site to its competitors to identify opportunities for missing features that could benefit our users.

This analysis uncovered a great deal of opportunity for adding features to the VT Pepper Project site that could improve the shopping experience for customers.

CUSTOMER SURVEY

In order to gather direct data from existing VPP customers, I crafted a survey to get customer feedback on the ease of use, navigation and learn about target user demographics.

The survey was pushed out to customers through VT Pepper Project social media accounts and had 27 participants. View survey or survey results.

AREAS OF OPPORTUNITY

KEY INSIGHTS

What’s important to customers:

  • Simple clear navigation

  • Ease of use

  • Supporting small businesses

  • Price

  • Product ratings/reviews

  • Product images/descriptions

What customers love about the current VPP site:

  • Simplicity

  • The products

  • Responsive Design

  • No ads/distracting content

PRIMARY RESEARCH: USER INTERVIEWS

Equipped with a general understanding about what experiences VPP customers were finding difficult from the survey, I crafted a User Interview Guide designed to help me learn more about my user’s core needs, goals, motivations and pain points.

Using an Affinity Map, I synthesized the user interview data into patterns. 

I learned that when shopping at VPP, users…

KEY INSIGHTS

Define

USER PERSONAS

Using these key insights, I developed user personas that embodied the needs of core users in order to empathize with our users and their journeys to guide the design process.

MEET CASSIE:

The small business supporter who loves to shop small, has a set of products she loves, and values convenience. She is not very tech-savvy and gets so frustrated trying to navigate the site to find her favorite products that she often exits before buying.

MEET ELLA:

The hot sauce enthusiast who loves trying new sauces but wants to know who she is buying from, what the product is like, and that the product is well-liked before she commits to buying. She is frustrated by how many clicks it takes to understand and compare products and wishes there was a way to filter by her preferences to make this process quicker.

KEY FEATURES

Using the needs, goals, motivations and pain points of target users, I identified key features to address those pain points.

Improving Navigation: Sitemap Optimization

With quick and easy navigation being our user’s number one need, I asked users to describe the product categories within a mental map that made the most sense to them.

I synthesized this data using an affinity map and used the patterns, as well as client feedback to ensure scalability, to guide the redesign of the site map so that navigation would be more intuitive.

THIS REDESIGN INCLUDED:

  • Adding product categories

  • Adding product filters

  • Adding an ‘About’ section for learning about the brand with new pages of relevant content users had asked for

  • Removing unnecessary pages that were not adding value or felt out place

USER FLOWS

Taking the goals and needs of my key users, I created a user flow that compiled these.

Based on user feedback, the checkout process was simple and not an area of opportunity, so I focused instead on the experiences of finding desired products using the new product categories and filters, understanding product details quickly and easily using the new cohesive and informative product cards and customers reviews, and adding items to the cart quickly and easily using the new ‘Quick Add’ button feature.

Ideate

WIREFRAMES

Using Figma, I translated the user flows into wireframes that would meet user goals, I identified the key screens that were the highest priority to redesign as the Landing Page, Product Listing Page and Product Detail Page with the new reviews feature.


LANDING PAGE

PRODUCT LISTING PAGE

PRODUCT DETAIL PAGE

Design

PROTOTYPES - ITERATION 1

I developed high-fidelity wireframes consistent with the existing VPP branding to test my proposed solutions using interactive prototypes.

Experience 1: Intuitive Navigation

STANDARDIZED INFORMATION ARCHITECTURE:

To help users find the pages and information they were looking for more quickly and easily, I placed content in alignment with user mental maps which included relocating the navigation menu and icon to the header bar, adding secondary menus, and adding a hero banner and CTA button from the landing page.

IMPROVED PRODUCT SEARCH:

To help users find the specific products that met their needs faster, I customized the product search process by adding product categories and product filters and removing unnecessary sorting options that weren’t helpful to users. To help users find all the information they need on a single page, I added product details to product listing thumbnails.

IMPROVED PRODUCT PURCHASING:

To help users complete the purchasing process faster and easier, I added a ‘Quick Add’ button feature from the product listing thumbnails and a confirmation pop up once items were added to cart to help users avoid unnecessary navigation and clicks to complete these processes.

Experience 2: Building Trust

BRAND TRUST:

To build brand trust and brand cohesion, I applied the existing VPP brand assets to the visual design of the site. To help users understand and trust the brand, I added an About Us page, an FAQ page, and an Instagram feed to connect users top the face behind VPP and the VPP story.

PRODUCT TRUST:

To help build trust in the products, I added customer reviews and ratings capability and a ‘Best Sellers’ section to quickly verify product quality and customer approval. To help users feel confident in the professionalism of the brand and the products offered, I redesigned the product cards and photos for uniform size, style, alignment and quality. To help users understand products, I condensed and consistently formatted product details to convey key information quickly and easily at a glance on product details pages.

Test

USABILITY TESTING

To validate my solutions, I had 4 participants in the target audience test the prototype by completing tasks. You can see the full usability testing plan, script and user feedback notes here.

THE TASKS

I asked users to complete 3 tasks:

  • Task 1: Navigate the site to find and buy specific products quickly and easily

  • Task 2: Find existing product reviews and leave your own

  • Task 3: Learn about the brand and the company policies

THE TESTERS

TEST FEEDBACK

I consolidated user responses into a synthesized data grid with a focus on what worked well and where there were opportunities for improvement.

WHAT WORKED WELL

  • 100% of users cited improvement in the updated visual design & navigation, noting the improved speed and ease of finding products that meet their needs.

  • 50% of users noticed improvement in IA, clear/simple UI, and product info/card cohesion.

  • 25% of users noticed improvement in brand connection and a less cluttered interface.

OPPORTUNITIES

  • 50% of users felt navigation would be easier if they could pinpoint where within the site they were at all times and easily toggle back to a previous listing as well as more structured product details and tags.

  • 25% of users had challenges with the prototype pathways which would not be an issue on the live site.

ITERATE

PRIORITIZING NEXT STEPS

To determine next steps, I plotted user feedback onto a matrix measuring frequency and severity. Using this, I was able to separate iterations into high, mid and low priorities so that I could attack the most frequent and severe issues first.

HIGH
PRIORITY
ITERATIONS

  • Optimize visual design to be bolder/less white space on Product Details & Product Listing Pages: 50% of users noted that while the UI was vastly improved from the original site, it still felt a little bland, overly simple, and had too much white space

  • Fixed Position Top Nav Menu: 25% of users wanted to be able to access/use the top Nav Menu when scrolling through pages to quickly and easily navigate elsewhere

  • Include quickly accessible path link back to previous page (with ‘Back to’ link or path/trail link): 25% of users wanted quick and visible navigation link back to the most recent page especially when using specific filtered results

  • Activate ALL pathways in prototype from all screens: 25% of users took less direct paths and got stuck when not all pathways were activated in prototype.

MID
PRIORITY
ITERATIONS

  • Restructure product description text on Product Details page: 25% of users were overwhelmed by amount of visible text in product descriptions on product details page, it is hard to digest at a glance

  • Add additional / clearer Indicator of task completion when adding to cart: 25% of users would prefer a popup confirmation to reassure them quickly/easily that item had been added to cart in addition to seeing cart icon updated with number

  • On Product Listing pages, make product card UI clearer and indicate number of results shown: When using filters results in a single item, 25% of users were unclear as to whether they were looking at product detail page rather than still looking at product listing page

  • Add improved product status labels that are easier to see at a glance to prototype: 25% of users noted that existing status labels on site are incredibly hard to see (‘Sold Out’) that are easier to see

LOW
PRIORITY
ITERATIONS

  • More product photo contrast on background: 25% of users felt product photos would be easier to see with more contrast between photo and background and would prefer dark background (though this would make dark photos difficult to see)

  • Add more product photos for each product: 25% of users felt this would be helpful for buyers to understand product

  • Rethink FAQ Page Label: 25% of users were unsure what FAQ stood for so struggled to find policies

ITERATIONS

Based on the prioritization of feedback above and the project timeline, I addressed the high priority and mid priority iterations first.

Bolder Visual Design

I reduced white space and applied brand colors throughout pages to make the visual design bolder and more aligned with the bold flavor and spice of the brand.

Easily Pinpoint In-site Location & Navigate from Anywhere

I added UI breadcrumbs to help users understand where they are within the site, how they got there, and allow them to easily toggle back to a previous listing.

I also fixed the Navigation bar to the top of the screen so when a user is scrolling through a page, they can easily toggle elsewhere at any time - saving users the hassle of scrolling up to the top of a page.

Clear Results Indicator

I added a ‘# of Products’ shown UI to the Product Listing screen to help users understand listed content at a glance and reduce user confusion when there was a single product available.

Consistent, Easy-to-Understand Product Details

I created a template to restructure product description text on each Product Details page to ensure consistency between products with a more digestible content layout for users to more quickly easily understand product details.

Previously, product descriptions were written in long unstructured paragraphs with each listing containing varying information in varying order. Using branded graphics, I created specific categories for product descriptions with collapsible content to allow users to take a closer look at the descriptions they are interested in while reducing visual clutter.

Clear Task Completion Indicator when Adding to Cart

To give users peace of mind after adding a product to cart, I added a pop up confirmation to let the user know the task had been completed successfully in addition to the cart number badge adjustment.

This reassurance allows user’s to continue shopping without needing to toggle to their cart for confirmation of successful task completion.

Clear, Easy-to-See Product Status Labels

To help users quickly understand product availability and new product statuses at a glance from the Product Listing pages, I added clear status, high-contrast labels to product cards that are easier to see.

Final Prototype

Conclusion

PROJECT TAKEAWAYS

I loved working with a small business client, especially because I am passionate about VPP’s product and story. Having the opportunity to create a better shopping experience for VPP customers which ultimately helps VPP increase sales, grow as a company, and achieve business goals was a big win.

I was also able to learn a lot from the project, including the importance of:

LEARNINGS

  1. Creating a well-organized project plan
    With so many opportunities and error pain points to consider, approaching each project with a solid strategy proposal that touches on each phase of the design process through to implementation will keep progress on track and help to prioritize on what’s needed for the final product.

  2. Clear client communication
    One challenge I had not anticipated was balancing client urgency and communication. With this project as my priority, I was turning around content for feedback at a rapid rate. My client was a small business owner and had much to manage, so he was not always available to discuss updates and move the process along at as rapid a rate as I was producing. Empathy, understanding, and working within scope were key to our successful relationship.

  3. Considering implementation challenges early
    Following the completion of the design, I offered to implement the design myself though it was my first time building an e-commerce site on Shopify. During the implementation phase, I came up against quite a few platform limitations that my design had not accounted for which would inevitably require simplifying some of the more complex added features for launch. If had the opportunity to approach this project from the beginning again, I would designed while testing capabilities in Shopify simultaneously in order to iterate early and avoid making those changes during the implementation phase. This also required a great deal of communication with my client who was fortunately still thrilled with the improvements that we could implement.

Thank you so much for taking the time to read my case study, if you have any questions or feedback, I’d love to connect!