UX UI – Melise Flores – Portfolio https://meliseflores.com Check my latest work. Tue, 25 Aug 2026 22:28:48 +0000 en-GB hourly 1 https://wordpress.org/?v=7.1.3 https://meliseflores.com/wp-content/uploads/2022/05/cropped-cropped-thumbnail-32x32.png UX UI – Melise Flores – Portfolio https://meliseflores.com 32 32 Aqua Star Network https://meliseflores.com/portfolio-item/aqua-star-network/ https://meliseflores.com/portfolio-item/aqua-star-network/#respond Tue, 27 May 2025 12:29:53 +0000 https://meliseflores.com/?post_type=portfolio-item&p=3530

Redesigning Aqua Star’s digital commerce experience

From manual sales processes to a structured, multi-path commerce experience for B2B and consumer audiences.

see it live: aquastar.network

UX / UI
VISUAL DESIGN
DATA ANALYSIS
DESIGN STRATEGY
USER FLOWS
PROJECT MANAGEMENT

Context

Aqua Star Network is a Dutch watersports distributor representing specialized brands across Europe. The project focused on redesigning its digital commerce experience to support both product discovery and B2B sales, while giving the brand a stronger digital presence.

 

The goal was to move from a largely manual sales experience to a structured, scalable platform where customers could discover products, explore brands and find the right path to purchase or engage with Aqua Star.

Challenge

Aqua Star needed to replace a fragmented, manual sales experience with a digital platform that could serve different types of users without compromising the brand experience.

The main UX challenge was to make a large and diverse product offering easy to explore and understand, while supporting different paths through the experience from discovering a product by category or sport to exploring a specific brand or engaging with Aqua Star as a business customer.

The platform needed to:

  • simplify product discovery and navigation;
  • support both B2B and consumer-facing journeys;
  • organize products across multiple categories, brands and sports;
  • communicate product and brand stories clearly;
  • create a consistent experience across desktop and mobile;
  • provide a scalable foundation for future content and products.

This required balancing user needs, commercial goals and technical constraints within one coherent experience.

See it live

Solution

I started by mapping key user journeys and usage scenarios to understand how different audiences would navigate the platform.

Rather than designing individual pages in isolation, I used these journeys to define the information architecture, sitemap, and reusable page structures first.

The architecture was designed around multiple discovery paths, allowing users to reach products through different entry points such as categories, brands and sports.

I then translated these structures into a component-based design system in Figma, creating reusable patterns that could support the breadth of the platform while maintaining consistency across responsive layouts.

 

Prototypes were used to validate navigation and interaction patterns with the client and customers throughout the process. Feedback was incorporated iteratively before finalizing the UI and developer handoff.

B2B Flow
Goal: Find and purchase products for a business.
B2C Flow
Goal: Discover and purchase a product for personal use.
What this informed: Navigation; product discovery; entry points; CTA Hierarchy; Account/access requirements
Information Architecture
Multiple paths. One product destination.

Impact

A unified digital commerce experience.

Product discovery, brand storytelling and B2B engagement were brought together within a single responsive platform.

A scalable design foundation

A component-based system enabled consistent UI patterns across the platform and simplified future expansion.

A clearer path to commerce

Users can reach products through multiple entry points, including brands, sports and categories, while dedicated B2B pathways support business customers.

Measurable impact*

+25% user engagement
−15% bounce rate
2× faster design updates

*Measured after launch vs. previous period

What the client said
"Working with Melise was a great experience. Precise, organized and creative. I can recommend her"
Frans de Pater
Founder - Aqua Star Network

Results

The project resulted in a responsive commerce platform that connects product discovery, brand storytelling and B2B engagement within one experience.

The final design provided Aqua Star with:

  • a clearer information architecture;
  • multiple, consistent routes to product discovery;
  • responsive desktop and mobile interfaces;
  • a reusable component-based design system;
  • prototypes and developer-ready specifications;
  • a foundation that could scale across products, brands and content.

 

The live platform now brings together product categories, sports, brands, editorial content and dedicated B2B pathways in a single digital experience.  

See it live

Credits & Mentions

Special thanks to Frans de Pater and the entire Aqua Star Network team for trusting me with this project. Grateful as well to the team at Utilize in Hilversum – NL for their valuable insights and dedication throughout the development phase.

]]> https://meliseflores.com/portfolio-item/aqua-star-network/feed/ 0 Hogarth Worldwide https://meliseflores.com/portfolio-item/hogarth-worldwide-case-study/ https://meliseflores.com/portfolio-item/hogarth-worldwide-case-study/#respond Tue, 26 Jul 2022 10:47:36 +0000 https://www.meliseflores.com/?post_type=portfolio-item&p=3109

Custom and component-based site for Hogarth

HOGARTH.COM

Hogarth Worldwide, part of the WPP group, is the largest creative content production specialist globally. It creates and distributes content across various channels for companies like Coca-Cola, Nestlé, Instagram, and Galderma.

Tools

Pen & paper (always my starting point!), MIRO for remote workshops, Sketch App for UX UI, InVision for prototypes, Zeplin for development handoff.

 

Credits & Mentions

Account, Project Management, SEO Specialist, Creative Director, Art direction, UX UI Design, Development (Front-End, Back-End), Copywriter, Content Management, Quality Assurance (QA), Business Analysis (BA); Project / Stakeholders: Hogarth Worldwide UK; Execution: Hogarth Brazil; Rebranding: Landor | Brand consulting and design

]]> https://meliseflores.com/portfolio-item/hogarth-worldwide-case-study/feed/ 0 Why https://meliseflores.com/portfolio-item/why-branding-website/ https://meliseflores.com/portfolio-item/why-branding-website/#respond Wed, 23 Mar 2022 17:11:40 +0000 https://julianoferrari.com.br/sites/melflores/?post_type=portfolio-item&p=1688

Minimalistic site for brand strategy studio

WHY.COM.BR

Why is a branding studio based in Brazil that helps brands find their own voice and trace a strategy for communication.

Context & Goals

After getting a fresh new brand work done to a more fresh and colorful look, the strategy studio needed to unfold all this new identity to a fresh look, eye-catching, responsive and easy to update website.

Design Process

I like to use the Design Thinking approach to lead the projects; In my experience, this metodology produces great results, greater pace, and fluidity for the project.

Kick Off

A great project always starts with a great “offline” workshop and brainstorm. With the right questions we can reach the right answers and the strategy and paths to follow became to gain some kind of shape. On the first workshop, we were able to define the desired aesthetics & look and feel, copy, main references & goals for UX / UI.

Wireflow

With the ideas clear, we organize the storytelling, flow and main structure. I want to make sure the main architecture of the website is correct, and every page it’s placed so the site can be launched and grow over time.

Wireframes

& first prototypes

After receiving and categorising the copy, I started to make some sketches to study hierarchy, weights and overall structure of the pages – both mobile and desktop versions. The best ideas were shared and approved with stakeholders and made possible moving forward to the UI phase.

low fidelity wireframes and first sketches

high fidelity wireframe and prototype

UI Elements

The basic elements for this phase were already provided by the brand guide, so the effort was to organize it by relevance, shades, and of course creating the design system around it – button styles, heading tags, icons, etc. This great and organized library makes the creative part seamless and save time for further site expansions.

HIGHLIGHTED TEXT
BODY TEXT

Mobile & Desktop Screens

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.

Credits & Mentions

Stakeholder: Why Branding

Logo design & visual identity: Gabriel Fagundes

]]> https://meliseflores.com/portfolio-item/why-branding-website/feed/ 0 SportsAid https://meliseflores.com/portfolio-item/sportsaid/ https://meliseflores.com/portfolio-item/sportsaid/#respond Thu, 28 Jan 2021 12:36:00 +0000 https://www.meliseflores.com/?post_type=portfolio-item&p=3165

Product Design for SportsAid

SPORTSAID

SportsAid is a renowned British charity that helps athletes get financial support to compete at an Olympic level.

Tools

Pen & paper (always my starting point!), MIRO for remote workshops, Adobe XD for UX UI, InVision for prototypes, Zeplin for development handoff.

]]> https://meliseflores.com/portfolio-item/sportsaid/feed/ 0