Stem Kitchen
E-commerce website for plant based food delivery service.
Project Scope:
E-commerce website design
Role:
UX Designer (Research, Visual Design, Interaction Design, Usability Testing)
Toolkit:
Figma/Figjam, Calendly, Zoom
Stem Kitchen had a business model and a few clients but wanted to grow and make a more efficient way for customers to choose a meal plan and order. In order to really scale their business they needed a website.
How do you scale a business without a website for customers to order?
The Problem
The Solution
Create a website for customers to find meal plans and order easily
The most important aspects of the website would be allowing customers to view all products, get all the necessary details and information about the product, and a simple and easy way to place an order.
Research
Before jumping to design, I wanted to understand the business
The Business
The client and I thoroughly discussed Stem Kitchen's offerings, their ordering system, and the essential customer information required to place an order. Understanding both the current and future goals of the business allowed me to design a website that meets the needs of users and the client while streamlining operations for greater efficiency and ease.
After exploring the client's inspirations and favorite brands, we identified some overlapping themes. The client loved colorful, vibrant, loud, whimsical, and fun design. To truly capture the essence of Stem Kitchen, I created a mood board that embodied these elements.
Keeping this mood board accessible throughout my design process ensured that these themes were consistently integrated into the final design.
Fun, whimsical, and colorful
Finding Inpsiration
Ideation
Prioritize simplifying the current order system
Task Flows
Stem Kitchen was using a typeform as their order system since they needed to gather a lot of information from the client including cadence, preferences, dietary restrictions, etc. After reviewing the typeform it was obvious that their order system needed to be simplified with fewer steps for the user.
Risks of keeping the current order form
users leaving due to too many questions and form sections
external order form will complicate orders for the client and lead to mistakes
Could be distracting and a barrier for completing the purchase
Order System using external form
Integrated ordering system
Design
Mid Fidelity Wireframes
Focusing on the structure and content of the website
Given the numerous important elements and essential information that needed to be easily accessible to users, I prioritized the website's structure and content before incorporating UI inspiration.
The client and I collaborated closely to ensure that the language was clear, easy to follow, and authentically represented Stem Kitchen
Primary Colors
Secondary Color
CTA Color
Neutrals
Figma file with comments from stakeholder meetings
Hi Fidelity Wireframes
Sharpening the design and incorporating UI elements
Incorporating the color green was essential, as Stem Kitchen is a plant-based meal service, and environmental consciousness is a core aspect of its origin.
Adding purple as a secondary color conveyed femininity, highlighting the fact that this is a woman-owned business, and also brought a sense of creativity, reflecting the care put into each dish.
For the CTA elements, we wanted a color that was bright, loud, and fun. Inspired by one of the client’s favorite brands, Graza, we chose a vibrant lime green.
Gallery to get user excited by the food and options Stem Kitchen offers
Explanation on how the service works as the first text section user sees
Easy and visual way to see the different plan options they offer
Section to explain the benefits of a plant based meal plan
Signature plans with short explanations and a CTA button to learn more
Section providing user with some background into the founder and chef of Stem Kitchen
The home page was the most crucial part of the website, designed to clearly articulate the service's purpose and functionality. It provided essential information, enabling users to understand the value proposition and easily navigate to the ordering process, driving engagement and conversions.
Key Focus: Crafting an Effective Home Page
Home Page
Testimonial section
FAQ section
Section explaining the custom and catering plans which don’t fall under signature offerings
Services, including signature programs, custom plan, and catering
I developed an ordering system with three main sections: basic contact information, meal selection, and payment details.
By streamlining the process and creating a clear, user-friendly path, we ensured that users could easily complete their purchases.