Halo is an iconic fleet of food trucks and a local attraction, serving award-winning doughnuts at various bustling locations across London. With a rapidly growing fanbase and social media presence, there has been an overwhelming demand for custom orders and home deliveries.
Halo approached me to create a full brand identity with an accompanying website that clearly portrays their fun, quirky and trendy image. They want to create an online platform that will enable users to order their doughnuts for home delivery, and that will ensure customers know where to find them while they’re on the road.
For my research, I focused on the fast-food delivery industry and the doughnut sector. Despite being a big doughnut enthusiast, my knowledge of the market was very limited. So in order to learn more, I set about creating a research plan that aimed to answer all of my questions about the industry. Below, are a few examples.
This will uncover user feelings and perceptions regarding purchasing fast-food online, and what they liked and didn’t like about their experiences in the past.
This will aim to identify user motives, and discover the reason for shopping for doughnuts online as opposed to a physical store or food truck.
This will identify the information, features and steps users expect in the ordering process.
This will aim to identify the sorts of things users would look for on a doughnut website and why.
After devising a research plan, I decided the best approach to gather the data was through a 3-step process: secondary research followed by a competitive analysis, and then interviews.
This would provide a solid foundation on which to build the primary research. These findings could be useful to expose parts of the industry that need exploring in more detail.
This would provide a broad overview of the market offering and user expectations. What works, what doesn’t work, and what will make Halo stand out from the competition.
This will offer insight into the users’ thoughts and feelings about ordering doughnuts online, what their concerns might be, their expectations, motives and travel preferences.
The secondary research, competitive analysis and interviews showed that there is a growing increase in snacking and indulgence consumption. Fast-paced lifestyles often compel consumers to order fast-food online, saving valuable time and effort. Gaining trust, providing a reliable service, and making the ordering process as quick and as easy as possible will be crucial for the products success.
In order to make sense of all the data I collected during my research, I created a user persona: Lara Watts, a successful Marketing Manager with a busy schedule who occasionally likes to treat herself.
After gathering and organising my research data, it was time to decide on what features to include in the design. I used my research findings as well as testing some popular existing fast-food delivery products to gather ideas and prioritise features.
Any features that increased the speed and efficiency of the ordering process were ranked as top priority. I was also sure to include a live progress tracker, as my research showed that it’s highly important for users to be kept in the loop.
After deciding the product features, I created a sitemap to display the relationship between the content on the site. The key to a successful sitemap was simplicity, minimising the number of steps required to place an order.
In order to put myself into the users shoes and make the ordering process as frictionless as possible, I created a user flow. This way, I could ensure a quick and easy experience, which results in maximum sales and greater user satisfaction.
This user flow demonstrates the journey Lara (my user persona) might take during the checkout process for her first order.
It was now time to think about the design of the website, so I began to scribble down ideas in my sketchbook and produce some rudimentary low-fidelity wireframes of the keys pages on the website. These really helped me to determine what content to include and how to order and arrange the content in a logical way.
After I had finished sketching, I digitised my ideas and created high-fidelity wireframes for 7 key pages from the ordering process. The wireframes helped me to organise the content effectively on the page before inserting visual embellishments.
The whole time I kept my user persona (Lara) in mind to ensure I was making meaningful and informed design decisions. The goal was to make the ordering process as quick and as easy as possible to complete. To do this, I kept the number of steps to an absolute minimum whilst keeping the design simple and familiar.
Since this is a doughnut delivery platform, it made perfect sense to test out the entire ordering process. In order to do this, I created a detailed test plan to outline the goals and objectives, followed by a prototype created in InVision.
Overall, the feedback was extremely positive. All participants were able to successfully complete the task given and without significant error. Interestingly, all participants took a different path through the site to complete the task. In spite of this, they all found the task equally quick and easy to complete.
Despite the glowing feedback, there were some usability issues. The most significant problem concerned the Confirmation and Tracking page, where 2 out of 3 users found the Track My Order section too easy to miss and lacking in detail.
In order to organise the data gathered and determine possible revisions, I collated my notes to create an affinity map. To do this, I determined suitable categories to neatly display the data in a digestible and actionable way. From here, I was able to decide what needed doing and where my attention needed to be.
After making the necessary revisions to the wireframes, I started to gather a variety of visual inspiration for logos, colour, typography, icons and overall artistic direction. Artistic choices were predicated on Zeit’s brand attributes and core values: fun, quirky, down-to-earth, modern, and uplifting.
After creating a mood board and logo, I distilled my ideas into a style tile. The driving force here is the 3D skeuomorphic elements, a bright and uplifting colour palette, and playful typography.
Using my style tile, it was time to inject some life into my wireframes by beginning the UI design. Below are the 3 pages that I focused on: the homepage, menu page, and product details page (respectively).
