The Brief

Create a bespoke user experience, user interface and brand identity for a food company called So. It will enable people to order local, seasonal and organic produce for delivery to their home. The name ‘So’ was inspired by the word ‘Sow’ (i.e. to sow seeds) and also stands for ‘Seasonal, Organic’.

Duration

August - October 2017

Origami Prototype of 'My Orders'

Initial Ideation Rough Work

Initial User Research

Primary Persona

Rough Wireframing

Low Fidelity Wireframes for 'My Orders'

Low Fidelity Wireframes for 'Community'

Logo Design (I tend to just keep doing messy sketches until I find something that works!)

Logo Design (Overlapping seed silhouettes echo the shape of a 'w')

Drawing and Experimenting with some Playful UI Illustration Ideas

Visual Design Styletil

Banner Illustration Rough Work

High Fidelity User Interface Mockup of Home/Produce Page

My Orders Page with UI Illustrations

Close Up of My Orders Progess

Details of Hand Drawn Digital Illustrations 

Approach

1) User Research

I began the project by finding out what the main goals and pain points are of the target user group. I asked questions such as 'why do people want fresh, organic produce?' and 'what stops them from accessing their ideal produce'?. From answering research questions I could create a primary persona to aid the design process. I established exactly what their mental model is and how the user interface can reflect their thought processes in a simple and original manner. 

One insight I discovered was that people don't just want to support local growers and get the best quality vegetables or fruit in a convenient way, but they also like to feel part of a 'tribe' of like-minded individuals. Hence I created a community section where people could read about food and environmental ethics as well as having access to recipes, competitions and meet-ups. Another insight was that people like to know where their food comes from. Hence I had the idea for a monthly 'Grower Spotlight' section in the community page that acknowledged the hard work and enthusiasm of local producers.

2) Design Rough Work

I then took out my sketchbook and started drawing rough, low fidelity wireframe sketches and user workflows. I tried to analyse my user research findings in a non-biased way and attempted to determine what the website would enable primary users to do and how to best group or separate features or content. I think it is best to work on paper as much as possible before moving on the computer. This way, any mistakes or misconceptions can be ironed out early and time is not wasted at a later stage of the process.

3) User Interface

I translated my rough wireframes into low-fidelity grayscale wireframes in Sketch. I established a responsive grid system that would enable the website to work on multiple devices in a way that did not harm the user experience of the site. My priority was to make sure that the navigation was intuitive and that the content on each page was presented in a clear way with clear 'call-to-actions'.

Once I was happy with the low-fidelity wireframes and knew exactly what to refine in later stages, I moved on to creating high-fidelity prototypes. I created a consistent visual language that would be used throughout the site and had fun experimenting with user interface illustrations to give the site a unique appearance. I was careful to make sure that the illustrations served a user experience purpose in the design and were not just there for the sake of a cute aesthetic. I also used Origami prototype to demonstrate an example of an interaction animation on mobile.

4) Final Product

The final result of this personal project was a quirky and unique user interface design that provides target users with a simple, intuitive website which enables them to make purchasing fresh produce a part of their busy daily routine. 
Back to Top