Adidas
Discover Costa’s latest innovations at Host Milano through a intuitive experience.
Responsibilities: UX Design, Prototyping
Tools: Figma, Photoshop, Illustrator
Duration: 1 month
View mobile prototype →
View desktop prototype →
Challenge
To coincide with an exhibition stand at Host Milano, the client requested an engaging and informative user experience to announce and celebrate the new brand.
Costa X
In the last couple of years, Costa Express has been repositioned as a technology-led platform offering total coffee solutions to businesses known as ‘Costa X’. Costa X is a huge focus and growth area for Costa Coffee. Their parent company Coca-Cola are paying big attention.
The business has been restructured with a small team working in start-up mode to build out their product portfolio and establish what the brand stands for, identify audiences and priority markets. While some of their new gen products are already in the market, the ‘Costa X’ brand has not been activated in a meaningful way. Costa X will be ‘launched’ at Host Milano.
What is Host Milano?
Host Milano is one of the biggest global B2B hospitality events. A five-day trade show focused on coffee shops, restaurants and bars.
All of Costa X’s competitors will be there and Costa want to show up with purposeful disruptiveness.
Considerations
I explored the brief for the any considerations before proceeding with wireframes. The considerations were the design must a booking system that enables ‘VIP’ customers to schedule appointments with the Costa X team at Host Milano. Additionally, an interactive product diagnostic tool with email capture should be implemented, allowing customers to discover the most suitable Costa X product for their needs.
Design principles
When creating solutions to the problem, I approached the design phase with three design principles. Therefore, providing a rationale and strategy behind my design decisions.
Informative
Provide users an understanding of what propositions Costa X will be presenting.Engaging
Present the new Costa X brand through a compelling approach.Interactive
Provide users the opportunity to book appointments at Host Milano.
Site map ideation
I started a site map to define where content sits within primary navigational structure. I focused on developing the key customer journeys such as ‘how does a user get from the homepage to booking an appointment with the team at the event?’.
I also focused on how the product proposition content would be presented within the infrastructure. I proposed the concept of dividing the propositions through the metric of lifestyle scenarios where a Costa product would be suitable such as hotels, restaurants and workplaces. My rationale behind this structure was I believed customers would be more engaged with a composition based off their business practice.
Exploration
I proceeded with a mobile-first approach when creating low-fidelity wireframes. Through rapid prototyping I was able to create many wireframe iterations until I managed to find a breakthrough.
Design and iterate
Mid-fidelity wireframes were created through client and development feedback, with each iteration improving based off my design choices. I referred to the design principles and site map. Thus, providing a well-considered rationale for my design decisions.
I aimed to modernise COSTA by providing inclusivity and accessibility. Ensuring flexibility across various touchpoints was crucial. My goal for the visual design was to create a clean interface that is easy to navigate for customers. Each element was thoughtfully considered to ensure that every decision served a clear purpose for the user.
Close collaboration with the development team ensured every element of the design was implemented in the build phase. Communication was a vital cog in the process as I provided written documentation to provide full-stack developers with annotations and guidance regarding design choices within the solution. If the developer was unsure about specific parts of the design, I was always open to suggestions regarding improvement.
Design solution
The project was successful, achieving key goals and objectives for Costa. The microsite successfully enhanced the brand’s presence at Host Milano, delivering a seamless digital experience that attracted potential customers and partners. The vibrant colour palette aligned seamlessly with the modern brand identity.
Key results
+40% engagement compared to previous microsites.
500+ demo sign-ups before the event.
Increased brand visibility through social media sharing.
Key learnings
A mobile-first approach ensured responsive designs.
Well placed CTAs lead to a increase in appointments.
Optimised images reduce load times, lowering bounce rates.