UX-UI
//
FRONTEND DEVELOPMENT
Client
PalextraFano s.r.l.
Role
UX/UI Designer & Frontend Developer
Problem
The previous Palextra website lacked a clear visual hierarchy and a consistent interface, making it difficult for users to find courses, schedules, and membership information.
The redesign involved improving 10+ pages, restructuring content and navigation to better support different user types.
The goal was to create a professional, intuitive, and responsive platform that improves accessibility, clarity, and overall user experience.
Process
Analyzed the existing website to identify usability issues, content gaps, and visual inconsistencies.
Reviewed competitor gym platforms to identify best practices and opportunities to improve the user experience.
Defined a clearer information architecture and visual direction focused on accessibility and usability, tailored to both existing members and potential clients.
Designed a focused UI system in Figma with 20+ reusable components and sections, including typography, colors, and layout rules.
Applied the system across 10+ pages, improving hierarchy, readability, and content organization.
Implemented the redesigned website in WordPress using custom HTML, CSS, and JavaScript, ensuring a fully responsive and accessible experience aligned with the Figma designs.
Delivered the full website along with the design system and high-fidelity screens.
Following the launch, iterated on the product by updating pages and content (such as courses, schedules, and offerings) to reflect ongoing changes in the gym’s structure.
This required maintaining consistency while adapting the interface to evolving business needs.
Design decisions
Why
The website served two main groups with different goals: existing members looking for schedules and information, and potential customers exploring services and memberships.
Result
Designed clearer navigation paths that helped users reach relevant information faster without adding unnecessary complexity.
Why
Unlike large-scale platforms, Palextra was an informational website requiring consistency without unnecessary complexity or over-engineering.
Result
Created a focused visual system with reusable components, maintaining brand consistency while keeping the design process efficient.
Why
Most users access fitness schedules and services through mobile devices, making responsive behavior a key part of the experience rather than an additional step.
Result
Implemented a fully responsive website aligned with the Figma designs, ensuring usability and visual consistency across devices.
Solution
These mockups showcase Palextra’s redesigned interface, focused on improving clarity and ease of navigation.
The final result includes 10+ optimized pages supported by a lightweight design system with 20+ reusable components, ensuring consistency while keeping the experience simple and effective.
The platform is fully responsive, allowing users to easily access schedules, courses, and membership information across devices.
Reflections
This project highlighted the importance of structuring content and navigation to support users with different goals, such as existing members and potential clients.
Creating distinct yet simple user paths improved usability without increasing interface complexity.
Organizing schedules, course details, and membership information reinforced how critical hierarchy and content prioritization are in making complex information easy to navigate and understand.
Designing the platform strengthened my ability to translate a physical brand into a digital product, balancing visual identity, usability, and responsiveness to create a cohesive experience.
![](data:image/svg+xml,<svg display="block" id="2641308206" role="presentation" viewBox="0 0 26 31" xmlns="http://www.w3.org/2000/svg"><path d="M 3.013 21 C 2.036 21 1.289 20.742 0.773 20.225 C 0.258 19.714 0 18.967 0 17.982 L 0 9 C 0 8.52 0.047 8.096 0.142 7.73 C 0.236 7.378 0.396 7.047 0.613 6.757 C 0.833 6.475 1.117 6.21 1.467 5.964 L 8.96 0.766 C 9.701 0.255 10.376 0 10.987 0 C 11.597 0 12.273 0.255 13.013 0.766 L 20.533 5.964 C 20.883 6.21 21.164 6.475 21.378 6.757 C 21.6 7.044 21.76 7.376 21.849 7.73 C 21.949 8.096 22 8.519 22 9 L 22 17.982 C 22 18.967 21.751 19.714 21.253 20.225 C 20.756 20.742 20.065 21 19.182 21 Z M 3.049 19.135 L 18.951 19.135 C 19.336 19.135 19.632 19.03 19.84 18.82 C 20.053 18.615 20.16 18.312 20.16 17.91 L 20.16 8.847 C 20.16 8.618 20.136 8.42 20.089 8.252 C 20.045 8.091 19.97 7.941 19.867 7.811 C 19.761 7.669 19.632 7.546 19.485 7.45 L 11.875 2.216 C 11.55 1.994 11.25 1.883 10.978 1.883 C 10.711 1.883 10.418 1.994 10.098 2.216 L 2.516 7.45 C 2.356 7.558 2.226 7.679 2.125 7.811 C 2.027 7.943 1.955 8.093 1.911 8.252 C 1.864 8.42 1.84 8.618 1.84 8.847 L 1.84 17.9 C 1.84 18.303 1.944 18.609 2.151 18.819 C 2.365 19.03 2.664 19.135 3.049 19.135 Z M 10.995 10.846 C 11.306 10.844 11.615 10.906 11.902 11.027 C 12.193 11.146 12.48 11.336 12.765 11.594 L 21.031 19.144 L 19.866 20.324 L 11.76 12.928 C 11.517 12.7 11.262 12.585 10.995 12.585 C 10.735 12.585 10.48 12.7 10.231 12.928 L 2.134 20.324 L 0.96 19.144 L 9.235 11.594 C 9.519 11.336 9.804 11.147 10.089 11.027 C 10.376 10.906 10.684 10.845 10.995 10.847 Z M 2.222 6.838 L 8.498 13.198 L 7.316 14.378 L 1.058 8.027 Z M 19.787 6.829 L 20.951 8.027 L 14.684 14.378 L 13.493 13.198 Z" fill="rgb(5, 97, 78)" height="21px" id="hQkO5vczd" transform="translate(2 5)" width="22px"/></svg>)
Contact
Interested in working together or discussing a project? Feel free to get in touch - I’d be happy to connect.
©danielelepore