Spicely

For this case study, my team crafted an original spice blend brand, Spicely, as well as a site for it's digital commerce.

A Case Study

OVERVIEW

We believe that the ingredients available to the market, should reflect the vibrant diversity of the population, but to the lack of access to diverse spices in stores and online, consumers are often unable to cook authentic tasting foods. For our research, we explored the reasons behind why users use their products of choice and whether access to diverse spices is an actual issue within our given market.

Problem

Our Solution

To create authentic spice blends that cater to a wide and diverse market and that are easily accessible to consumers.

Project Scope

Image 2.1 - Spicely Project Scope
Image 2.1 - Spicely Project Scope

Mission Statement

With Spicely, we are committed to providing a diverse set of premium quality, authentic spice-blends that draw inspiration from cultures around the world.

Image 1.1. Scope of the project, including my role, the timeline, my team, and the tools we used throughout.

RESEARCH

For our qualitative research, we decided to conduct 5 contextual interviews (lasting one hour each) with participants from our target group. We gathered participants by creating a screening survey and distributing it on social media and our personal networks. After participants took the survey, we identified which participants qualified for the interview. We then held the interviews and identified gain points and pain points.

As for our quantitative research, we created a survey to see if there was even a need in the market for authentic cultural spices.

Pictured below is the research timeline.

Research Plan

Target Audience

Through the screening survey conducted on participants gathered through social media and our personal social networks, we were able to determine the demographics of our product's target audience:

  • Aged 24 – 60 years old

  • Individuals who live on their own or support themselves/their family

  • Cook their own meals for themselves and/or family

  • Cook at least 3 times a week

  • Apt to making and trying cultural dishes

Understanding our audience helped guide our research.

Image 3.1 - Spicely Research Timeline
Image 3.1 - Spicely Research Timeline

Qualitative Research Results

Starting with our quantitative research, we began by conducting interviews. We developed 12 screener questions to find our qualifying interviewees. The screener was created with Google Forms and then disseminated through social media sites and personal networking apps.

By the end of the screening process, we received 27 responses. After carefully reviewing the responses, we invited 5 participants to participate in a remote interview with our team. We used Microsoft Teams and Zoom to conduct the interviews, which lasted for one hour each. One interviewer and one note taker present for each interview session. Each member of our team had the opportunity to perform as an interviewer or a note-taker. With their verbal consent, we obtained permission to record and share their responses in our study.

From this portion of our research we determined the following:

  • There is a need for cultural spice blends in local United States markets. ​

  • Spices should be from respective indigenous regions for authenticity.​

  • Our product needs to be distributed by a trusted cultural vender/market as a starting point to build trust and assure authenticity.

Quantitative Research Results

To start our quantitative research process, we began thinking about our hypothesis and null hypothesis.

​​​​​​​Hypothesis: People who cook African, Asian, and Latin American cuisines have difficulty finding spice blends authentic to those of the native country of origin.

Null Hypothesis: People who cook African, Asian, and Latin American cuisines do not have difficulty finding spice blends authentic to of the native country of origin.

Research Analysis Conclusion

The conclusions drawn from our research are as follows:

  • There is a need for cultural spices/spice blends in local markets.

  • There is a need for recipes to use these spices for the discoverability of new dishes.

  • Spices should and will be from respective indigenous regions for authenticity.

  • Our product needs to be distributed by a trusted cultural vendor/market as a starting point to build trust and a badge of authenticity for the Spicely brand.

  • With our newfound research, we identified our user needs, pain points, and goals. Knowing this, we’re able to map out multiple UX solutions.

Competitive Analysis

After identifying the problem, we conducted a competitor analysis. Identifying competitors helped understand our competitor's strengths and weaknesses and further helped solidify our understanding of the niche we had in the market.

Direct Competitors

  • McCormick

  • Simply Organic

  • Savory Spice

Indirect Competitors

  • Huy Fong ​

  • Herdez

Image 2.1 - A timeline illustrating the stages of our research.

MIA's STORY

After conducting research created a user persona, Mia Xu. As a representation of our target consumer, Mia provided us with a viewpoint potential customers could take.

User Persona

Image 4.1 - Mia Xu User Persona
Image 4.1 - Mia Xu User Persona

User Empathy Map

After developing the user persona and reviewing our research, we were able to develop and empathy map. By understanding our user's pain points, we would be able to develop a meaningful product.

Image 4.1 - Mia Xu Empathy Map
Image 4.1 - Mia Xu Empathy Map

User Journey Map

Image 4.1 - Mia Xu Journey Map
Image 4.1 - Mia Xu Journey Map

Finally, we developed a journey map for Mia to document her experiences in trying to find and purchase authentic spice blends.

Image 3.1 - A breakdown of our User Persona, Mia Xu. The template shows her characteristics as well as the pains she experiences without access to our product and goals she hopes to achieve with our product.

Image 3.2 - An empathy map that illustrates what Mia says, sees, does, and feels regarding her situation.

Image 3.3 - A journey map illustrating the path Mia would take in a scenario we devised.

DESIGN

We brainstormed ideas for Spicely's logo and ultimately settled on a wordmark logo made of a slightly distorted Entog Regular font. The logo is orange (#f8b52a) with a white (#f9f9f9) shadow, and a red habenero pepper tittle.

Logo Ideation

Image 4.1 - Spicely Logo
Image 4.1 - Spicely Logo

Style Guide

Image 4.2 - Spicely Logo
Image 4.2 - Spicely Logo

We then developed a style guide which would dictate the aesthetics of our product. The colors chosen were eye-drop selected from a variety of spices around the world.

Sketches

After our research we were then tasked with developing an e-commerce site for our product. To do that we produced some paper sketches for different pages:

Image 4.2 - Website page sketches
Image 4.2 - Website page sketches

From here, we developed low fidelity wireframes:

Image 4.3 - Low fidelity wireframes
Image 4.3 - Low fidelity wireframes

Low Fidelity Wireframes

Information Architecture

The main navigation consists of our search, a link to our store locater, access to user favorites, user cart, and user profile. We utilized Jakob's law to model our navigation bar similar to those of our competitors.

Image 4.4 - Information Architecture
Image 4.4 - Information Architecture

User Flow

Our user flow focuses on the user being able to complete the checkout process. There are two flows for completing the check-out process: The first is through the Products page and the other is through the recipe page. Our focus was the first check-out option as it is the most common way users check out.

Image 4.5 - User Flow
Image 4.5 - User Flow

Image 4.1 - The brand logo for "Spicely", our spice product.

Image 4.2 - Spicely's style guide

Image 4.3 - Sketches made for the different pages of our e-commerce site.

Image 4.4 - Low fidedlity wireframes for the Spicely e-commerce site.

Image 4.5 - The information architecture structure for the Spicely site.

Image 4.6 - The user flow model for the Spicely site.

USABILITY TESTING & FINAL PROTOTYPE

Insight

Iterations

While the results were overall quite promising, there was still room for improvement. We generated a list of items that we needed to fix based on user feedback.

  • Headers could use some color

  • "Our Story" page is too text heavy

  • Spacing on the "Product" page too much

  • "Home" page carousel is too fast

  • Usage of plane icon in "Store Locater" map is confusing

User Quotes

Image 5.3 - Spicely Iteration (Before)
Image 5.3 - Spicely Iteration (Before)

After completing our first high-fidelity, we did a round of usability testing. The following were the tasks users had to complete as well as the results from the testing.

​​​​​​​TASKS

  • Task #1: This is your first time on spicely.com. Look into Spicely's history.

  • Task #2: You want to try to cook a new dish called 'Chimichurri Carne Asada Tacos'. Locate on this website where you would go to find instructions to cook this new dish

  • Task #3: Find the closest store near you that sells Spicely products.

  • Task #4: Purchase the Ras El Hanout 2.2 oz Spice Blend.

​​​​​​​:

RESULTS

  • Task #1: Took about 1 minute on average to complete. Many users looked on the home page but eventually looked at the “Our Story” page.

  • Task #2: Took about 15 secs on average to complete.

  • Task #3: Took less than 10 seconds on average to complete.

  • Task #4: Took about 1-2 minutes to complete going from product discovery to product purchase.

FINDINGS

  • 100% Success rate of completing tasks

  • 100% Success rate of completing tasks in under 5 mins

User Feedback

After receiving feedback, we implemented these changes. Below is an example:

Image 5.1 - User Quote
Image 5.1 - User Quote
Image 5.2 - User Quote
Image 5.2 - User Quote
Image 5.4 - Spicely Iteration (Before)
Image 5.4 - Spicely Iteration (Before)

Final Prototype

Click here to view the final prototype.

Image 1.1 - Image of Spicely e-commerce website prototype
Image 1.1 - Image of Spicely e-commerce website prototype

Image 5.1 - Quotes from tested users that express their reactions to the site. One user found the site to be intuitive and another really recommended the site for its sleek layout and recipe catalogue.

Image 5.2 - An example of a change made to the site after receiving user feedback: a paragraph was shortened to be more succinct.

CONCLUSION

Overview

There are still many features that we aim to add on future versions of the site. These include but aren’t limited to:

  • Ability to "favorite" specific recipes and products

  • User "Favorites" page where user can access previously favorited recipes and products

  • User Profile page

By researching our user-base and empathizing with their needs and wants, we were able to create an MVP that allows users to purchase Spicely products. Furthermore, conducting usability studies for our prototype to test the functionality of our website allowed us to receive feedback on areas in need of improvement. As for what's next, we will continue to improve our prototype and include features that improve functionality and user experience.

Next Steps