Interactable
I designed and develop a landing page for Interactable, a digital transformation agency.
Designing a coffee social app that attracts GenZ, transforming Lavazza's brand into coffee-driven social connections.
Designing a coffee social app that attracts GenZ, transforming Lavazza's brand into coffee-driven social connections.
Lavazza: Third Place
Client
Lavazza
Services
UX Research
Brainstorming
Prototyping
Date
June 2023 - August 2023
Lavazza: Third Place
Designing a coffee social app that attracts GenZ, transforming Lavazza's brand into coffee-driven social connections.
Designing a coffee social app that attracts GenZ, transforming Lavazza's brand into coffee-driven social connections.
Lavazza: Third Place
Problem
Information overload in conversational chatbots leads to forgetfulness after multiple interactions.
Information overload in conversational chatbots leads to forgetfulness after multiple interactions.
Interactable is a Digital Transformation agency. They had a previous landing page, but they wanted the to elevate their online presence to reflect their status as an emerging agency.
The existing landing page was simplistic, lacking the dynamism and sophistication required to showcase Interactable's capabilities effectively. My goal was to create a visually striking and engaging website.
My role
Upon reviewing Intractable's existing landing page, it was evident that a significant overhaul was necessary
Upon reviewing Intractable's existing landing page, it was evident that a significant overhaul was necessary
The page was static and lacked the visual appeal needed to convey the agency's expertise in digital transformation.
Recognizing the importance of making a strong first impression, I set out to revamp the landing page to better reflect Intractable's brand identity and capabilities.
Timeline
June 2023 - August 2023
Role
UX Designer
Approach
Prioritising Quantitative
In order to look for tangible problems, we interviewed 7 users (Gen Zs from the US, Europe) plus a survey. The questions were in relation of their socialization approach, their relation to coffee, how do they socialize, platforms, etc...
Benchmarking
To gather inspiration and insights, I conducted thorough research on other digital agencies' websites
To gather inspiration and insights, I conducted thorough research on other digital agencies' websites
This benchmarking process allowed me to identify design trends, explore innovative approaches, and refine my vision for Intractable's new website.
By studying industry leaders, I gained valuable insights into what resonates with users and how to effectively communicate Intractable's unique value proposition.
Overview
Creating a digital experience for GenZ
Lavazza is a leading coffee brand that has focused in the coffee production and distribution from Torino (Italy) since 1895.
In this UX/UI project, we were tasked by the Lavazza team to create a digital experience, giving emphasis to coffee as an element of sociality. Lavazza´s goal is to rejuvenate their brand audience, by approaching Gen-Zs.
Our goal requested us to deeply focus on UX research and deliver a Hi-fidelity prototype.
Onboarding
Desk Research to kick-off
We started by doing an extense Desk Research about several topics: Gen Z, Relation of Gen Z and Coffee, Third Places, Social Platforms, Social Aspects of Coffee and many more. Meanwhile, we analysed their direct competitors such as Tchibo, Starbucks, Segafredo.
The Desk Research ended up providing a massive amount of information which at first, felt like a lot. However, it gave us a good foundation in relation to our project and led us to formulate some questions regarding our challenge.
My Role
Working as team
The design team was formed by me (Marc), Phillip Alt and Sergey Miliuk. We cooperated remotely. My tasks focused mainly on UX Research, Brainstorming and Prototyping.
Timeline
June 2023 - August 2023
Role
UX Designer
During our interviews, we placed great emphasis on understanding our users' interactions with social platforms – where and when they connect and socialize.
As we discovered that many users favored the social aspect of coffee and its connecting power, we delved deeper into this topic.This exploration led us to the realization that meaningful communications played a vital role for our users.
Fast Turnaround
Analysing key inputs
We decided to select some of our main findings in order to have a better notion of our project
Solution
Facing problems
At that stage we discovered some potential problems our users were facing.
Next Steps
Planning iteration
In the next steps, we should continue our expansion by following these key actions::
Collect Valuable Feedback: Gather insights from users through surveys and interviews.
Process and Incorporate Feedback: Analyze and prioritize feedback for necessary improvements.
Implement a Desktop Version: Extend to desktop platforms for wider accessibility.
Integrate New Features: Add features aligned with user needs and tech trends.
Conduct Usability Testing: Test for design issues and enhance user experienc
Brainstorming
Idea 1
Online platform where Gen Z users connect based on shared interests and passions. Users can exchange skills and learn from eac other within a community.
Meet for a coffee break, digitally or in- person, to foster genuine connections and personal growth.
Problem
Redefining the website
The previous website, built on Wix using a pre-made template, posed limitations in terms of design flexibility and development capabilities.
To address this, I sought a tool that would offer greater creative freedom while still allowing for efficient implementation. Considering the client's preferences and project timeline, I proposed Framer as the ideal solution—a design-friendly, no-code platform that seamlessly integrates with Figma and offers the flexibility needed to bring our vision to life.
Considerations
Based on my audit findings and research, I formulated several key considerations for the redesign.
It was clear that the new landing page needed a sleek and dynamic visual approach to captivate visitors.
Implementing animations and microinteractions would enhance user engagement and create a more immersive browsing experience, effectively highlighting Intractable's capabilities and expertise.
Wireframing
Testing options
I explored various layouts and color palettes to find the perfect balance between visuals and functionality.
After refining several concepts, I created a prototype of the landing page and collaborated closely with the client to finalize the design direction. Once approved, I transitioned to building the website, ensuring each element was meticulously crafted to enhance the user experience.
Building the Landing Page
Choosing the right tool
Choosing the right tool
As I wanted a tool that would give me freedom from a design perspective. As my coding skills aren’t amazing, and I had a shot turnaround, I needed a tool that could give me design flexibility but not to complex either.
Tools such as Wix or Wordpress, are great SEO-friendly builders but they wouldn’t give enough flexibility and Webflow would require a longer time to build, plus the client didn’t feel familiar with.
Hence, I proposed Framer, a great builder, design friendly, no-code tool. Also, it allows an easy-going transfer from Figma to Framer via plugins, so it fastens the implementation.
Once I built the landing page, it required some days of making the landing page responsive across different devices and add interactions. This took me an entire week. Once the website was built, I had to fine tune some aspects.
The homepage is the main hub for our users. From there they join communities that they find interesting, users can explore events within their area or online events and they can connect or chat with friends or like-minded users.
As the app had several features, we wanted to make a homepage where users can see them from the very beginning. This way the user don’t have to travel to plenty of screens in order to grasp what’s going on.
Solution
Impactful initiatives, driving sustainability and social change
A platform that aims to give voice to Gen Z, allowing users to vote and propose impactful initiatives under the umbrella and supervision of Lavazza.
Lavazza provides support and initiatives, while maintaining a safe environment where diverse digital and physical communities can gather to discuss and present initiatives (related sustainability, equality, social responsibility, etc.) to the company and help Lavazza be part of the change.
Coffee Buddy
One of our goals is to foster meaningful connections. Connecting with other members from communities users liked, open the option for users to connect with like-minded people online.
However, on our research we realized our users were also interested on IRL connections.
So we created a feature called ‘Coffee Buddy’, that lets our users connect and find like-minded people who live closeby and meet for a coffee.
Events
After doing an extense research about third places we discovered that if we wanted our communities to be organic and engaging, we needed to motivate it. Morever, in our research we realized that connecting was a crucial element for Gen Z.
That’s why we decided to introduce Events as a way to stimulate connections and community participation.
Community members can create events, either online or offline in order to solve initiatives.
Users can also explore other events or attend to Lavazza-owned events created by Lavazza moderators.
Test
The test lead us some more problems…
The test lead us some more problems…
The test lead us some more problems…
I checked with some other designers to gather feedback and detect some problems.
I also tested it with some random users, to see whether they could interact easily with the landing page. I detected several problems, when it comes to responsiveness and color contrast which I had to redefine.
After that, I had a presentable and fully-fledged landing page that enhanced Interactable capabilities.
Forge a digital coffee community that captivates Gen Z, transforming Lavazza's brand into a vibrant hub for their coffee-driven social connections.
✨
Connect to Content
Add layers or components to swipe between.
Idea 2
Online platform where users can own their own café digitally. Different online cafés, each café is a different community or group of users.
Activities include voting for a city where the café is meant to be located online, designing the interior, or creating the menu. Users can gather around within different cafes, fostering participation, content creation and sharing the experience with friends.
Idea 3
Online platform that allows Gen Z to gather, discuss, and socialize around impactful causes to make the world a better place, such as sustainability, racism, equality, LGBTI+, poverty, etc.
The platform enables connecting individuals who advocate for the same cause, thus fostering healthy communities
Idea 4
The platform allows users to vote for winning initiatives, with decision-making power resting with the community rather than Lavazza.
Through a dedicated online community, Lavazza provides support and resources, while maintaining an online third place where diverse digital and physical communities can gather to discuss and present their initiatives.
Next Steps
Planning iteration
In the next steps, we should continue our expansion by following these key actions::
Collect Valuable Feedback: Gather insights from users through surveys and interviews.
Process and Incorporate Feedback: Analyze and prioritize feedback for necessary improvements.
Implement a Desktop Version: Extend to desktop platforms for wider accessibility.
Integrate New Features: Add features aligned with user needs and tech trends.
Conduct Usability Testing: Test for design issues and enhance user experience.
Solution
Impactful initiatives, driving sustainability and social change
A platform that aims to give voice to Gen Z, allowing users to vote and propose impactful initiatives under the umbrella and supervision of Lavazza.
Lavazza provides support and initiatives, while maintaining a safe environment where diverse digital and physical communities can gather to discuss and present initiatives (related sustainability, equality, social responsibility, etc.) to the company and help Lavazza be part of the change.
Onboarding
Our goal was to make an easy-going onboarding that let our users to create their profile and define what topics/causes are they more interested of.
The onboarding had to be simple but it insightful, we decided to make it as engaging, simple and catchy as possible.
Homepage
The homepage is the main hub for our users. From there they join communities that they find interesting, users can explore events within their area or online events and they can connect or chat with friends or like-minded users.
As the app had several features, we wanted to make a homepage where users can see them from the very beginning. This way the user don’t have to travel to plenty of screens in order to grasp what’s going on.
Communities
On our research we realized that Gen Z was eager to participate and connect based around topics that matters to them, hence we focused our solution on communities. Users can join communities that tackle topics and causes they are genuinely interested in.
Coffee Buddy
One of our goals is to foster meaningful connections. Connecting with other members from communities users liked, open the option for users to connect with like-minded people online.
However, on our research we realized our users were also interested on IRL connections.
So we created a feature called ‘Coffee Buddy’, that lets our users connect and find like-minded people who live closeby and meet for a coffee.
Events
After doing an extense research about third places we discovered that if we wanted our communities to be organic and engaging, we needed to motivate it. Morever, in our research we realized that connecting was a crucial element for Gen Z.
That’s why we decided to introduce Events as a way to stimulate connections and community participation.
Community members can create events, either online or offline in order to solve initiatives.
Users can also explore other events or attend to Lavazza-owned events created by Lavazza moderators.