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.
![SGEducators Tuition Portal Development - Animated Front Page Design and Digital Marketing Portfolio - SGEducators Tuition Hub - Animated Front Page](https://leowhouteng.com/wp-content/uploads/2017/09/Design-and-Digital-Marketing-PortfolioLazy-Load-Image-Leow-Hou-Teng.png)
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 App - Sample Interview Questions Chefbox Mobile App - Sample Interview Questions - Leow Hou Teng](https://leowhouteng.com/wp-content/uploads/2017/09/Design-and-Digital-Marketing-PortfolioLazy-Load-Image-Leow-Hou-Teng.png)
![Chefbox App - Affinity Mapping Chefbox Mobile App - Affinity Mapping - Leow Hou Teng](https://leowhouteng.com/wp-content/uploads/2017/09/Design-and-Digital-Marketing-PortfolioLazy-Load-Image-Leow-Hou-Teng.png)
![Chefbox App - User Persona Chefbox Mobile App - User Persona - Leow Hou Teng](https://leowhouteng.com/wp-content/uploads/2017/09/Design-and-Digital-Marketing-PortfolioLazy-Load-Image-Leow-Hou-Teng.png)
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 Chefbox App - Problem Statement Visual Communication - Leow Hou Teng](https://leowhouteng.com/wp-content/uploads/2017/09/Design-and-Digital-Marketing-PortfolioLazy-Load-Image-Leow-Hou-Teng.png)
![SGEducators Tuition Portal Development - Facebook Content Marketing Design and Digital Marketing Portfolio - SGEducators Tuition Portal Development - Facebook Content Marketing](https://leowhouteng.com/wp-content/uploads/2017/09/Design-and-Digital-Marketing-PortfolioLazy-Load-Image-Leow-Hou-Teng.png)
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 Chefbox App - Solution Statement Visual Communication - Leow Hou Teng](https://leowhouteng.com/wp-content/uploads/2017/09/Design-and-Digital-Marketing-PortfolioLazy-Load-Image-Leow-Hou-Teng.png)
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 Chefbox App - Problem Statement Visual Communication - Leow Hou Teng](https://leowhouteng.com/wp-content/uploads/2017/09/Design-and-Digital-Marketing-PortfolioLazy-Load-Image-Leow-Hou-Teng.png)
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.
![Chefbox App Logo on Black General Assembly Singapore - Chefbox App - Logo Black - Leow Hou Teng](https://leowhouteng.com/wp-content/uploads/2017/09/Design-and-Digital-Marketing-PortfolioLazy-Load-Image-Leow-Hou-Teng.png)
![Chefbox App Logo on White General Assembly Singapore - Chefbox App - Logo - Leow Hou Teng](https://leowhouteng.com/wp-content/uploads/2017/09/Design-and-Digital-Marketing-PortfolioLazy-Load-Image-Leow-Hou-Teng.png)
![Chefbox App Logo on Orange General Assembly Singapore - Chefbox App - Logo Orange - Leow Hou Teng](https://leowhouteng.com/wp-content/uploads/2017/09/Design-and-Digital-Marketing-PortfolioLazy-Load-Image-Leow-Hou-Teng.png)
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.
![Chefbox App - User Flow General Assembly Singapore - Chefbox App - User flow - Leow Hou Teng](https://leowhouteng.com/wp-content/uploads/2017/09/Design-and-Digital-Marketing-PortfolioLazy-Load-Image-Leow-Hou-Teng.png)
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.
![Chefbox App Recipe Visual Mock Up General Assembly Singapore - Chefbox App Recipe - Leow Hou Teng](https://leowhouteng.com/wp-content/uploads/2017/09/Design-and-Digital-Marketing-PortfolioLazy-Load-Image-Leow-Hou-Teng.png)
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.
![Chefbox App Recipe Visual Mock Up General Assembly Singapore - Chefbox App Recipe - Leow Hou Teng](https://leowhouteng.com/wp-content/uploads/2017/09/Design-and-Digital-Marketing-PortfolioLazy-Load-Image-Leow-Hou-Teng.png)
![Chefbox App Home Screen Visual Mock Up General Assembly Singapore - Chefbox App Home Screen - Leow Hou Teng](https://leowhouteng.com/wp-content/uploads/2017/09/Design-and-Digital-Marketing-PortfolioLazy-Load-Image-Leow-Hou-Teng.png)
![Chefbox App Order Screen General Assembly Singapore - Chefbox App Order Screen - Leow Hou Teng](https://leowhouteng.com/wp-content/uploads/2017/09/Design-and-Digital-Marketing-PortfolioLazy-Load-Image-Leow-Hou-Teng.png)
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.
![Chefbox Ready to Cook Meals Packaging Prototype General Assembly Singapore - Chefbox Ready to Cook Meals Packaging Prototype - Leow Hou Teng](https://leowhouteng.com/wp-content/uploads/2017/09/Design-and-Digital-Marketing-PortfolioLazy-Load-Image-Leow-Hou-Teng.png)
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.
![Chefbox App Recipe Visual Mock Up General Assembly Singapore - Chefbox App Recipe - Leow Hou Teng](https://leowhouteng.com/wp-content/uploads/2017/09/Design-and-Digital-Marketing-PortfolioLazy-Load-Image-Leow-Hou-Teng.png)
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!