Back to home

My Muscle Chef App Design

The Ask

My Muscle Chef is a web-based meal delivery service from Australia, targeting people who have an active lifestyle, and have little time to cook. They needed a mobile app to expand the reach and provide more convenience to their regular customers.

My Role

As a remote UX/UI designer, my role is to lead the client through the process of discover, define and finally deliver a solution that answers to the user needs. (Wireframe: 2.5weeks | UI 3.5weeks)

The DISCOVERY

I started by designing a set of interview questions for the client to answer, this also serves as an structured discussion points for the kickoff meeting. The goal is to understand the company, the mission, the product offering, the business problem, the users, the competitors etc, in order to form a strategic direction for the mobile app design.

This form of discovery session is unique to the remote nature of the collaboration. It's certainly not the best way, but under the circumstances, the most efficient way to get the critical questions answered within client's expected timeline. The kickoff meeting gave me a clear idea of the project backgrounds, resources, current states, expectations etc, but it wasn’t enough to gather all the information I needed, especially regarding the user needs. 

So I did my own heuristic testing, and scraped the internet to gather user reviews, filmed my friends for first-timer user testing. I also did some competitor research. I validated the findings with the client, and discussed which are the problems to fix and which customer needs we want to address in the new mobile design.

The problems

For the first timers, they have difficulty grasp the concept of meal planing and delivery in bulk, many of them think the meals are ordered delivered individually, or ordered in bulk but delivered daily. We need to make sure the new experience is clear on explaining the concept.

For regular customers, they want an easy and quick way to check out, without re-doing the planning every week.

The experience

Planning a week’s meal ahead is not an easy task for most of the people, let along calculation how much calories to take in every meal. when designing the app, the focus is to minimise the effort of the user as much as possible while given enough guidance to help the users to make decisions easier, faster, and stress-free.

Lowering the barrier for trail

  • Putting the goal focused product offerings first, as this is the easiest way to decide and check out.
  • Followed by an option for those who like to take total control of the dietary needs and taste palette.
  • For total beginners, they can find out their dietary needs by Take a measurement.
  • Minimise the mental effort of meal planing by automatically caculating the calories and price.
  • Making sense of the numbers by providing benchmark numbers according to user's fitness level or goals.

UI design - the path to simplicity

With the essential information laid out in the wireframes, the focus of the design is to further simplify the experience and make it enjoyable.here is an example of how the design has evolved from the wireframe.

  • Left: Wireframe
  • Right: Exploration 1, organise the information into sections, Progressively display the information, so that users can focus on what they are looking for, one thing at a time.
  • Exploration 2, divide the big task into smaller and easier steps, and use interactions to smoothly link them together.
  • Create unique icons that resemble the actual product, also gives enough emphasis and details to the design.

patterns & illustrations

The comical style illustration derives from, and works coherently with the style of the logo. Together they bring out a strong brand personality that is

fun, friendly, and reliable.

Documentations

To ensure easy on boarding of collaborating designers and developers, it’s critical to document the usage and rules in a concise and comprehensive way. To me, that also means, less is more.

For this project, I used the final sketch file to create a clean library (a single source of truth) for designers and developers to access and update. From there, I exported an online version of the entire user flow that's visible for the entire team, an invision prototype for developers to inspect and get any assets he needs, also an online version of the style guide for team members who don’t have the Sketch app on their computer.

Other Projects

Bring the focus back the to customer's needs with Citibank

Citigold Portfolio Review
Aug 2015 Art Direction, UI

A Nutrition app for those who need it most

McCormick Asia website creation
2016 UX UI