Image for post
Image for post

Designing for Piply: Case Study

Kieron Keenan
Aug 12, 2016 · 7 min read

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

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

  • 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

Image for post
Image for post
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.

Image for post
Image for post

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


User Interface

Image for post
Image for post
Freshness, Healthiness and Happiness

Piply qualities

  • 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.


Image for post
Image for post
Clarity, Flexibility, Consistency and Familiarity

Key principles

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

Image for post
Image for post
Colour palette

Colours

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.


Image for post
Image for post
Thin, Light, Regular, Medium and Bold

Typography


Image for post
Image for post
Happy, friendly and welcoming

Tone of voice


Image for post
Image for post
A little taste of imagery for Piply meals

Imagery

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

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.

Image for post
Image for post
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…

Image for post
Image for post
Breakdown of header for desktop, tablet and mobile.

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

Image for post
Image for post
Elements from the desktop checkout flow

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

Image for post
Image for post
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…

Image for post
Image for post

The launch

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


Feeling Hungry?


Image for post
Image for post

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store