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.

Design and Digital Marketing Portfolio - SGEducators Tuition Hub - Animated Front Page

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.

Chefbox Mobile App - Sample Interview Questions - Leow Hou Teng
Chefbox Mobile App - Affinity Mapping - Leow Hou Teng
Chefbox Mobile App - User Persona - Leow Hou Teng

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.

Chefbox App - Problem Statement Visual Communication - Leow Hou Teng
Design and Digital Marketing Portfolio - SGEducators Tuition Portal Development - Facebook Content Marketing

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.

Chefbox App - Solution Statement Visual Communication - Leow Hou Teng

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.

Chefbox App - Problem Statement Visual Communication - Leow Hou Teng

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.

General Assembly Singapore - Chefbox App - Logo Black - Leow Hou Teng
General Assembly Singapore - Chefbox App - Logo - Leow Hou Teng
General Assembly Singapore - Chefbox App - Logo Orange - Leow Hou Teng

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.

General Assembly Singapore - Chefbox App - User flow - Leow Hou Teng

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.

General Assembly Singapore - Chefbox App Recipe - Leow Hou Teng

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.

General Assembly Singapore - Chefbox App Recipe - Leow Hou Teng
General Assembly Singapore - Chefbox App Home Screen - Leow Hou Teng
General Assembly Singapore - Chefbox App Order Screen - Leow Hou Teng

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.

General Assembly Singapore - Chefbox Ready to Cook Meals Packaging Prototype - Leow Hou Teng

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.

General Assembly Singapore - Chefbox App Recipe - Leow Hou Teng

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!

Do drop me a message to let me know that you'll be featuring it on your site. Kindly attribute my images and add a 'follow' link to this page. Thank You!