Milk Riot

UX DESIGN

This is the product creation process for Milk Riot, a fictional luxury milkshake delivery company based in Florida. Milk Riot is fun, 80s-styled, youthful and nostalgic. They have existing milkshake stores around the state, but are looking to create a delivery service to trial before going national.

I created this project to demonstrate a few of the user experience design and strategy techniques I am familiar with. Any of the skills mentioned can be chosen individually so I can plug into your existing resources or I can help build your product from the vision up, all the way through to creating and managing a multi-disciplinary team.

Let's start with a Vision and Strategy. To create these there needs to be a LOT of research. And I do mean a LOT. There's no point creating an app you love, only to find there's no market for it or indeed many other companies have pipped you to the post. Once the research is as complete as possible, it's time to make the Vision board. The one below is based on Roman Pilcher's model.

Here’s me, collating some user stories on a whiteboard. This is a great process to do as a team as well as individually.

Now we have the vision we can start to smash into the user stories. Again, this involves lots of research and talking to your potential customers. What is it they love? What problems/pain points are you looking to solve with your product? For example:

As an existing user, I want to see a list of my previous orders so I can reorder super fast
As a new user, I want an account that retains my pay details and addresses so I can check out quickly next time

From the user stories we can begin to extrapolate the core functionality and from this the information architecture. What's going to be the most important interactions for your customers? Is there more than one type of customer? In the case of Milk Riot, the new and existing customers will have differing needs. From an IA we can see if there needs to be links/shortcuts between different functionality.

Information architecture, shown here with the size of circles denoting the importance of the functionality to the user type

The IA then helps to inform the user flow. This image shows two of the many different flows in the app - adding an item to your basket and the purchase loop. Creating flows like this help to iron out any strange edge cases or points of friction. Any experience should be as frictionless as possible, especially if your company revenue depends on it.

Now it's time to get cracking on the wireframes. I try and keep these non-branded or fancy to start with. Here’s a couple from my Milk Riot Axure project.

Then comes the really exciting part... bringing those wireframes to life in an interactive prototype. This can save so much time and energy further down the line and is a great way to get your client excited about production. It can be tried out on real life potential customers and iterated on over and over until the design feels just right.

And finally…

Below is a video of a quick prototype of the ‘place order’ process made in Axure.