UX UI – Melise Flores – Portfolio https://meliseflores.com Check my latest work. Fri, 22 Aug 2025 08:28:12 +0000 en-GB hourly 1 https://wordpress.org/?v=6.9 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

Webshop redesign for Aqua Star

Aqua Star, a Dutch distributor of premium water sports brands, needed a webshop that did more than look good. Leading from strategy to handoff, I shaped a clear, engaging experience that met business goals and kept users coming back.

aquastar.network

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

Context

The European diving and watersports market is dynamic and highly competitive, supported by a strong base of enthusiasts and specialized companies. Over 800,000 Europeans travel each year to dive, fueling an industry worth more than €170 million annually. The surface watersports equipment sector alone generated approximately €4.9 billion in 2024, with steady growth expected in the years to come.

In this scenario, digital transformation has become essential for companies seeking to stand out. Developing an effective B2B online store not only optimizes internal processes but also strengthens the brand’s digital presence, offering a modern shopping experience aligned with market expectations.

Challenge

To meet growing market demands and stand out from the crowd, we needed a user-friendly, accessible B2B portal that reflects the brand’s identity and values while elevating the buying experience for business customers. The platform should present brand stories and product information in a clear, well-structured, and trustworthy way — inspiring confidence and reinforcing Aqua Star’s commitment to transparency and originality.

By transforming a manual, time-consuming sales process into a digital, engaging, and straightforward experience, the portal aims to improve customer satisfaction and reduce operational costs through automation and documentation.

Built-in analytics also provide valuable insights into user behavior, driving continuous improvements and supporting long-term business growth.

See it live

Solution

To bring Aqua Star’s vision to life, I started by mapping key user journeys and defining core usage scenarios. This helped visualize the experience early and make necessary adjustments before diving into design, collaborating closely with the client and the engineering team.

With the journeys defined, I created the sitemap to identify pages sharing structure and guide the design system’s components. To support scalability and smooth development collaboration, I built a flexible, component-based design system in Figma, ensuring visual and functional consistency. From there, I designed a full set of responsive desktop and mobile interfaces.

I developed prototypes and gathered user feedback from clients and customers throughout the process, which clarified navigation and integrated the brand’s visual language for a cohesive experience. Once approved, I finalized the files and delivered a developer-friendly design for a smooth handoff.

User Journey 1. B2B flow
Mission: Water Sports School wants to bulk-order for stand up paddle gear.
User Journey 2. B2C flow
Mission: Solo diver wants to buy professional dive light for personal use.
Sitemap
Clear, organized and straightfoward, different ways to reach the same product
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 final result is a responsive, conversion-oriented platform that reinforces Aqua Star’s position as a trusted B2B distributor in the European water sports market. The design improved product discovery, leading to a 25% increase in user engagement and a 15% drop in bounce rates. My strong focus on clear communication and thorough documentation of client interactions ensured alignment and smooth project delivery.

By blending functionality with storytelling, the platform boosted trust and key actions like quote requests, which grew exponentially in the first quarter. I created a modular design system in Figma, enabling 2x faster updates and consistent scalability.

This solution delivered measurable results— significant increase in product visibility, new retail partners, and stronger customer retention—all supported by transparent, well-documented client collaboration.

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 Protected: Apple https://meliseflores.com/portfolio-item/apple/ https://meliseflores.com/portfolio-item/apple/#respond Mon, 23 May 2022 14:38:41 +0000 http://julianoferrari.com.br/sites/melflores/?post_type=portfolio-item&p=2216

This content is password-protected. To view it, please enter the password below.

]]> https://meliseflores.com/portfolio-item/apple/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