Elmendorf Baking Supplies
Bringing local shopping online
Elmendorf Baking Supplies is a local store in Cambridge, MA that sells a wide variety of specialty and high quality baking supplies. They have a small store front that includes a cafe with friendly staff, delicious coffee, and fresh-baked cookies & treats that are made in-house everyday. I was tasked with creating an organized, intuitive online store, and building the framework of a website that translates the warm atmosphere of the store into the online experience.
2 Weeks, 2020
Paper & Pen
Researcher, Information Architect, Designer
I started this project, like any other, by getting to know my user and the context with which they shop at Elmendorf, and places like it. I conducted interviews with the store owners, took a sample of 100 items and completed a series of card sorts with members to determine the most intuitive ways to organize the items. Finally, I compiled all that information into a design of a functional, mid-fidelity prototype and conducted usability tests to make sure the structure, interactions, and content of the site were optimal.
Getting to know you
My first task was to get to know the store, products, and customers at Elmendorf a bit better. I went to the store for an on-site meeting and had a lengthy interview with the owner. We spoke about who his customers were, and what they looked for in the store.
3 Types of Elmendorf Customers
The Enthusiastic New Baker
Inexperienced, but very enthusiastic
Keen to try new techniques & ingredients
Brought to baking after watching Great British Bake Off
The Seasoned All-Around Baker
Has been baking for decades
Loves classic, traditional recipes
Seeks out quality over novelty
The Intense Bread Baker
Exclusively bakes bread and yeasted doughs
Deeply interested in the chemistry behind baking
Talks about flour the way some people talk about wine
Each of these three customers is vital to Elmendorf's business, but they all use the store differently. The New Bakers are attracted to things like cake decorations & sprinkles. Seasoned Bakers are attracted to the high quality chocolate and specialty ingredients. And finally, the Bread Bakers almost exclusively shop from the locally sourced flours and 'chemistry' section. It's important that all three of these customers feel represented, and more importantly, can find what they're looking for.
Applying order to chaos
The next step in the process is working with users and determining the Information Architecture for the online store. In other words, what is the most intuitive way to organize items so that the users can find what they're looking for? Here's how I did it.
Step 1: Find Users
18 Screener Respondents
Using Google Forms and my own social networks, I sent out a brief screener to reach potential participants. Besides demographic information, the main screener question was "Have you shopped for baking supplies in the last year?". This broad question yielded 18 respondents.
Step 2: Find Products
When I did my store visit, I got a little carried away and took over 400 photos of products in the store. I narrowed this down to 101 items, based on feedback from the client, so users could create a meaningful card sort.
Step 3: Conduct Open Card Sorts
Once I selected the items to test, I went to my users and had them perform an Open Card Sort. For open sorts, I gave the participants 101 cards with the photo and name of one item on each card. I asked them to sort the cards into the most intuitive categories they could think of. They could have as many or as few categories as they wanted. After sorting, I asked them to provide the category labels themselves. I used Optimal Sort to digitize the sorts and analyze the data.
The number of Categories individuals provided ranged from 14-20. The average number of categories was 17.
All participants grouped items in to 2 main categories: Ingredients and Tools & Equipment.
The only category that posed ambiguity was sprinkles & decorating sugars. While they are consumed, they are for decoration, which some users associated with Tools.
6 Open Card Sorters
(5 live, 1 remote)
Step 4: Closed Card Sorts
The final step for deciding the Information Architecture was to run a series of closed card sorts with a separate set of users. With these card sorts, I used the same 101 items, and asked users to categorize them using the categories that I provided them based on the results of the open card sorts. I did this to validate the categories and the placement of the individual items within them.
Mix-Ins & Dried Fruit
Sprinkles & Edible Decoration
Sugars & Sweeteners
Leaveners & Baking Enhancers
Herbs, Spices & Flavorings
7 Closed Card Sorters
Tools & Equipment
Cake Decorating Tools
Piping Bags & Tips
Pie & Pastry Tools
General Kitchen Tools
Participants generally agreed on the categories and where items should be placed. Users agreed 100% on the placement of 66 out of 101 items in the sort.
In the Closed Sort, Baking Chocolate and Cocoa Powders were categorized separately, which caused disagreement. In the final hierarchy, I grouped them together as Chocolate.
Tools with multiple uses, such as rolling pins were sometimes categorized under specific headings, like Pie & Pastry Tools or Bread Tools.
The sub-categories for Ingredients tended to reflect physical properties of the items, whereas the Tools & Equipment sub-categories were grouped more by action and use. While this doesn't affect the Information Architecture, it is an important consideration for the messaging and branding.
Let's build an online store
Elmendorf's current website is a minimal, but well designed landing page with store, cafe, and class information, social and contact links. I decided to expand on the structure of the site by adding sections for Café, Events & Classes, and About Us. That way, the landing page could be oriented towards the store and imagery.
Let's start with the Sitemap. The sitemap gives the overall structure of all of the pages on the website, and how they relate to one another. I broke the image down into two pieces so it's easier to read. The first image below shows the Shop Online page, with the product categories shown.
You can see in this part of the sitemap that the main Shop Online navigation breaks down into the two main categories I mentioned above, Ingredients and Tools & Equipment. Each of the sub-categories is represented by a multi-stack, as there are filtered search results, and individual product pages for each item.
The second half of the sitemap shows the other top-level navigation elements that I have added on to the existing site, plus the checkout screens for placing an order.
The Home Page
I began by drawing sketches with paper and pencil to lay out the main elements of the home page. The elements I needed were the global navigation with the menu options for all of the X.0. levels in the sitemap, some kind of homepage content with a call to action, and a footer with contact information and social links. I created the first version of this page and continued to receive feedback and iterate on the design.
In this initial sketch, I envisioned a full bleed image carousel on the homepage with dropdown menus. This decision was based on my favorite site from the competitive analysis, King Arthur Flour. However, after conversations with other designers, I decided that it would be better to have a few more actionable pieces of content on the home page that would highlight certain items that made Elemendorf special, like their signature chocolate collection and the local flours they mill in house. I made the revision below.
I received positive feedback on this iteration, so I decided to bring this hand-drawn sketch into a digital space. See the first digital wireframe below that I created in Axure RP.
It wasn't until I created the digital wireframe that I realized the Elmendorf logo on the upper left corner was as large as it was, and competed visually with the header image. I decided in the following iteration to remove the centered header image to allow the three feature images to have prominence on the page.
Finally, after receiving feedback from users and design mentors, I arrived at the homepage that I wanted. Finally, I increased the fidelity slightly and added some copy to stand in for the featured items. This was the version that I used for my final prototype.
Before continuing on to the user flows and usability testing, I wanted to draw attention to the global navigation at the top of every page. The navigation evolved from a dropdown menu in the original sketches to a mega-menu in the final prototype.
Buy Me Some Goodies (please)
The final step in the process of getting the online store up and running for Elmendorf is conducting usability tests on the prototype I created. The usability tests are used to ascertain the functionality of the prototype. I provided 4 participants 3 different prompts and watched as they tried to complete the task on the site.
Prompt 1: Add an 8oz bag of milk chocolate to your cart.
As the user flow above suggests, there are many options available for finding chocolate and adding it to the cart. Most users bypassed at least a few possible screens to find a path that worked for them. The most common one, shown below is Home --> Shop Online --> Chocolate Listings --> Filtered Results --> Add to cart. Users almost always took advantage of the filtered results, and the "Add to Cart" button on that page. They rarely went to the Product Detail Page.
In the chocolate flow, the biggest pain point that users experienced was with the green confirmation message. In earlier iterations, the message was sometimes hidden because of where the user scrolled on the page. This was particularly true, if the user did not use the filter, and scrolled to the bottom of the page to find the item they needed. I iterated and arrived at the version you see above.
Prompt 2: Add a 2-lb bag of flour that was grown in Massachusetts to your cart.
The second prompt is similar to the first. The main difference is that all of the flours at Elmendorf are milled on site, and they can mill custom quantities up to 5 pounds. In this flow, the user needs to set the quantity and milling preferences before they can continue. In the example below, the user flow goes Home --> Flours (from the feature image) --> Flours Listings --> Redeemer Bread Wheat Product Page --> Set Qty & Prefs --> Add to Cart.
The major pain point on this user flow was with the 'Set Qty & Add to Cart' button, especially on the product listings page. Originally, the copy on the button just said "Add to Cart" but several users found it jarring when the pop-up appeared asking to set quantities and preferences, instead of just giving a confirmation, like in the chocolate flow. I simply changed the words on the button, and it tested much better.
Prompt 3: Complete the checkout process, and have your items shipped to you.
In this scenario, your name is Suzy Baker and you live in Candyland, Kansas
The final flow is the checkout process, when you're ready to purchase your items. There aren't as many possible paths with this as there were with the previous user flows. In the example below, the user visits the optional Cart Detail page before continuing with the checkout process. As mentioned above, Suzy Baker is having her order shipped to her in Candyland, KS.
During the usability tests, users had a pretty easy time navigating the process. One slight concern was that during the checkout process, there was originally no cart summary, which the user found stressful. I added that for future tests and it received positive feedback.
Next Steps & Final Thoughts
From Prototype to Reality
It's my sincere hope that the work I did in this case study will help the owners of Elmendorf bring their business online when they feel the time is right. There are some more fixes and iterations that need to happen, particularly around the ordering of elements in the cart flow, and some minor formatting changes. I look forward to working with Elmendorf and other local businesses to bring their brick & mortar stores online.