top of page

The Gilded Crumb

Creating a luxury food shopping experience

Web Application

The Gilded Crumb cover.png

Introduction

Project overview

Project Background

This project was a part of my UI/UX certification at Springboard. I was given the exciting opportunity to work for an industry stakeholder alongside a team of two additional members. Our goal was to conceptualize and craft a gourmet food e-commerce platform that combined sophistication and user friendliness.

Objective:

  • Create a luxurious food e-commerce platform.

Timeline:

  • 4 weeks

Tools:

  • Figma

  • Google Forms + Google Docs

  • Pen + paper

Roles:

  • UI/UX Designers: Chaya Rivkin, Blaise Kepple, Michelle Lee.

  • Stakeholder: Chris Fernando

My Contribution:

  • Team and Stakeholder Collaboration

  •  User Research, Information Architecture

  • User Flows

  • Wireframes

  • Branding

  • Visual Design

  • Prototyping

  • Usability Testing

Challenges:

  • Creating an interface entirely from scratch, without any preexisting research or style guide.

  • First experience working directly with a real-world stakeholder. 

The Problem

The Gilded Crumb lacks an intuitive platform for users to explore and understand the range of top-notch ingredients they offer, hindering potential customers from effectively engaging with their products and inhibiting the business's ability to attract and retain culinary enthusiasts.

The Solution

Create an online experience that caters to the unique needs of culinary enthusiasts, allowing them to easily explore and purchase premium ingredients.

The Result

Explore Globally

Users can navigate the site's offerings using a world map, discovering ingredients based on their geographical region.

Ingredient Deep Dive

Users can view thorough and detailed information about products.

Personalize Your Picks

Users can filter and sort ingredients based
on their unique preferences and requirements.

Swift Purchasing

Users can add products to their cart and proceed through a quick checkout process.

The Process

Beginning stages

Getting Started

The project began with meeting the team! I joined a kickoff call with my team members and our stakeholder to introduce ourselves and discuss our goals for the next four weeks. Our stakeholder provided a project brief, where he outlined the demographics of the Gilded Crumb’s users and his overall vision for the site.

Hitting a Hurdle

Post-meeting, our team realized that the stakeholder held a strong vision for the visual design, but we lacked sufficient research to support it at that point. This meant that we would need to invest a chunk of our time in the research phase of the project. Considering the tight timeline, we adjusted some ambitious features, such as a recipe blog on the site and 360-degree product photos, into a realistic project plan. After stakeholder approval, we got to work!

Empathize

Gaining a deeper understanding of our users

Empathize

Define

Ideate

Prototype

Test

Heuristic Analysis

To begin, we conducted a heuristic analysis where each team member researched two competitors that our stakeholder provided us with in the project brief. We analyzed how easily users can look for a product, add it to the cart, and checkout on these sites.

image-removebg-preview-23.png
image-removebg-preview-21.png
image-removebg-preview-18.png
image-removebg-preview-20.png
image-removebg-preview-22.png
markys.jpeg

Competitors

Key Findings

  • Most sites had cluttered and overwhelming navigation bars.

  • Most sites did not share sufficient product information.

  • Most sites didn’t seem to have adequate filter options for diet, price point, etc.

  • Customer feedback features, such as Q&A and reviews, were lacking on most sites.

  • The language used throughout most of the sites felt easy to understand.

  • The interface aesthetics varied, with some sites being visually appealing and others falling short.

User Interviews

As our second research approach, we conducted user interviews to enhance understanding of our audience and pinpoint their main challenges. We each conducted two user interviews, totaling six sessions. To ensure participants matched the Gilded Crumb's demographics, we sent out a screener survey before confirming the interviewees. Then, we interviewed each of them for 30 minutes via Zoom. During these interviews, we inquired about users' current experiences shopping for gourmet foods online. 

Synthesizing the Info

We organized the information we collected through interviews into affinity maps to identify our users main paint points and any other common themes.

Quality.png

"It's a worthwhile investment if I know I'm getting high quality for the price."

"Each ingredient is important to how somethings tastes."

"

- User Interviewees

Key Findings

  • All of our customers will pay a high price if they know that the product is high quality.

  • Many of our customers are mindful of their diet and need to see product information and certifications clearly.

  • Many of our customers are interested in the ingredients they purchase and enjoy the story behind each flavor as part of the experience.

Arousing Empathy

To truly understand our users' experiences, we divided them into 3 target user groups and created an empathy map for each of them.

Empathy map #1.png

Define

Identifying our users

User Personas

First, we created three different personas for each of our users so that we could focus on crafting solutions that would meet their lifestyles and pain points.

Persona 1.png

Honing In

After that, we came up with three how-might-we questions. These are open-ended questions that prompted us to eventually approach the solution with open-minded thinking.

  • How might we design an intuitive user experience with advanced search options that effortlessly enables users to access the information they seek?  

  • How might we ensure that our users feel an exceptional sense of luxury through engaging storytelling elements about the quality, origin, and uniqueness behind food items?  

  • How might we encourage users to explore different foods and purchase them in the most efficient way possible? 

Deciding on the MVP

With our how-might-we questions in mind, we determined the most important features for the initial design phase, also known as the MVP. We grouped the rest of the information we collected during research for The Gilded Crumb's next release.

User Stories.jpg

Key Features

  • An immersive landing page to pull users in.

  • High-definition photos, with the ability to zoom in for a detailed product understanding.

  • The option to explore products through a world map to give the site an experiential feel.

  • A product catalog page filled with beautiful and realistic product images.

  • Filter and sort options so that users can tailor their search to their needs.

  • Access to thorough product information for each item so that users can make informed choices.

  • A quick checkout process for minimal frustration.

Ideate

Mapping out the interface structure

Information Architecture

After deciding on the most important features, we created a sitemap for the purpose of structuring the website's information in a logical order.

Sitemap.jpg

Next, we created user flows to map out the steps users would need to take to achieve their goals on the site. We developed paths for three ways users can find products: through the top navigation bar, using the search function, or exploring the world map.

Flow #2.png
Flow #1.png
Flow #3.png

Sketches

Then, we sketched out the user flows. Each of us took charge of one flow and created a visual representation. It was cool to see all of our research finally come to life!

User Flow 1.jpg
User Flow 3-1.jpg
User Flow 3.jpg

Branding

Next, we crafted a mood board to establish the overall look and feel of our site. We initially designed both a dark and a light moldboard to offer our stakeholder two different site vibes. He chose the dark one because it conveyed a sense of luxury and instantly provided a more experiential feel, a decision we agreed with.

Dark Moodboard.png

We also created a style guide that included the site's typography, colors, icons, photos, and a temporary logo. We started off with a simple guide, which we continued to expand as we developed the high-fidelity designs. 

Style Guide.png
Product images.png

Prototype

Creating the high-fidelity designs

Designing the Hi-Fi's

With all the building blocks in order, we jumped into designing the high-fidelity prototype! Splitting up the tasks, one teammate tackled the landing and explore pages, another did the product catalog and checkout pages, and I took on the product details pages, footer, and top navigation bar. Here's a glimpse at what we came up with: 

Landing Page ⬇️

Landing Page.png

Product Catalog Page ⬇️

Product Catalog - Spain.png

Shopping Cart ⬇️

Shopping Cart.png

Explore Page ⬇️

Explore Map Page.png

Product Details Page ⬇️

sweet paprika.png

Checkout Page ⬇️

Shipping.png

Test

Analyzing the prototype with our users

Usability Testing

At the start of the project, we weren’t sure if we would reach this stage, but we managed to squeeze in one round of testing. By sending out a screener survey, we brought in 3 participants and conducted 30-minute testing sessions via Zoom. The aim of this test was to evaluate users' ease of use and understanding of the screens we created.

Key Findings

  • 3/3 participants were able to complete 80% of the tasks with ease!

  • 2/3 participants had trouble navigating the world map. They wanted more information to clarify what can be done on the map and what it can be used for. Participants also wanted it to be more interactive with image or text hints when they hovered over each area.  Additionally, they anticipated more engagement upon clicking a country, expecting a new page to appear.

  • 2/3 participants didn't love the video on the landing page. One participant found the content distracting and indicated a preference for videos that solely feature products and food instead of people. Another participant thought the compiled clips were random.

  • During checkout, 1/3 participants wanted to see the shipping cost details next to each shipping option, rather than only seeing them reflected in the total.

  • 1/3 participants requested easier access to customer service.

Iterating the Map

Although we didn't have much time for iterations, we quickly tweaked the world map page to make navigation clearer for users. We noticed that users had a hard time navigating this page during testing, so we made subtle adjustments for better understanding. Below are those changes.
Other iterations will have to patiently await the next release!

After testing, we presented our final work to the stakeholder. We kept him in the loop by presenting our findings every week throughout the project, but now that everything was wrapped up, we shared the prototype and testing results. He was really satisfied with our work, and it was rewarding to see that :)

Explore Map Page.png

Before

⬇️

Explore Map Page.png

 1 

 2 

After

Implemented breadcrumbs to enhance user navigation awareness.
Updated the page title for a clearer understanding of the map's purpose and functionalities.

 1 

 2 

Spain.png

⬇️

Spain.png

 3 

 4 

 5 

Before

 3 

 4 

 5 

After

  Added the country name on the location pin to warn users about the specific country they're about to click on.
 Placed the country name above the products, not as the page title, so that users can easily make the
connection that the products are all from a specific origin. This also ensures that the page title always at the top, serving as a constant reminder of the page's purpose.
Made the product cards consistent with the rest of the product cards on the site.

Presenting our Work

At last, we presented the final product to the stakeholder. We shared the prototype, discussed testing findings and potential changes / additions that can be considered  for the next release based on the testing feedback. He was really satisfied with our work, and it was rewarding to see that :)

Final Design

Further Iterations to Consider

As a team, we compiled a list of potential iterations for The Gilded Crumb, drawing inspiration from user feedback and stakeholder-requested features that were beyond the scope of this round.

  • Continue testing and revising the map page.

  • Refine the checkout process with additional information, a more consistent design, and the ability for users to save their information.

  • Implement a page for the user's personal account.

  • ​Enhance and test the interactivity of the reviews page, specifically the 'write a review' process.

  • Develop pages for the footer links such as 'about' and 'terms + conditions.'

  • Establish a prominent customer service section once the brand develops that aspect.

  • Create a more cohesive landing page video.

  • Add real products and product information to the site.

  • Create the recipe blog aspect of the site.

Closing Thoughts

I absolutely loved working on this project; it was definitely my favorite one to date! Collaborating with a team was super fun, and I gained such valuable insights from both of my teammates along the way. Until now, I had only worked on solo projects, so being able to share the workload, capitalize on our individual strengths, and exchange ideas felt like a breath of fresh air. Additionally, working on the initial phases of a real-world project with a stakeholder was a great experience and provided such valuable lessons in effective stakeholder communication.

Thanks for following along  :)

Got questions about this project? Feel free to contact me.

bottom of page