Order Up! eCommerce is a component of the larger initiative MedKids. MedKids is an ongoing developing website project aimed at providing various types of medical and health education targeted at children users. Order Up! is a grocery shopping and delivery website designed to help families browse recipes and purchase ingredients that are safe for children to eat and even cook on their own. This platform promotes healthy food education for children within the family.
My Role
I collaborated with a cross-functional team, including the CEO, product manager, three developers, and a supply chain analyst, to design interfaces for the following features:
01
Ecommerce website integrating grocery store APIs for customers to purchase products.
02
Admin portal for administers to manage products and orders.
TIMELINE
Jan 2024 - Present
TOOL
Figma
SKILLS
User Flow
Wireframing
Prototyping
Design System
Design Documentation
01 Proposal & Identify Needs
Clarify Stakeholder Expectations
Stakeholder wanted a website for parent users to browse recipes and purchase ingredients for delivery to their homes, enabling their children to learn how to cook.
Company is developing a children medical and health education MedKids. She proposed to add an eCommerce website named it Order Up! eCommerce which can provide children recipes and ingredients that are safe from them to cook. During learning cooking, kids can also learn food health knowledge.
Persona
Identify User Needs and Validate Market Gap
Parents recognized the importance of early nutrition education and involving children in meal prep. The global shift to remote living and a heightened focus on health have made it more challenging for parents to provide nutritious meals. Busy families are increasingly relying on technology for daily needs, creating a market gap for a service that combines meal planning, grocery shopping, and educational content.
Given the current demands for health education and effective ways to engage children, now is the perfect time to introduce Order Up! to the market.
02 Main Pages
Started from Core Pages: Two Product List Page Styles
Develop these two pages initially to establish the core functionality of the website. With numerous e-commerce websites available, our product list page can serve as a key selling point.
01
Meal Menu Indexing Page
Customers browse the menu list, select items they’re interested in, view their ingredients, and further purchase them. They can also filter options based on allergy preferences.
This creates a user experience similar to browsing a cookbook, mimicking real-life scenarios.
02
Ingredients to Recipes Indexing Page
Customers select the ingredients they want and find recipes that include those ingredients for cooking.
Recognizing that every child has food preferences and families often have leftover ingredients in the fridge, I allowed parents to search for recipes based on both the ingredients they have on hand and those their kids want to eat.
Theme Color
Brand Order Up! with a Fashionable and Professional Touch
I selected dark green as the theme color because green is commonly associated with health products. The dark green shade adds a professional tone.
03 User Flow
Outline the User Flow for a Customer's First-Time Website Visit and Purchase
Zoom In
Click anywhere to minimize image.
We are not aiming to become a grocery vendor but rather a platform that offers parents a professional way to purchase kid-friendly recipes.
Customers arrive at the page, use the two indexing pages to select the recipe they wish to purchase and cook, then proceed through the checkout process and utilize the order tracking functionality.
The dev team planned to use APIs to extract and display product information from other grocery stores, such as Walmart. The API will also enable customers to place orders and track them.
I took API implementation into account while designing the user flow and annotated it with the relevant user flow steps.
More content is coming soon... I am working day and night to finish it up.
