Chefbox App
UI/UX & Branding
Chefbox is a mobile app concept that combines recipes with groceries delivery. Users can place an order for Ready-to-Cook meal boxes, and follow a step-by-step recipe to prepare their own meals. The project spans a period of 4-days and includes conducting of user interviews, creating personas, scenarios, and usability testings. It is completed as part of week 1 project submission at General Assembly Singapore, User Experience Design Immersive (UXDI) programme. For more details on the research project, check out the documentation on Medium or test the high-fidelity prototype on InVision, accessible via the links below.
User Research
Gathering insights from users
At the start of the project, I conducted user interviews with 3 potential users of the mobile app. The insights gathered were arranged in an affinity map. A potential user, his habits and pain points were recorded in a user persona.
The Problem
Defining the needs and pain points
While most users prefer to shop at a supermarket, rather than with a groceries app, often, they find that they are unable to get the right ingredients for recipes at their neighbourhood groceries store.
The Solution
Solving the problems with a digital solution
By integrating recipes with online groceries shopping on a mobile app, users can place an order for Ready-to-Cook meal boxes, and follow step-by-step instructions to cook the meals.
Storyboard
Creating a scenario of how the app will be used
I created a scenario on a storyboard to illustrate how I foresee a user will interact with the Chefbox app. The scenario describes the environment (supermarket, home, or on the go), the potential features of the app, and the joy derived from those features.
The Logo
Chef in a Box
The Chefbox App logo was conceptualised as a chef hidden within the logotype. The chef’s hat doubles as a box – hence ‘Chefbox’. This playful logo is reflective of the brand experience, that of a fun and fresh approach to cooking and groceries shopping.
User Flow
Step-by-step interaction on app for task completion
I sketched out a user flow chart to illustrate how a user interacts with the app. It depicts how he/she perform tasks on the app, from searching for a recipe to placing an order for the groceries.
Low-Fidelity Prototype
Low-fidelity paper sketch of mobile app
I sketched out a wireframe of the app using paper and pen to use it as a low-fidelity prototype for user testing. Paper prototypes are quicker to execute and users will be more open in providing feedback about the user flow.
High-Fidelity Prototype
Interactive mock-up on InVision
After conducting user testing with a low-fidelity prototype, I iterated the changes on a high-fidelity digital mockup on InVision. The images below are visual mockups of the app after collecting feedback from a presentation.
Product Prototype
Product visual mockup
I did a visual mockup of the branding on an image to help people to visualise how the product will be like. The groceries, condiments, and spices will be individually packed to ensure that food is fresh and safe.
Project Feature
Project featured on other websites
The project was documented on Medium and was later featured on Muzli. Muzli is a design publication by InVision, that has over 167K followers. To date, the project has received 1.1K likes on Muzli.
Project Details
— School
General Assembly Singapore
— Project Date
Nov 2017
— UI/ UX Design
Leow Hou Teng
— Special Thanks
Nie Zhen Zhi
Wilson Chew
— Project Category
Branding, UI/UX
— Deliverables
Brand identity, Mobile App interactive prototype
Feature this Project
Share this project on social media, or on a blog post!