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 redesign involved restructuring 10+ pages across an e-commerce platform managing approximately 20 products, requiring a more scalable and consistent design approach.
The goal was to modernize the visual identity, define a coherent design system, and improve the shopping experience while keeping the interface simple, professional, and aligned with the brand.
Process
Reviewed the existing platform to identify usability issues, layout inconsistencies, and visual misalignments.
Analyzed direct and indirect competitors in the veterinary e-commerce space to identify opportunities and define a more effective positioning.
Refined the information architecture to support clearer product discovery and established a new visual direction aligned with the brand identity.
Built a complete design system in Figma with 20+ reusable components, including colors, typography, spacing, icons, and layout grids.
Applied the system to redesign 10+ key pages, improving hierarchy, readability, and navigation across the platform.
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 complete design system and the fully implemented e-commerce platform.
Following the launch, continued refining the platform by adapting pages, layouts, and content based on evolving business needs, product updates, and client feedback.
This iterative approach ensured that the e-commerce experience remained consistent, scalable, and aligned with real operational requirements.
Design decisions
Why
The existing platform lacked consistency across a large product catalog. Redesigning pages individually would have improved isolated screens without solving the underlying scalability issues.
Result
Created a structured design system including colors, typography, spacing, and reusable components, providing a consistent foundation for the entire platform.
Why
The main usability issues were not only visual but structural. Users struggled to discover products due to unclear navigation and organization.
Result
Restructured the information architecture and browsing experience, creating clearer user paths and making the visual redesign more effective.
Why
Instead of delivering only Figma files, I implemented the redesigned experience directly in WordPress with custom HTML, CSS, and JavaScript to maintain design accuracy.
Result
Delivered a responsive platform that closely matched the original design system while ensuring consistency across devices and reducing implementation gaps.
Solution
These mockups showcase Darwinlab’s redesigned interface, focused on improving product clarity and simplifying the shopping experience.
The final result includes a responsive e-commerce platform across 10+ redesigned pages, supported by a structured design system with 20+ components, ensuring consistency, scalability, and ease of use.
The integration between design and development allowed for high fidelity between concept and final implementation.
Reflections
Designing for a veterinary e-commerce required adapting UX and visual decisions to a highly specialized domain.
I learned how to balance clarity, trust and professionalism with a modern visual language, ensuring that the interface supports both product understanding and brand credibility.
Working from Figma to a fully implemented WordPress platform reinforced the importance of designing with technical feasibility and constraints in mind.
This approach ensured a smoother design-to-development handoff and a final product that accurately reflects the original design system.
Redesigning an e-commerce with multiple pages and product types highlighted how critical informal architecture and hierarchy are for product discovery.
Clear structure and prioritization significantly improved navigation, making the browsing experience more intuitive and efficient.
![](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