case study

2017

NUTRE MEAL PLANS

ROLE

UI/UX

Web Design

Branding

Starting from scratch.

When Launchbyte approached me to help Nutre with their growing business, I was excited to start from the bones up. The three brothers were already cranking out fresh and premium meals but they needed a better way of reaching their customer base.  Taking in email orders and keeping manual logs of deliveries could only take them so far. They required a concise visual direction and an efficient shopping experience that would serve their Boston area audience.

Logo

Original

Keeping it fresh.

The original logo felt too cramped and didn’t coincide with the warm and modern touch the team was originally going for.

In nature, organic elements are not bound by jagged lines and right angles. Since Nutre’s business is centered around wholesome food, I wanted to carry that through to the face of the brand. In turn we are left with something more welcoming - sleek but not aggressive.

New

Typography

Main body text.
Geometric, classic and familiar.

Cormorant

Regular, Medium

Display font.
Envokes trust and reliability.

Dancing Script

Regular

Display font.
Sets a friendly and welcoming tone.

Colors

Soft neutrals paired with the vibrant oranges and greens create an eyecatching visual but also set a tone of natural calm and well-being.

#262019
(38,32,25)

#474644
(71,70,68)

#E6E1DC
(230,225,220)

#FAFAF7
(250,250,247)

#FF7700
(255,119,0)

#FF8B17
(255,139,23)

#FBAE3E
(251,174,62)

#84CC06
(132,204,6)

#B6E16C
(182,225,108)

Web Design

As a developing business, Nutre wanted a user friendly platform that was easy to navigate and that would showcase their own passions, food. I had to make sure the information architecture was properly laid out for their audience to keep it clear and concise. I focused the site on its two menu options and the Home and How It Works landing pages, displaying other relevant content in the footer.

Due to an approaching deadline, most of the ideation was done right in Sketch and evolved as the project moved forward and feedback was received from their team. A majority of the collaboration was done through Invision.

I was given a target persona of young to middle aged professionals who pursue nutritious food but don’t have the time to shop, prep, and do kitchen damage-control afterwards.  This gave me a focus to return to and was key while making decisions on the initial user flow, IA, branding, and site design.

UX

02

01

03

01

Delivery information is automatically updated in the header. If editing your menu, 5 options per meal must be selected before the user can continue. When completed, the greyed text changes color and the checkout button is shown to cue the user to save and continue. 

02

Filters populate as a user’s preferences are updated. These can be updated under settings or toggled while shopping to allow exploration of the menus. 

03

A pop-over cart system allows users to stay on their current page for easy browsing and facilitates item management and promo code insertion.

Guiding the user.

The navigation was kept straightforward and offers an instant point of contact via phone for the user. This saves the step of going to the Contact Us page and locating it there amongst other information.  Being an e-commerce site with various meal options I implemented a search feature right into the navigation bar to make finding specific meals easier.

Essential Order and Account information can be accessed quickly from any page.

2

OPTIONS

Nutre’s Complete Plan offers a set it and forget it package service for the week whereas choosing A La Carte offers maximum customizability. Whichever path the user chooses, they can still cater their menus for their own specific needs. By only presenting two main options it should limit confusion and guide them through to the next step. This information is expressed across the Home, How It Works, and Complete Plan landing pages to reduce questions about the service no matter where a person is on the site.

Personalizing the e-commerce experience.

One of Nutre’s core features lies behind the users selecting their preferences before accessing the menus. This allows for the plan and menu options to be catered from the initial viewing instead of the users having to filter their preferences each time.  It gives a sense of personalization since the user will then have a custom menu or plan built just for them.

Similar attention was brought to the remainder of the pages to ensure the user has an easy and enjoyable shopping expereince. Within a few clicks they can now personalize, browse and create a weekly meal subscription or order a few extra dishes for some of their busier days. The brand can continue to evolve and their audience now has a base to return to and a simpler way to achieve their nutritional goals.

For future iterations I would love to incorporate custom photography, usability testing and extensive market research. These factors have the potential to increase sales and further distinguish Nutre amongst other competing brands.