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. The goal was to create a consistent visual style and design a user-friendly interface, using an iterative process informed by user research. The design system had to be adaptable to different platforms to keep the experience coherent, usable, and visually aligned everywhere.
Process
Conducted desk research, analyzed direct and indirect competitors to identify trends, gaps, and opportunities within the market context.
Consolidated insights from research, reframed the core problem, and prioritized features based on user needs and project goals.
Created initial wireframes and low-fidelity prototypes, refined the final prototype through multiple meetings with the CEOs, then ran usability tests with target users and iterated on the UI to improve usability, navigation, and interactions based on feedback.
Designed the final high-fidelity UI in Figma, including visual design, interactions, and component library, and delivered the prototype to the development team for implementation.
Collaborate with the team to enhance the overall usability of the app and introduce new features based on user suggestions and behavioral data, ensuring the product evolves effectively over time.
Solution
These mockups showcase CityBeat’s interface, the result of a user-centered design process. Every screen was carefully crafted to balance visual clarity, intuitive navigation, and seamless interactions, refined through multiple rounds of user testing and iterative prototyping.
Reflections
The user interviews were not just for validation, they actively guided design decisions. I learned that iteration based on real feedback leads to more effective solutions than initial assumptions, even when those assumptions seem solid.
Designing for three different touchpoints (app, web, blog) required a modular approach from the start. I understood the importance of thinking of components as reusable and adaptable elements, not just one-off solutions for a single context.
The biggest challenge was creating a distinctive visual identity without compromising usability. I learned that the best designs emerge when creativity and functionality inform each other, rather than compete.
The process was not linear: visual identity, UI design, and user testing overlapped and influenced each other. I realized that continuous iteration is not a failure in planning but an essential feature of good UX design.
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 28 28" xmlns="http://www.w3.org/2000/svg"><path d="M 21.16 24.957 C 19.09 24.957 16.796 24.192 14.476 22.834 C 14.594 22.267 14.621 21.595 14.581 21.067 C 16.849 22.531 19.156 23.427 21.16 23.401 C 22.649 23.388 23.955 22.887 24.943 21.806 L 25.102 21.621 C 25.563 21.133 25.787 20.646 25.787 20.21 C 25.787 19.789 25.589 19.433 25.168 19.156 L 22.083 17.073 C 21.608 16.756 21.147 16.69 20.58 16.954 L 18.312 18.035 C 17.336 18.497 16.625 18.404 15.913 17.917 C 15.056 17.35 13.566 16.124 12.366 14.937 C 11.18 13.724 10.085 12.327 9.453 11.404 C 8.965 10.692 8.899 10.033 9.387 9.255 L 10.718 7.146 C 11.022 6.645 11.022 6.302 10.771 5.933 L 8.345 2.32 C 8.055 1.898 7.712 1.714 7.291 1.714 C 6.869 1.714 6.368 1.938 5.88 2.386 L 5.682 2.558 C 4.614 3.533 4.113 4.825 4.1 6.302 C 4.074 8.385 5.076 10.85 6.671 13.25 C 6.091 13.21 5.471 13.263 4.865 13.381 C 3.375 10.929 2.544 8.477 2.544 6.302 C 2.544 4.245 3.138 2.703 4.548 1.397 L 4.812 1.16 C 5.656 0.382 6.5 0 7.277 0 C 8.108 0.013 8.912 0.475 9.624 1.49 L 12.195 5.234 C 12.788 6.078 12.696 7.066 12.182 7.884 L 10.969 9.795 C 10.745 10.151 10.718 10.428 10.916 10.784 C 11.298 11.47 12.261 12.669 13.434 13.869 C 14.594 15.056 15.913 16.084 16.519 16.453 C 16.954 16.717 17.323 16.717 17.758 16.506 L 19.841 15.504 C 20.988 14.95 21.845 15.016 22.768 15.649 L 26.011 17.851 C 27.026 18.549 27.488 19.38 27.488 20.21 C 27.488 21.001 27.119 21.845 26.328 22.689 L 26.104 22.939 C 24.772 24.363 23.243 24.957 21.16 24.957 Z M 6.552 27.831 C 2.966 27.831 0 24.877 0 21.265 C 0 17.679 2.966 14.713 6.552 14.713 C 10.151 14.713 13.105 17.679 13.105 21.265 C 13.105 24.864 10.125 27.831 6.552 27.831 Z M 6.552 25.431 C 6.987 25.431 7.264 25.141 7.264 24.719 L 7.264 21.977 L 10.006 21.977 C 10.415 21.977 10.705 21.7 10.705 21.265 C 10.705 20.843 10.415 20.566 10.006 20.566 L 7.264 20.566 L 7.264 17.824 C 7.264 17.416 6.987 17.125 6.552 17.125 C 6.117 17.125 5.854 17.416 5.854 17.824 L 5.854 20.566 L 3.098 20.566 C 2.689 20.566 2.399 20.843 2.399 21.265 C 2.399 21.7 2.689 21.977 3.098 21.977 L 5.854 21.977 L 5.854 24.719 C 5.854 25.141 6.117 25.431 6.552 25.431 Z" fill="rgb(6, 96, 78)" height="27.83055057067871px" id="L6OCuAXw_" transform="translate(0.488 0.023)" width="27.48780693161011px"/></svg>)
Contact
I welcome the opportunity to connect with you and discuss how my background aligns with your needs. Please feel free to contact me through the contact you can get by pressing below:
©danielelepore