UX-UI
//
FRONTEND DEVELOPMENT
Client
Darwinlab s.r.l.
Role
UX/UI Designer & Frontend Developer
Problem
Darwinlab’s existing website lacked visual consistency, clear hierarchy, and an intuitive navigation structure, making product discovery difficult for users.
The challenge was to refresh the entire look & feel, create a coherent design system, and enhance the shopping experience while keeping the interface simple, professional, and aligned with the brand’s identity.
Process
Reviewed the existing platform to identify usability issues, layout inconsistencies, and visual misalignments.
Studied direct and indirect competitors in veterinary e-commerce to see opportunities and keep the e-commerce different.
Established the new visual direction and refined the information architecture to support clearer product browsing.
Created a complete design system in Figma, including colors, typography, spacing, icons, components, and layout grids, ensuring scalability and easy implementation across all pages.
Applied the system to redesign key e-commerce pages, improving visual clarity, hierarchy, readability, and navigation for a consistent and user-friendly shopping experience.
Developed the website in WordPress, using custom HTML, CSS, and JavaScript to accurately translate the Figma design into a fully responsive and performant platform.
Delivered the full design system and the final developed website.
Provided guidance to the client on how to use and manage the new e-commerce platform effectively.
Solution
These mockups showcase Darwinlab’s refreshed interface, built to enhance product clarity and simplify the shopping experience.
Each screen reflects a cleaner visual identity, improved hierarchy, and consistent design patterns that support intuitive navigation and a smoother purchasing flow.
Reflections
I learned how to adapt visual and UX choices to a highly specialized sector, balancing clarity and professionalism with a modern aesthetic.
Working through Figma to a fully coded WordPress site highlighted the importance of designing with technical feasibility in mind, ensuring a smooth translation from screen to platform.
Redesigning an entire e-commerce taught me how much hierarchy influences product discoverability, especially in catalog-heavy platforms.
![](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