CURDS & CO
Adding an e-commerce function
OVERVIEW
Curds&co is a cheese shop in Brookline Village making a name for itself. As it’s trying to expand their footprint, my challenge is to add an e-commerce function on their existing website for 100 products sold in their store including: cheese, crackers, jam spreads, honey, cheese cutting tools and serving tools.
I focused on understanding who the target users are for purchasing cheese online, diving into how to categorize 100+ items, lastly building a low-fidelity prototype showcase the new e-commerce functionality I built.
In my research I found that cheese shopping is subjective and would need to educate, refer and delight the users in their online shopping. Through the iterations, I worked to make sure that I could include the knowledge of the cheese experts in the store and provide a way for them to potentially share their recommendations via the website.
The digital prototype leveraged the existing layout of the website and added in the e-commerce portion to the site.
TIMELINE
2 weeks
TOOLS
Optimal Sort, Axure RP8, Affinity Mapping, Information Architecture
ROLE
I was solely responsible for the research, synthesis, designing, digital wireframing and prototyping for this concept.
PROBLEM STATEMENT
Cheese eating people in cheese need a way to get recommended options to buy cheese to expand their palate on the website.
SOLUTION STATEMENT
We believe that by creating an ecommerce page for curds&co that also recommends cheeses we will achieve more knowledgeable and adventurous eaters.
We will know this to be true when we see these individuals trying new cheeses and feeling confident in their new cheese purchases.
USER RESEARCH
To kick start the research I focused on writing a screening questionnaire to identify target users to schedule interviews with and to learn more about shopping behaviors, especially online.
I reviewed 21 responses and interviewed 5 individuals who fit my target user demographic.
In addition to interviews, I visited the curds&co store and spent some time wandering the items they sold in store, observing how the customers shopped and finally enjoying some tasty cheese.
I set up and ran 3 Card Sorts:
Open Sort with 100 items
This sort had the lowest completion as 100 items made it difficult to categorize for my users
Open Sort with 50 items
This sort efficient, I randomized the 50 items to be sorted and categorized by the users. This had more definitive categories mentioned.
Closed Sort with 60 items
This final sort was with categories mentioned most to see how users would place the misc. items in the product list.
SYNTHESIS & NAVIGATION
The research phase - brought me new insights in how the experience of cheese shopping and how they are labeled will determine the purchase rate.
After completing my interviews and card sorts I analyzed and highlighted the key findings:
-
Cheese is subjective based on the user and the situation they are purchasing the cheese
-
Shopping for cheese is a visual experience.
-
Those foodies who seek out new flavors want to enjoy the cheese they're exploring
-
They expect to view the cheese and are delighted to find what they can pair with the cheese
-
Recommendations are always welcome for selecting new flavors
I discovered that categorizing 100+ items sold in this store vary GREATLY with each user, through the different card sorts I found a variety of ways my users were moving the cards.
My initial 10 categories suggested from the card sorts:
-
Hard Cheese
-
Soft Cheese
-
Bread
-
Crackers
-
Spreads
-
Beverages
-
tools
-
Nuts
-
Meats
-
Olives, Pickles - misc.
After affinity mapping, the categories narrowed to 6:
-
Cheese
-
Pairings
-
Bread, Crackers
-
Sweets
-
Beverages
-
Serving Tools & Cutting Tools
DESIGN
I sketched out designs of what the shopping and checkout process would look like. My main focus was how to set up the layout of the shopping page and the checkout process.
During my sketching, I struggled with how to structure the shopping page to allow my findings of making recommendations for new cheeses as well as the other options available to the consumer.
I used these sketches for paper prototyping from which the checkout process was updated to reduce the number of clicks the user would go through. It was initially too complicated and caused frustration so the checkout page was simplified to be on one page.
After completing the sketches and paper prototypes, I turned to Axure where I began to build out my low-fidelity wireframes. I chose Axure as it would allow me to simulate the user's actions on a desktop.
SITE MAP
Through the research and synthesis I mapped out the existing website and added in where the Shop page would exist and how those categories would be organized. This site map wen through several iterations as I was re-arranging the website during my user tests.
USABILITY TESTING
I completed 5 usability tests looking to test:
-
the function of the site
-
the checkout process
-
the ease of finding the cheese I had selected for the purpose of the test.
My scenario was having my user be in the market for a new cheese for their upcoming dinner party. They rely on recommendations from the cheese mongers in the store for ideas before purchasing. The tasks focused on browsing, finding a cheese, adding to cart and completing the checkout process.
My major iterations focused on 2 pages as I received the most feedback from them during testing.
CHECKOUT PAGE ITERATIONS
Photos 1/2
I started using the + or - Icons but that caused confusion among testers so it changed to a 1. and 2. to identify the steps of the checkout and allow them to easily move through checkout
Photos 3/4
Users still wanted to be able to edit their order, so edit buttons were added to sections. I also adjusted the checkboxes to for an opt-in to emails to avoid dark patterns
Photos 5/6
Minor adjustments adding the review function of cart and information. I also focused on having the checkout button not be visible until the user completed the process
SHOPPING PAGE ITERATIONS
Photo 1
I made the shopping homepage standard for shop with very visual icons in mind as it was to use the current imagery on the existing site. The users did not like it as they did not know how to proceed or where to look for the task at hand.
Photo 2
I reduced the image sizes and made it easier for the different sections to be seen and showed the user they could scroll down the page. This still caused confusion among users so further iterations were made.
Photo 3
I added in an element for featured products to bring attention to the recommendations of cheese items for the users visiting the website.
Photo 4
I made the shop page home to cheese first then the user can access the menu to shop through different categories in the menu at the top of the page. As cheese was the predominate purpose of shopping on this site, I kept it front and center and the first option individuals could shop for. This reduced the errors I saw during the testing.
Lessons Learned
-
Iterations are never over and there will always be improvements made
-
Plan ahead for more usability tests with store owners and current store customers
Next Steps
-
Adjust the responsiveness of the website for the menu display
-
Work on further iterations in the shopping homepage
-
Work with Shop owners to improve the categorization
-
Continue to improve the checkout page - make it on one side so if the cart has additional items
-
Post Launch: Work towards weekly updates and blending the languages with what is used in the store.