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

Project goals & objectives

The main goals and objectives for this project were:

  • 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

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 healthiness of the product
  • The happiness you get from being healthy
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. Flexibility of the system
  2. Consistency and structure
  3. 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:

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.

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.

Various elements from the core style guide
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

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.

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!

Hey, I’m Kieron! Senior Product Design @clubhouse. I care about what I do — working with passionate people and achieving great results together 👋🏻

Hey, I’m Kieron! Senior Product Design @clubhouse. I care about what I do — working with passionate people and achieving great results together 👋🏻