brand identity, iconography, UI/UX design + merchandise

AdaptLive

 

overview

AdaptLive partners with many fitness centers in the NYC-metro area, offering ready-to-go, packaged meals for active individuals heading home after a workout at the gym.

This locally sourced meal prep company adapts to their audience’s busy and health conscious lifestyle by offering these meals at certain fitness locations as well as through online subscription. The delivery of these fresh, healthy meals, prepared by professional chefs on staff are also planned out for a variety of diet types.

 

My role

As the Art Director and Designer, I strategized with the client on messaging, who they are and what their goals are. We worked together to determine the style of illustration, iconography, brand look and feel to represent who they are in a way that would capture the interest of their target audience.

I provided art direction for photography, retouched photos, created custom map illustrations, full suite of iconography, a responsive website, branded email templates and concepted designs for merchandise and apparel. In addition to the client, I worked with Butterjam and their development team, who built the AdaptLive website. Files were handed off to their developers and I worked with Butterjam to fine tune the website design and interactive elements.

 
 
 

Defining the identity

AdaptLive-PANTONE-352-C.jpg

the 3 W’s (Who, what + why)

  • Who is the target audience?

  • Who are the competitors?

  • What do you want your audience to associate with your brand?

  • What does AdaptLive offer that is unique to this industry?

  • Why would someone choose this meal prep service over other competitors?

  • What type of persona do you want your branding to convey?

 
Our target audience is comprised of busy individuals who are usually on-the-go, work long hours but make the effort to exercise and eat right. They do not have time to cook their own meals.
 

ideation and iteration

I explored different ways of illustrating the icons and maps to present options to the client. My preference is to start by brainstorming on paper before diving right into digital mockups. I personally find paper and pencil allows for ideas to flow more freely without worrying about pixel perfection. This allows for more ideas to be born because scribbles and all kinds of ideas are allowed. After a style was chosen, I made further iterations based on feedback.

 
 
 
 

Defining journey and user flow

 
 

Wireframes of pages and use cases

Multiple iterations of each page were mocked up for the client to strategically determine the content of each page. Attention was also given to optimizing the diet/allergen filtering process and the checkout experience.

 

goals

  • Make it feel easy to add (or remove) items from the cart

  • Using iconography, bring an element of fun when users search for their diet type or allergens

  • Provide an easy way for users to see the nutrition info of each meal without distracting them from completing their order

  • Offer a promo code for a period of time to draw new signups

  • Must be mobile-friendly and easy to use for people in a hurry

 

Iconography

The client requested a set of icons to represent different diet types and allergens. It serves as an essential part of the ordering process. Users click on the icons to find the right meals, suitable to their diet.

 

Email templates

I carried the branding and design system to emails so that each touchpoint of the user journey is consistent in styling.

 

Maps of the NYC-Metro area

A work in progress, my client envisioned making these maps interactive in the future, showing which areas AdaptLive delivers to.

 
 

Responsive website

The final design incorporates animation and micro-interactions to delight the user and capture interest. This mobile-friendly site makes ordering meals on-the-go, easy, friendly and convenient. On the menu, diet, allergen and nutrition info can be accessed quickly as overlays so that info can be quickly skimmed without having to wait for a new page load.

 
 
 

Micro-interactions

animation highlighting the delivery process

 

Add-to-cart button interactions

 

mobile checkout

I applied an input stepper because they are clear signifiers that are easy to use on mobile devices, making it easier for users to quickly add to (or remove from) their order.

 

Merchandise and apparel

Thinking ahead, we saw future potential in marketing the brand through merchandise that can be sold online or at their partner fitness center locations.
These are a few design concepts I created to market the AdaptLive brand.