Interactable

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. 

Work

UX + AI

About

Contact

Work

UX + AI

About

Contact

Work

UX + AI

About

Contact

Work

UX + AI

About

Contact

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.