Designing for Piply: Case Study

Over the past 3 months, I’ve been working closely with the founders of a new, healthy dinner on-demand service in Dublin City Centre. It has been an amazing project to have been involved in and I thought it would be good idea to do a case study of my experience and process of working with Piply.


The Company & product

Piply is a new, healthy food company based in Dublin City Centre. Their new web app enables users to create an order of delicious and nutritious, chef crafted meals and have it delivered to their home, work or whatever your location may be (currently serving D2, D6 & D8 initially).

I was approached by Alexander Gartland (Co Founder) in March 2016 and we began discussing what the project was all about; what the MVP was; and had a high level discussion on his vision for the visual direction of Piply. After our meetings it’s safe to say I was hooked and wanted to be a part of the project.

Being able to design a product which was going to bring such nutritious and healthy food to people was a massive inspiration for me. Another motivational factor was Alex’s passion for wanting to make this company a success. This was his baby and I wanted nothing but success for him and for all the guys.

An important factor to to note, and something that really got me excited, was how much Alex and his cofounders care about design. Design is now at the forefront of all companies, big and small, and there’s an increasing prioritisation of design, so I was delighted to be put in a position where I could help drive it.


Project goals & objectives

The main goals and objectives for this project were:

  • Get customers instantly engaged, and grow an understanding of the product
  • Create a simple, easy to use web app to allow users to create food orders
  • Be transparent with the customers about the meal information, nutritional value, and ingredients
  • Design with a mobile-first approach to cater for people on the go
  • Progress the visual identity, create a design language and create a component library

User Experience

Before I joined the project, Alex and Design Manager at CurrencyFair, Paul Murphy had already fleshed out the journey map, screen flows, functionality, and had nailed all those down to wireframes.

Wireframes and flows

It was great to see they had solid concepts and ideas in place, so I could start thinking about how the menu listing should be displayed, firstly on mobile and then scaling to desktop.

I was working with great content from the very start: meal description; nutritional value of meals; ingredient listings, so to display this content in the best way possible, it was clear that the menu items should be stacked, rather than having the meals side by side. This allows the user to focus on one meal at a time while scrolling and also gave each meal card enough space for the content. The basket and checkout button was always going to be visible on the right hand side (with sticky position when user scrolls), so the height of the menu was never going to be an issue.

I discussed this with Alex, and we agreed on a stacked menu listing.


User Interface

My key role while working on Piply was to progress the visual identity and create a design language. Branding was already in progress before I joined the project, and once it had been completed, I started to build the design, all the while staying true to Piply’s visual identity and branding.

Freshness, Healthiness and Happiness

Piply qualities

There were three key qualities of Piply that I wanted to be at the forefront of my design:

  • The freshness of the company
  • The healthiness of the product
  • The happiness you get from being healthy

The imagery of the meals; the colour of the strokes; the icons on the meal cards: every element that was going to be designed had to adhere to these key qualities.


Clarity, Flexibility, Consistency and Familiarity

Key principles

Keeping these key Piply qualities at the forefront of the design, I needed to make sure I was sticking to core UI principles throughout the process:

  1. Clarity of the design
  2. Flexibility of the system
  3. Consistency and structure
  4. Familiarity and efficiency

Colour palette

Colours

Piply’s branding is totally fitting with the company ethos. It’s fresh, and it evokes happiness and healthiness. I progressed the branding Ciarán Ward, a designer from Brown Thomas created into the UI, focusing on the colours that aligned to Piply’s key qualities:

Healthy greens, natural yellows, cloud greys and crisp whites are just some of the colours which are part of the Piply palette.

I used greys for backgrounds; whites for layouts,;greens for all the main call to actions; and yellows for secondary actions.


Thin, Light, Regular, Medium and Bold

Typography

Ciarán had included Google’s Roboto font in the branding, so I progressed with that in my designs. It’s a pretty modern font but has great cross browser compatibility. There was font variation to choose from in the branding, including Thin, Light, Regular, Medium and Bold.


Happy, friendly and welcoming

Tone of voice

I wanted the tone of voice in the designs to match the product — healthy, happy and fresh. By using friendly, welcoming messaging (and some emojis here and there), we can bring the Piply key qualities into the design which helps the customer understand and enjoy the product more.


A little taste of imagery for Piply meals

Imagery

Imagery is key to Piply. Everything is about the food. When discussing imagery, it was essential to portray the deliciousness and nutritiousness of the food in the best way possible.

Piply’s photoshoots resulted in the images you can see on the site, and you have to agree, they’re mouth-watering! Imagery is used throughout the site: the hero banners, the menu, and the blog.

Shoutouts to Orla Neligan and Leo Byrne for the great work on the imagery.


Designing the component library

After getting a real understanding of Piply’s key qualities and principles, I started designing the component library from which the web app would be built. This included designing repeatable, flexible components which could handle different types of content and always be fully responsive.

Having a component library in place brings clarity and consistency to what’s being built. We had to look at the system as a whole and not just as a single page.

Various elements from the core style guide

After the core elements we’re created, I started working on the other components such as the header and footer, meal cards, baskets, forms, hero banner styles, layouts and modals and along with various states needed for each component.

Here’s a few of those elements…

Breakdown of header for desktop, tablet and mobile.

Meal cards on mobile with 3 tabs for meal info, nutrition and ingredients

Elements from the desktop checkout flow

Mobile takeover screens for tomorrow’s lunch, side dishes and your basket (on desktop, these are modals)

Desktop homepage design

After multiple revisions of each design, we finally finalised the design in June 2016 for the MVP webapp — even tho with our design library is ready to scale for whenever that time comes…

The launch

Since launch, orders have been flying in and customers a really loving the product. When you hear feedback such as.. “Site is slick, food was delish”, “Such a nice dinner, compliments to the chefs” and “Nearly ate my phone looking at the pictures”, you know we’re on the right track.

Piply have gotten shoutouts from Eir Business, The Irish Times, LovinDublin and Totally Dublin which has generated a massive boost in public interest.

There has also been some lovely tweets from people with good food taste…


Shoutouts

Can’t finish this case study without giving shoutouts to all the people who worked hard on bringing Piply to life…


Feeling Hungry?

Get yourself over to www.piply.ie and browse the delicious menu and order something unreal for your dinner tonight!