LOADING CLOSE

The Problem

Create a Multilingual Meal Prep Delivery Service

Fitnity is a startup meal prep delivery service servicing Taiwan both in English and Mandarin Chinese. A full wire-frame was created before creating the eCommerce website which was designed with a mobile first experience. The Client and I wanted the experience to run like a native mobile app, but also have an immersive desktop experience.

Cross Cultural UI/UX Across Multiple Devices

We had to consider the impact of how the UI would work with both languages and cultures, so careful iconography and design cues were created to ensure that regardless of what language you read, the user could understand how to use website. Since our target audience is both locals and western expats, it was crucial we created a design that translates well in both Eastern and Western culture.

Technology

WooCommerce, WordPress, jQuery, Angular, Bootstrap

Services:

UI UX Design, Interaction Design, Front End Development

Team:

Myself and 1 Woocommerce Developer

Customer Insights (Personas)

Delivered & Ready to Eat

The primary customers are busy working professionals who don’t have time to meal plan and spend hours cooking

language_ui_ux_cross_cultural

Language Barriers

Customers speak/read both English and Traditional Chinese, or only one or the other.

fitness_icon

Fitness & Good Food

Customers are dedicated to improving their fitness without compromising eating food they’ll genuinely love

First High Fidelity Prototype (Adobe XD)

We first came up with a basic set of features for ordering and designed the experience around ordering individual meals and snacks shipped directly to customers. The design was meant to be very clean and minimal to avoid confusing customers.

Redesign Due to Shipping Restrictions 

We needed to re-think how users will order food due to shipping costs and restrictions. So after the first design was tested and scrapped, my client and I created a new ordering system which allowed bulk meal ordering with an intuitive experience.

The food delivery truck is designed to hold refrigerated packages, so we had to move from single ordering to a bulk box order system. By classifying each individual dish in WooCommerce as part of a bulk box, we were able to accomplish this.

Version 2.0 UI Kit to Minimize Language Dependance

By using a combination of color, icons, and numbers, I was able to design a flat, clean, UI Kit that would translate well in both languages, and minimize the user’s reliance on reading the target language should the translation selector fail.

Simple Yet Complex Ordering On All Devices

Without providing tons of written text cues, we created a solution which could allow users to order both single portion size meal boxes (Lean vs Gainz sizes) or a combination of both portion sizes. It was integral that it worked with the least steps possible to go from initial selection to checkout.

WooCommerce limitations and design feasibility needed to be considered to ensure that both the user and client would understand what the order actually was. I worked with my back end developer to integrate WooCommerce hooks and custom jQuery to implement this dynamic ordering system.

leanbox

Mobile Combination Box Ordering 

Reduce Shopping Confusion Regardless of Language

It was crucial that the design and functions translated well in both English and Chinese.  The typography, spacing, and user’s psychology (will both expats and locals interact with the website the same? ) was the top priority when designing it.

Results

 Within one week of launch my client made $2,500 USD and is averaging $150 per day which is above average in the Asian market as a startup food service.