Research

Competitive benchmarking
My first step was to check out Cocktail'In's competitors. This allowed me to see how similar on-demand drink delivery services were structured and what features they offered. By analysing the strengths and weaknesses of the competition, I could gain valuable insights to inform the design of Cocktail'In's ordering process.

Key takeaways at this point included:
• The use of retro fonts and bright colours
• Bespoke cocktails being available aswell as classic
• Seasonal additions
• Easy access to FAQs (as side panel on product page)
‍

User personas
In order to understand exactly who Cocktail'In's ideal customers were, I created user personas. This allowed me to design an ordering process that catered to their specific needs and preferences. Here's why it was important:
• Targeted User Experience: By considering user demographics, behaviors, goals, and pain points, I could tailor the ordering process for different customers.
• Identifying Pain Points: User personas helped me anticipate potential obstacles users might face while ordering.
• Empathy & User-Centred Design: Developing personas fostered empathy for our target audience. By keeping their needs and goals in mind throughout the design process, I could create an ordering experience that felt intuitive and enjoyable for everyone.
• Improved Conversion Rates: Addressing user needs and pain points through a user-centred design informed by personas could lead to a smoother and more efficient ordering process.  

Sitemap

Next, I wanted to figure out what was needed on the site from the home page to a user completing their order. The log-in process was a key consideration within this. Starting with the home page, navigation was plotted out including where in the site each page can be found and where users can go after arriving at a given page. This simple, low-fidelity site map plots the user’s flow all the way through the ordering process.

Wireframes of each page were next. I used Figma to create a page-by-page plan of the site, marking in navigation, placeholder images and text.

Design

The look and feel of the site were important considerations. It needed to appeal to business users as well as people throwing parties in their houses. For the design, I used bright colours against dark backgrounds to suggest atmosphere and a neon light effect on the logo to tie it all together.

Taking my finalised wireframes and branding, including the colour palette and logo, I then moved into Adobe XD to create a high-fidelity prototype of the desktop site.

Prototype

Taking my finalised wireframes and branding, including the colour palette and logo, I then moved into Adobe XD to create a high-fidelity prototype of the desktop site. This would be used for both increasing stakeholder buy-in and user testing.

And view a video demo of the site below:

Mobile version

Although Cocktail’In’s website was the primary focus, I also wanted to make sure it would work in app form. I first mocked up a low-fidelity wireframe of the app, followed by high-fidelity graphic, using all of the same elements as the website.

Key takeaways

My own personal takeaways from this project included:

• User Research is Key: This project solidified the importance of user research in the design process. By understanding Cocktail'In's target audience and their needs, I was able to design an ordering process that catered to their specific preferences. This resulted in a more user-friendly and enjoyable experience.
‍
• Power of Prototyping: Creating a high-fidelity prototype in Adobe XD proved to be invaluable. It allowed for user testing and stakeholder feedback before any development began. This iterative approach helped identify potential issues early on and ensure the final product aligned with user expectations.
‍
• Time Management in a Short Sprint: Completing this project within a tight one-week timeframe required effective time management skills. Focusing on core deliverables like user research, wireframing, and prototyping allowed me to efficiently design a solid foundation for Cocktail'In's user experience.