top of page

HIKLUB

flying_edited.png

Responsive Web Design

HiKlub is a UX/UI design concept developed to explore interaction patterns and system structure within a context-based digital product, approached through gamification principles.


The project focused on the design of a mobile-first, responsive website, developed through iterative design sprints.


 

It included the creation of user flows, wireframes, and high-fidelity prototypes, as well as a scalable Design System built following Atomic Design principles.

Free Responsive Screen Devices4_edited.p
photo-placeholder 1_edited.png

Context & Role

Type: Freelance, short-term project
Duration: 7 months
Role: UX/UI Designer, collaborating closely with another designer across all stages
Team: Worked continuously with stakeholders, developers, and psychologists to align design with user needs and technical feasibility

DESIGN PROCESS

DESIGN PROCESS

The project was developed from an existing concept, where UX/UI design played a key role in shaping the product and integrating new features.
Work was organized through weekly design sprints, structured as follows:

Discover illustration_edited.png

Discovery & Analysis


Understanding user and business needs, reviewing existing flows, and defining how new features would integrate into the current experience.

UX Definition​

Creation of initial user flows, followed by sketching and low-fidelity wireframes.

UX definition illustration_edited_edited
Design & Prototyping_edited.png
Design & Prototyping_edited.png

Design & Prototyping


High-fidelity designs and interactive prototypes built in Figma, shared with the team for review.

Testing & Iteration


Moderated and unmoderated usability testing, with iterative improvements based on insights and team feedback.

Testing_edited.png
Final refinement.webp

Final refinement


Design adjustments and validation prior to development handoff.

UX WORK & DELIVERABLES

UX WORK & DELIVERABLES

User Flows

Structured key journeys to visualize navigation and feature logic.

Hiklub - User flow.png

Wireframes

Low- and mid-fidelity layouts to organize content and interactions.

Wireframes.webp
High fidelity test.webp

Usability Testing

Conducted moderated and unmoderated tests depending on sprint goals; unmoderated tests run in Maze with results analyzed for iteration.

Testing heatmaps.webp
Event creation.webp
AVG time - Hiklub.webp

Design System

Atomic Design-based component library ensuring visual and functional consistency.

Design system - Progress bar.jpg
Design system - typography.jpg
Design system_edited.jpg
Design system Hiklub.jpg
Design system - Gird system.jpg
Hiklub Mockup.webp
trophy_edited.png
Contact.jpg

Ready to elevate your brand?

Get in touch and let’s create something great.

Catalonia, Spain

Follow me 

  • LinkedIn
  • alt.text.label.Instagram
bottom of page