UX-UI
Client
Citybeat s.r.l.
Role
UX/UI designer
Problem
Citybeat didn’t have a clear visual identity or a flexible design foundation that worked across all its digital platforms.
Starting from an early low-fidelity concept, the goal was to design a scalable mobile experience, ensuring consistency across multiple touchpoints while keeping the interface intuitive and user-centered.
The design system needed to be adaptable across platforms to maintain a coherent, usable, and visually aligned experience.
Process
Conducted desk research and analyzed direct and indirect competitors to identify trends, gaps, and opportunities within the market context.
Synthesized research insights, reframed the core problem, and prioritized features based on user needs and product goals.
Created initial wireframes and low-fidelity prototypes, then iterated through multiple stakeholder reviews.
Conducted usability testing with 10 users, identifying key friction points in navigation and interaction patterns. Insights from testing informed several design iterations, improving usability and overall user flow.
Designed the final high-fidelity interface in Figma, including interactions and a scalable design system with 40+ reusable components, ensuring consistency and facilitating developer handoff.
Collaborated with the team to continuously improve usability and introduce new features based on user feedback and behavioral insights, supporting the product’s evolution over time.
Design decisions
Why
Citybeat needed a consistent experience across multiple touchpoints, including the mobile app, web platform, and blog. Designing each product separately would have created inconsistencies and made future iterations harder to maintain.
Result
Created a reusable component library with defined typography, colors, UI patterns, and design rules, ensuring consistency across platforms and improving collaboration with developers.
Why
Early discussions with stakeholders revealed assumptions about navigation and user behavior that needed validation before finalizing the interface.
Result
User testing highlighted friction points and informed improvements to navigation flows and interactions, reducing the risk of building an experience based only on internal assumptions.
Why
The visual identity, interface design, and user experience needed to evolve together. A linear process would have made it harder to identify and solve usability issues at the right stage.
Result
Continuous feedback loops allowed faster refinement of both visual and functional decisions, leading to a more coherent and user-focused product.
Solution
These mockups showcase Citybeat’s interface, the result of a user-centered and iterative design process.
The final outcome includes 50+ screens supported, balancing visual clarity, intuitive navigation, and seamless interactions across the product.
Reflections
User testing didn’t just validate decisions, it actively shaped them. Iterating based on real feedback proved far more effective than relying on initial assumptions alone.
Designing across three touchpoints required thinking in systems from the beginning. Components became reusable, adaptable building blocks rather than isolated UI elements.
The challenge was creating a distinctive visual identity without compromising usability. Strong solutions emerged when visual design and functionality worked together.
The process was not linear: visual identity, UI design, and user testing continuously influenced each other. Iteration became a core part of the design strategy, not a correction phase.
![](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