FlowUp - Digital Design

Selected Work

Skogen

Is a niche company specialized in retailing premium interior design products.

Date

2023

Services

UX/UI Design

A/B Testing

Tools

Figma

Google Analytics

Heatmaps

Empathize

Established in 2012, Skogen is a niche company specialized in retailing premium interior design products. Their primary aim is to cater to discerning customers who seek both quality and style in their home furnishings.

How are Skogen different from others?
Affordable Luxury: While specializing in high-end design interior products, we ensure affordability without compromising quality.
‍
Trendsetters: Skogen's focus lies in staying ahead of the curve by offering the latest trends in home decor, keeping our customers' spaces stylish and contemporary.
‍
Exclusive Collaborations: Partnering with renowned brands allow Skogen to curate a distinctive house line, ensuring our offerings remain unique and desirable in the market.

Who is the target?
Skogen's target audience encompasses individuals passionate about interior design, homeowners seeking to elevate their living spaces, and those with a penchant for premium products that reflect their taste and lifestyle.

What business problems do Skogen expect to solve?
Enhancing Sales Conversion: By optimizing the user journey and experience, Skogen aim to drive higher conversion rates, ultimately translating into increased sales.
‍
Improving User Experience: Elevating the overall user experience on the website is crucial for retaining existing customers and attracting new ones.

Approach

Skogen wants to enhance user experience and boost conversions on their e-commerce platform. To achieve this, I have decided to conduct A/B testing and make decisions based on actual data.

The A/B testing methodology consisted on following steps:
1. Identifying a problem
2. Formulating a hypothesis for potential solutions
3. Developing alternative design
4. Testing the new version against the original
5. Analyzing the results

Initially, the investigation focused on understanding user behavior on the platform. With heatmaps, we visualized the areas with the highest user engagement and identified the spots visitors ignored.

Additionally, user insights were gathered through surveys. For instance, when a user abandoned a product page, a survey prompted them with the question, 'Why did you decide not to add the product to your cart?', with the following options:

1. 'The shipping costs are too high.'
2. 'The product didn't meet my needs.'
3. 'I need more time to decide.'
4. 'Had some difficulties navigating the website.'
5. 'I'm concerned about the credibility of the product.'

We also conducted user interviews, and highlighted the following points:
‍
'I can’t add the current product to favorites'
'It took me a while to find the information about shipping'
'I like how many colour variations are available'
'This products are very modern'
'Is good to have reviews about the product'
'This AR feature is really cool, but I almost couldn’t find where to click to access this feature'

With this data, I could formulate hypotheses and then create an alternative design to be tested side-by-side with the original.

Cases

Enhancing Call to Action Button

version A

version B

The initial version (Version A) of the CTA button exhibited shortcomings, particularly in terms of contrast, which could impact user engagement and interaction. Additionally, the visual hierarchy needed improvement to emphasize the importance of the CTA within the context of the page.

Contrast Improvement:
Version A of the CTA button lacked sufficient contrast, which could hinder visibility and accessibility for users, especially those with visual impairments or using devices in various lighting conditions. In response, the color was adjusted to increase contrast, ensuring better readability and usability.

Uppercase Text:
To distinguish the CTA button as a primary element, uppercase text was implemented in Version B. This change helps differentiate the CTA from surrounding text, thereby improving visual hierarchy and helping users to quickly identify the desired action.

Letter Spacing Adjustment:
In Version A, the letter spacing was set to -5%, which could potentially create readability issues and affect the overall aesthetics of the text. To address this concern, the letter spacing in Version B was adjusted to 0%, ensuring more readability while maintaining visual balance and coherence.

Presentation of Available Colors

version A

version B

Simplified Color Presentation:
Replaced the slider with images of the product in different colors with a clear and simple representation.

Use of Color Circles:
Introduced 24px by 24px circles to represent each available color, ensuring a more intuitive and user-friendly interface.
‍
Color Blind Accessibility:
Included the name of each color alongside its representation, ensuring accessibility for users with color vision deficiencies.

Fixed “Add to Cart” CTA

version A

version B

In the Version B the “Add to Cart” CTA is fixed at the bottom, along with essential product details.

Enhanced Visibility:
Users can quickly access the CTA without scrolling, improving engagement and conversion rates.
‍
Streamlined Navigation:
Simplifies the user journey, accelerating decision-making.
‍
Consistent Interface:
Ensures a uniform experience across devices, enhancing usability.
‍
Optimized for Mobile:
Provides mobile users with a seamless shopping experience.

Customer Reviews

version A

version B

Increased Transparency:
Displays both product and brand reviews, aiding informed decisions.
‍
Simplified Rating:
Moves to a 0 to 5 scale, to be more inline with the amount of stars.
‍
Enhanced Accessibility:
Improves contrast and adds review publication dates.
‍
Added Information:
Includes review count, providing credibility and popularity insight.

Enhancing Product Overview

version A

version B

Version B improves user experience by:

Reduced Vertical Space and Optimized Information Organization:
Layout simplification for faster scanning. While allowing all important information to be visible within the first 100vh of the screen
‍
Enhanced Visual Hierarchy:
Clear differentiation in prices and improved slider pagination.
‍
Increased Information Accessibility:
Quick access reviews, with a link to the product reviews.
‍
Introducing Favoriting Feature:
Encourages user engagement and personalization, ultimately increasing the likelihood of conversion.

Present "View in AR" option in this first section:
I improved visibility and accessibility of "View in AR" option. This empowers users to make more informed decisions by visualizing products in augmented reality.

Showing Product Specifications with Infographics

version A

version B

Version B introduces infographics to show product measures visually. This change makes it easier for users to understand the product's size and features at a glance, leading to increased engagement and more informed purchasing decisions.

Enhancing Related Product Thumbnails

version A

version B

Omitting "Out of Stock" Labels:
Encourages exploration and interaction with products.
‍
Including Color Variations:
Enhances visibility and facilitates informed decision-making.
‍
Compact Thumbnail Design:
Streamlines appearance, optimizing space for efficient browsing.
‍
Introduction of Slider Navigation:
Offers convenient exploration of a wider range of options.

Showing Product Specifications with Infographics

version A

version B

Social Proof

Including clear social proof on a website enhances user trust, boosts conversion rates, and improves the overall user experience. Social proof validates the brand's credibility, reduces perceived risks for consumers, and encourages user engagement. It acts as a persuasive element that helps users make informed decisions, leading to increased trust and higher conversion rates.

Costumer service

Adding a visible link to customer services on the product page can enhances customer support, improves user experience, builds trust, reduces cart abandonment, gathers valuable feedback, and fosters brand loyalty. This accessibility demonstrates commitment to customer satisfaction, leading to increased sales and customer retention.

Final UI

Results

The website is currently undergoing testing, and the results will be available soon.

↩ All projects

Skogen

A niche company specialized in retailing premium interior design products.

UI/UX Design

A/B Testing

Skogen

0ne of the largest and most impressive oceanariums in the world.

View website

Date

2023

Services

UX/UI Design

A/B Testing

Tools

Figma

Google Analytics

Heatmaps

Empathize

Approach

Skogen wants to enhance user experience and boost conversions on their e-commerce platform. To achieve this, I have decided to conduct A/B testing and make decisions based on actual data.

The A/B testing methodology consisted on following steps:
1. Identifying a problem
2. Formulating a hypothesis for potential solutions
3. Developing alternative design
4. Testing the new version against the original
5. Analyzing the results

Initially, the investigation focused on understanding user behavior on the platform. With heatmaps, I visualized the areas with the highest user engagement and identified the spots visitors ignored.

Additionally, user insights were gathered through surveys. For instance, when a user abandoned a product page, a survey prompted them with the question, 'Why did you decide not to add the product to your cart?', with the following options:

1. 'The shipping costs are too high.'
2. 'The product didn't meet my needs.'
3. 'I need more time to decide.'
4. 'Had some difficulties navigating the website.'
5. 'I'm concerned about the credibility of the product.'

With this data, I could formulate hypotheses and then create an alternative design to be tested side-by-side with the original.

Typography

Design Process

Problem Statement

Benchmarking

User Flow

Personas

User Journey

Wireframes

Interaction Flow

Prototype

User Testing

Final UI

Webflow Development

Live Website

Final UI Mobile

Final UI Desktop

↩ All projects

Oak 24

A niche company specialized in retailing premium interior design products.

UI/UX Design

Webflow development

Oceanarium Milwaukee

0ne of the largest and most impressive oceanariums in the world.

View website

Date

2022

Services

UX/UI Design

Webflow Development

Tools

Photoshop

Figma

Webflow

The problem

The oceanarium faces the challenge of attracting new clients from older ages and showing distinguishing itself from other aquatic attractions. There is a need to effectively communicate the unique features of the oceanarium, including its diverse range of sea creatures, engaging events for all ages, and its commitment to global marine conservation efforts.

"There is a need to effectively communicate our business"

Approach

My approach to the oceanarium website centers on user-centered design and creating a personalized user experience. Highlighting unique features like a diverse sea creature collection through captivating visuals and interactive elements distinguishes the oceanarium. A dynamic events calendar and multimedia integration enhance visitor engagement. Emphasizing the oceanarium's commitment to global marine conservation through clear messaging and educational content inspires a sense of responsibility.

By combining a visually appealing design, engaging content, and a focus on user experience, the website can effectively convey the oceanarium's unique features and values, ultimately attracting and retaining a diverse audience.

Typography

Design Process

Problem Statement

Benchmarking

User Flow

Personas

User Journey

Wireframes

Interaction Flow

Prototype

User Testing

Final UI

Webflow Development

Live Website

Final UI Mobile

Final UI Desktop

↩ All projects

Oceanarium Milwaukee

0ne of the largest and most impressive oceanariums in the world.

UI/UX Design

Webflow development

Finjito

This cocktail is a favorite with pirates, swashbucklers, and colorful characters in the Caribbean and beyond.

View website

Date

2022

Services

UX/UI Design

Webflow Development

Illustration

Branding

Tools

Figma

Illustrator

Webflow

The problem

The challenge is to create a user-friendly and engaging website for Fingito, a new cocktail featuring Dead Man's Fingers, with the goal of introducing it to Dead Man's Fingers enthusiasts. The website should not only showcase Fingito but also provide visitors with easy access to the cocktail's recipe and essential information for preparing the perfect Fingito. The primary objective is to captivate and inform the audience, encouraging them to try and enjoy this new cocktail.

"A Sip of Adventure, Crafted from the Spirit of Dead Man's Fingers.""

Approach

The website aims to inform and engage, creating a vibrant community around Fingito, a cocktail by Dead Man's Fingers, targeting enthusiasts.

The homepage should captivate users with visuals and a compelling story. A dedicated section should narrate Fingito's tale, connecting it to Dead Man's Fingers. Include a detailed, user-friendly recipe with interactive elements like a customization tool. Showcase key ingredients and guide users on purchasing Dead Man's Fingers products. Ensure mobile responsiveness and integrate social media buttons for sharing. Collect feedback through a form and encourage newsletter signups, and ensure brand consistency with an intuitive navigation structure.

Logotype

Typography

Design Process

Problem Statement

Benchmarking

User Flow

Personas

User Journey

Wireframes

Interaction Flow

Prototype

User Testing

Final UI

Webflow Development

Illustrations

Desktop

Mobile

↩ All projects

Finjito

This cocktail is a favorite with pirates, swashbucklers, and colorful characters in the Caribbean and beyond.

UI/UX Design

Webflow development

Branding

Illustration

Cuckoo

Cuckoo is an open source product directed to companies and work teams that use Slack to communicate.

View Project

Date

2021

Services

UX/UI Design

Front End Development

Branding

Tools

Photoshop

Figma

Illustrator

SCSS

React

The problem

Nest Collective uses Slack as its main means of communication. Due to covid, the platform gains even more importance. But there is a big problem with Slack for large communities: information is lost after 30 days of being posted. Also, searching for information in Slack is not very intuitive.

Approach

Cuckoo’s platform was build to improve the communication at Nest Collective, a collective of product studios which has created a model for company collaboration. The platform’s main objectives are to help internal collaboration, and to provide a better solution to storing information than Slack, where information is lost after 30 days.

It focuses on storing your important Slack Posts in one place so that you don’t miss a thing.

Timeline

Tools

Figma

Github

React

Ruby on Rails

SCSS

Illustrator

Design Sprint Process

How Might We

HMW...

... prevent information from getting lost

HMW...

... increase collaboration inside the collective

HMW...

... present new employees to the collective

HMW...

... welcome new companies joining the collective

HMW...

... make sure everyone is aware of the upcoming events

User Stores

As a user...

... I want to know what other people are working on

As a user...

... I want to get notified, so that I can be aware of what's happening

User Journey

Design Principles

António, 57 years old

Occupation: Designer at Deemaze Software
Motivations: Likes to give speakers and share knowledge
Interests: Sports, Nature

Rose, 22 years old

Occupation: Manegement Intern at Nest Collective
Motivations: She would like to meet other Nesters
Interests: Yoga, Cooking, Parties

Sérgio, 34 years old

Occupation: Software Engineer at BlocoMotivations: Would like to attend tech eventsInterests: Social and Educative Events

Brand Visual Sliders

User Test

User 1

“Since Slack is the main mean of communication, inside the company, seems nice that the created posts will be integrated on Slack”

User 2

“It’s important to have a tool to improve the internal communication. Having guidelines for when you want to create an event to detail everything that is needed”

User 3

“When creating an event I believe that it’s important to have the option to add hours, and not just the day of when the event will start and finish”

User 4

“It would be nice to give to the created Slack Bot a more personal and catchy name, so that it doesn't go unnoticed ”

User 5

“Slack’s biggest issue is that the information gets lost after a few days, so it would be nice to have a platform that storage the important information”

User 6

“It would be nice to give to the created Slack Bot a more personal and catchy name, so that it doesn't go unnoticed ”

Typography

Brand icon variations

Iconography

Buttons and Labels

Inputs

Spacing

Final UI

Responsive Design

↩ All projects

Cuckoo

Cuckoo is an open source product directed to companies and work teams that use Slack to communicate.

UI/UX Design

Front-end

Branding

Nos Alive '22

A leading music festival in Portugal, in the magnificent city of Lisbon with its wonderful sunny weather.

View website

Date

2022

Services

UX/UI Design

Illustration

Webflow Development

Tools

Figma

Illustrator

Webflow

The problem

The challenge is to create a brand-new website for Nos Alive 2022. The primary objective is to showcase the eclectic lineup, highlight the warm weather, and accentuate the festival's unparalleled coastal location in Lisbon. Additionally, the website needs to serve as a comprehensive source for festival-related information, including news updates, while incorporating a feature that allows potential attendees to explore and learn from the experiences of past festival-goers. The task is to design an engaging and user-friendly digital space that captures the spirit of Nos Alive and entices visitors to explore the vibrant world of this renowned music festival.

Approach

We conduct thorough user research to understand our diverse audience. The site features a well-structured information architecture with a clear and engaging homepage showcasing the festival's unique vibe. A dedicated section for the lineup and schedule, coupled with a dynamic news feed, keeps users informed. To build trust, a user experiences section allows past attendees to share their stories. The website is mobile-friendly, socially connected, and equipped with a seamless ticketing system. We prioritize accessibility, performance, and user feedback, ensuring a captivating and informative online experience that attracts both new and returning festival-goers.

Our approach to building the Nos Alive 2022 website centers on user-centric design.

Typography

Design Process

Branding

Wireframes

Interaction Flow

Prototype

User Testing

Final UI

Webflow Development

Mobile

Desktop

Mockups

↩ All projects

Nos Alive '22

A Dead Man's Fingers Cocktail, a brand that is considered Cuba's national drink.

UI/UX Design

Webflow development

Illustration

T:MY

T:MY is an AI that motivates people to become more productive, help them managing better their time.

Date

2022

Services

UX/UI Design

Branding

Data Visualization

Tools

Figma

Illustrator

Abstract

T:MY emerged after a reflection on what we could bring new and useful to society. After analysing our society we acknowledge that we are living in an era when everything is immediate and everyone is racing against time.

What is it?, How it works? and Who it's for?

T:MY is an AI that motivates people to become more productive, help them managing better their time.

T:MY is an AI that communicates with the user through an app creating an adapted personality to each user. Having access to the user’s devices and through a bracelet, it monitors the user’s habits and routines. With this information and taking into account the goals of each user, T:MY creates a personalized plan that will help them achieve their goals.

With T:MY we address all those who feel like they lack time to get their projects underway, those who are looking to be more productive or those who simply want to know how they are spending their time.

Logotype

A simple logo that combines the project’s name and the idea of a digital watch. Integrating two dots in the “i” (from Timy) position resembling the separation between the hours and minutes used in digital watches.It's composed by the use of roboto typographic font. A simple sans-serif typeface developed to balance content density with reading comfort and perfect for digital suport.