Peppercorn: Direct to Consumer E-Comm Website
Website Redesign and Information Architecture Design
While studying at General Assembly, we were given a prompt to find a local business that sells 100+ products and has a website in need of information architecture improvement. It wasn’t long until I stumbled upon the website of Peppercorn, a shop that sells kitchen and home good items. Since it is one of my favorite shops in Boulder, I immediately jumped at the opportunity to redesign their website, knowing that I could really improve the IA and design of their current ecommerce website.
My Role
This was a solo project so I was responsible for all aspects of the process: user research, discovery and ideation, design, and prototyping.
The Problem
The current version of the website lacks any real information architecture, which presents a lot of issues given the number of items being sold. The lack of structure and organization undoubtedly creates confusion for the user, but the real question I found myself asking was what the impact of this has been on sales. I began to wonder how I might create a smoother experience for customers that compels them to shop at Peppercorn, especially during the current pandemic?
How can I create a more easily navigable and organized website for Peppercorn?
Competitive and Comparative Analyses
I began my research by conducting a high level feature competitive and comparative analysis. My goal was to discover some key features that users expect from an online shopping experience that were missing or defective on the current website. I studied similar brands to Peppercorn, such as Crate and Barrel, Williams Sonoma, and Bed, Bath, and Beyond. I also compared Peppercorn to brands proven to be “best in class” for their e-commerce experiences, such as Everlane, REI, and Athleta.
The Results
I compared 35 different site features, across 8 other ecommerce sites, to what was currently being used on Peppercorn’s website.
The Analysis
Once those results were compiled, I picked out the features that were common to all of the websites and compared them to Peppercorn. I found that there were 8 prominent missing features on the Peppercorn site, ranging from email subscription to a favorites list. Most importantly, I found that Peppercorn was lacking features around product filtering, which were common in all the other sites and were key to navigation and product discovery.
Card Sorting
The biggest problem I faced on the website was the immense amount of product sold, and how to best organize it in a way that people would understand. I decided the best way to research the issue at hand was to conduct card sorting in order to see how users would sort and categorize the products sold at Peppercorn. I started by collecting a list of products that were sold online, and narrowed 160 items down to 60, which 18 different users then sorted into categories they saw fit. The results of the card sorting data helped lay the foundation for the sites new product organization.
Sitemapping
Now that I had the base layer of the organization for the website, I moved into the sitemapping phase which was perhaps the most important phase of Peppercorn’s site redesign. The current site lacked any product structure or organization, so I started from scratch, building on the card sorting results. The plethora of products sold, and the vast amount of variability in terms of product grouping, continued to present the largest area for improvement. I knew I needed an intuitive and efficient way for users to quickly sort and organize the products. I went through 3 iterations of the sitemap before finally landing on this final structure.
User Research
In the next phase, I wanted to learn more about who would be using this website. I set out to conduct user interviews of potential customers which focused on discovering their ecommerce wants, needs, and goals.
User Interviews & Affinity Mapping
I conducted 5 different user interviews. The age range of the participants was 26 to 65, which I felt was sufficiently broad and captured a good slice of potential customers. The results from these interviews began helping me formulate affinity mappings and my primary and secondary user personas.
The Results
The results validated my conclusions from the prior research stages, especially the competitive/comparative analyses. Users in the interviews expressed a desire to have access to a wide range of different products, but wanted the products to be presented to them in a cohesive and visually enjoyable manner.
The Analysis
Having this data validated, I knew that these were key features to include in order to have a desirable ecommerce experience.
Primary Persona
Tamika “The Busy Mom”
“I want to support local businesses as much as possible, but I don’t always have time to shop in person and their websites can be so hard to figure out!”
Tamika is a busy mom, juggling the responsibilities of motherhood while maintaining a full-time career as an interior designer. She is the main cook of her family and enjoys having quality kitchen items, but usually doesn’t have the time to go to brick and mortar stores to shop. She finds the current website for her favorite local kitchen shop hard to navigate. She wishes to have a quicker, more convenient way to shop a large selection of quality kitchen items online.
Tamika’s Userflow
Secondary Persona
Bethenny “The Coupon Lady”
“I cannot stay out of the kitchen! My girlfriends and I love cooking and baking, so I really like getting a bargain on quality kitchen items, especially when I can find them locally.”
Bethenny is a divorced mom living in Bozeman, Montana. Since all of her kids are now adults and not living at home, Bethenny spends her free time cooking and baking. She is also very involved with local bake clubs with her friends. She loves supporting local businesses, but is mostly motivated by finding good sales and deals, and likes comparing pricing online for different items. She wishes that local shops would showcase their sales more effectively so she can support their businesses while also saving money.
Bethenny’s Userflow
Sketching, Wireframing, & Prototyping
Now that I had an idea of my key personas, site structure and organization, and the most important features to include, I moved on to the creative side of the project. I began by ideating through different app designs with sketching and prototyping. Once I had medium fidelity wireframes that I was happy with, I conducted user testing. I incorporated the results of my user testing into hi-fidelity prototypes.
Sketching
When I started out the sketching process, I compared other website designs to pull ideas and trends from. I sketched out several versions of the main pages, and decided that I would use the Shopify checkout process to help create trust and between the shop and the user.
Wireframes
Soon after sketching out initial ideas, I moved into the wireframing process. I really wanted to focus on using appropriate component and text sizing for desktop, and once I felt happy with those proportions, I focused on typography. I felt that the current typeface being used was a bit stuffy and wanted to give it a fresh, modern update. I decided to stay within the realm of serif type and pair it with a san serif typeface. Once the designs felt complete, I uploaded the Sketches to InVision and prototyped for my two user flows. I used these prototypes to conduct user testing.
User Testing Results
1. Button Placement
100% (5/5) users tested were confused about the checkout button placement on the checkout pop-up, which was a design flaw. The button ended up being below the fold on most desktop screens, confusing all of the users. This would be a quick and easy fix, simply moving the checkout button higher up on the screen.
2. Legibility
60% of the users I tested felt that some of the text was too small, and there was not enough contrast between the text and the background. This made it hard for them to read content on the site. Moving into the high-fidelity wireframes, I made sure to increase the type weight and replaced most grey text with black to help with the contrast issues.
3. User Successes
100% (5/5) of the users were able to navigate to sales on the homepage in under 30 seconds, and 100% also were able to successfully navigate to the item I asked for them to find (saucepans). This indicated to me that my site structuring and organization was already a great success compared to what was currently in place on their site.
Moodboard and Branding
Now that I had feedback to move onto the next iteration of the website, I began adding life to the wireframes by updating the color palette and imagery. I started off by creating my mood board, a place where I could refer to for the look and feel I wanted in the redesigned website. I wanted to keep Peppercorn feeling elevated, and opted for a darker, moodier color palette, knowing that it would paired with a white background and would still provide the contrast that was necessary for my users. I also made sure all of my CTA colors were ADA accessible.
The Final Product
After deciding on the final color palette and imagery, I was able to create the hi-fidelity wireframes, while implementing necessary changes from the user testing. I wanted to keep the imagery light and fresh, to help balance out the darker, cooler branding elements. As previously mentioned, I also increased the type contrast and weight to help with better legibility.
