Danny Keane - Product Designer
Introduction

Designing the digital future of corporate food delivery

Discover how I crafted a complete cohesive digital experience that positions Zesty as a market leader in the food-delivery space. Connecting their team, products and audience whilst providing a solid platform for future growth.

Introduction

Introduction

Zesty empowers companies to eat well, work happy and be awesome. Since launching in 2013 and raising over $20M in funding from top Silicon Valley investors they've been able to serve healthy, delicious food experiences from the best local restaurants to some of the most innovative companies in the world. 

During my time at Zesty I was responsible for all things creative. As the first employee and the only designer at the rapidly growing startup, there was always a lot of work to be done.

I was fortunate enough to have had complete ownership over the design direction for the company's presence both on and offline, which ultimately contributed to the success of the five-star in-office catering experience Zesty provides.

Laying the foundation

Laying the foundation

Having initially launched Zesty as a consumer service on iOS; which in fact was San Francisco’s first ever healthy food delivery app, the company looked very different.

Like most early stage startups, the company and brand was heavily built around a single product. Soon after releasing the iOS app we entered into Y-Combinator, during our time there we pivoted and changed our business model to focus on serving the B2B market

Being a small team we still needed to establish ourselves. We knew that a full re-brand was going to be a stretch, but we realized that now was the time to do it if we wanted to create a brand that is able to scale.

We began defining the company’s culture and core values which helped create a stronger connection with our audience, our products and our team, whilst also providing a solid platform for growth.

Defining the brand

Defining the brand

Working closely with the management team we began to define the brand storyboard. These sessions were highly crucial to the long term projections of the company. They helped establish the foundation for us to build upon, outlining the values the company believes in and the culture it should operate with.

Designing a mark to leave a long lasting impression

Designing a mark to leave a long lasting impression

Zesty's bigger-thinking mission is to improve the health of humanity. Ever since the start of the company, there has always been a heart-on-sleeve mentality, never afraid of going that extra mile to ensure the satisfaction of the customers and the restaurant partners they work with.

With this being a well-known trait within the company, I wanted to design a mark that embodied this, whilst still clearly communicating their passion for improving society's health and wellbeing.

 The concepts that I felt resonated well were the variations of heart and leaf shapes. I began to develop my ideas further by combining the two together to form a series of heart shaped leaf marks.  I felt this mark captured the most important elements of what the company stands for, and gives a sense of care and trust, whilst still being strong and unique.  After presenting these ideas to the team, getting feedback and iterating, the Zesty mark was starting to take shape.  I had personally written down a set of my own keywords that I used as a form of guidance when designing the final set of marks. These keywords were " love " " care " " health " and " freshness ". I felt that these were four strong terms that represented the company and the service it provides.  

The concepts that I felt resonated well were the variations of heart and leaf shapes. I began to develop my ideas further by combining the two together to form a series of heart shaped leaf marks.

I felt this mark captured the most important elements of what the company stands for, and gives a sense of care and trust, whilst still being strong and unique.

After presenting these ideas to the team, getting feedback and iterating, the Zesty mark was starting to take shape.

I had personally written down a set of my own keywords that I used as a form of guidance when designing the final set of marks. These keywords were "love" "care" "health" and "freshness". I felt that these were four strong terms that represented the company and the service it provides.  

Finding a suitable typography style to emulate feeling

Finding a suitable typography style to emulate feeling

Deciding on the right typeface was admittedly a little challenging. Choosing something too soft and playful to emulate the feeling of "love" and "care" could give off an impression of being inexperienced and unprofessional, or on the flip side a typeface that is too hard and ridged could mean we run the risk of losing the light and elegant feel.

So it was important to find the right balance to ensure we set the tone for the brand.

 After a number of revisions and countless experiments with different typeface styles. I narrowed down our choices to 3 strong contenders.  Above all I wanted the logo to feel timeless. Something that would be suitable for now and for the future versions of the company.

After a number of revisions and countless experiments with different typeface styles. I narrowed down our choices to 3 strong contenders.

Above all I wanted the logo to feel timeless. Something that would be suitable for now and for the future versions of the company.

Developing the color pallete

Developing the color pallete

The color palette I developed for Zesty was inspired by the name itself. I wanted something that was strong, lively, vibrant and fresh.

It was important that our colors clearly communicate our message without distracting from our primary content, which in Zesty's case was the fantastic food they serve.

Bringing the visual brand to life

Bringing the visual brand to life

With Zesty growing and maturing into more than just a digital product, it was important to create a sense of synergy across the board.

Zesty's well known for its in-office white-glove catering service. The product is real. It was more than the fancy well designed iPhone app we started with. You can live, taste and experience it in person. With this being the case, I wanted the digital visual presence of the brand to be felt in the same way.

I am a firm believer in that a brands presence should be felt across all mediums. With use of subtle motion and animations I was able to add a sense of life and personality to our digital elements, which help to create a more immersive digital user experience and give that sense of a well polished service from start to finish.

Crafting a cohesive visual design system that worked well across all mediums

Crafting a cohesive visual design system that worked well across all mediums

With the product being such a real life experience, creating a good first impression and keeping customer satisfaction was highly important. It meant thinking about everything from the delivery and setup of the food, to the style of menus and the catering staff - everything needed to be cohesive and inline with our brand. 

Meal cards: Tackling big data using design

Meal cards: Tackling big data using design

Every white-glove service featured a set of digitally printed meal cards that outline in detail what each dish served contains. These were generated at scale by a system that populated each card with the dish data from the Zesty database. These were printed each week and served daily at every client meal.

One of the biggest challenges I faced when designing these was creating a design system that could dynamically handle so much information. Each card needed to be digitally printed at scale with no further design or human interaction, so it was paramount that the card designs were robust. 

I rebuilt each card template in HTML/CSS in order to better interface with the internal tools that generated the cards. This allowed us more control over certain edge-case scenarios where different layouts needed to be used. 

Food photography style guide

Food photography style guide

To help capture an essence of Zesty's impressive in-office service and the fantastic restaurants they work with, having a portfolio of captivating food photography was a must.

I worked closely with a number of hand selected professional food photographers to develop the style guide for Zesty's food photography. 

We wanted to create a fresh, vibrant and realistic style that didn't require using any fake foods or elaborate food styling techniques, as we wanted each shot to capture a realistic expectation.

Designing the product that connected the employees to the food

Designing the product that connected the employees to the food

One of the biggest projects I was involved in at Zesty was the online meal portal. It's a product that all customers have access to and allows employees to see what meals are due to arrive in their office each day. 

This product is used by thousands of employees each day, and is a key component to the Zesty experience. It was the digital older brother to the printed meal cards served with every meal. So it was extremely important that this product was easy to use and made valuable dietary information easy to find.

 Working closely with the Food and Engineering teams I was able to get the relevant information needed to start to architect the UX.  Each portion of the interface was segmented and thought about to help craft the best experience possible.

Working closely with the Food and Engineering teams I was able to get the relevant information needed to start to architect the UX.

Each portion of the interface was segmented and thought about to help craft the best experience possible.

 To add a sense of life and personality to the product, I set out to craft an immersive user interface which would give a similar elegant experience to our white glove service.

To add a sense of life and personality to the product, I set out to craft an immersive user interface which would give a similar elegant experience to our white glove service.

 In order to help keep a consistent and organized development environment for our product, I put together a comprehensive UI style guide which made new feature requests and design sprints a breeze to manage.  It also meant that our future digital products were able to adopt a consistent style without too much time, effort and resources being wasted. 

In order to help keep a consistent and organized development environment for our product, I put together a comprehensive UI style guide which made new feature requests and design sprints a breeze to manage.

It also meant that our future digital products were able to adopt a consistent style without too much time, effort and resources being wasted. 

Creating the store-front to the world

Creating the store-front to the world

To complement the new branding and cohesive relationship between on and offline experiences the final thing left to do was create Zesty's store-front to the world. The front facing website and targeted landing pages were designed specifically for increasing sign up conversions. 

 To ensure that we were building the most efficient pages possible I led the UX and design phases of the project. Working closely with the Sales and Engineering teams, I was given important data and statistics on current user behavior, this was a big step in determining the best and most efficient approach for pages.   I presented multiple high fidelity wireframe concepts along with various different predicted user journeys and behaviors to help explain design decisions further.  This helped teams with less design knowledge visualize how the end product will start to come together and the certain ways people would interact with it.

To ensure that we were building the most efficient pages possible I led the UX and design phases of the project. Working closely with the Sales and Engineering teams, I was given important data and statistics on current user behavior, this was a big step in determining the best and most efficient approach for pages. 

I presented multiple high fidelity wireframe concepts along with various different predicted user journeys and behaviors to help explain design decisions further.

This helped teams with less design knowledge visualize how the end product will start to come together and the certain ways people would interact with it.

 As this was the public facing website, it was imperative that the tone and personality of the brand and its products were voiced in the right way.  I wanted to ensure that newer customers that would have little to no experience of what Zesty is, were given the best representation possible.

As this was the public facing website, it was imperative that the tone and personality of the brand and its products were voiced in the right way.

I wanted to ensure that newer customers that would have little to no experience of what Zesty is, were given the best representation possible.

 To help create consistency across our products and to move the needle on conversions, I also incorporated the use of animations in large content areas.   Breaking up heavy content into digestible blocks was a great way to add life to our pages, without distracting the user from the primary content. 

To help create consistency across our products and to move the needle on conversions, I also incorporated the use of animations in large content areas. 

Breaking up heavy content into digestible blocks was a great way to add life to our pages, without distracting the user from the primary content. 

Lights, camera, action!

To showcase the service Zesty provides, I co-shot and directed a corporate video (with help from my good friend Brandon Wells) that highlights the impact Zesty's product has on both restaurants and it's customers. 

The creation of this video was a really fun project to be a part of and that was an asset to the company. It was extremely well received by the team, investors, potential clients and restaurant partners.

Final words

Final words

I'm extremely proud to have had the opportunity to work with a company from the very beginning, and to have been pushed to my creative limits in the process.

Being the company's first hire and seeing it grow to just shy of 100 employees was a crazy and surreal experience, packed full with moments that I will never forget.

The visual identity has created a foundation for Zesty to stand proud as a market leader, it was an honor to have contributed to their success and I wish them a bright and exciting future ahead.