Context

The cooperative relied on a legacy client-server system that was outdated, unintuitive, and hard to maintain. The modernization involved migrating to a modern web-based front-end architecture, improving accessibility, scalability, and long-term maintainability. The redesign was carried out by a consulting team in partnership with the cooperative, leveraging agile practices and modern design and project management tools.

🎯The Challenge

Replace a 20-year-old outdated client-server system with a modern, scalable web platform.Consolidate fragmented functionalities into clear and accessible workflows.Provide documentation and prototypes that could support the dev team in an agile and efficient way.

My Role, Team & Stakeholders

As a UX/UI Designer, my job was to work on information architecture, user flows, high-fidelity prototyping, component library creation, handoff documentation, usability testing, and support for the dev team during implementation.

The team consisted of 10 people: Product Owner; frontend and backend developers; QA; business analysts; operations; project manager. Agile ceremonies (daily, planning, review) structured the workflow, with Azure DevOps used for backlog management and bi-weekly sprints.

The Process (summary)

• Discovery & Alignment — reviewing inputs from business analysts, stakeholder interviews, and legacy system analysis.
  
• Wireframes & Flows — optimized workflows for core operations and registrations.
  
• High-Fidelity & Component Library — standardized UI components in Figma; detailed documentation for devs.
  
• User Validation — guided usability testing sessions with users completing specific tasks on prototypes; feedback was captured, documented with AI tools, and applied to improve the designs before handoff.
  
• Handoff — delivery of specs and visual assets for development.
  
  

Deliverables

• Discovery insights translated into design direction.
  
• High-fidelity prototypes.
  
• Reusable component library.
  
• Documentation for developers.
  
  

Handoff & Developer Collaboration

To ensure a smooth transition from design to development, I implemented a structured handoff process focused on clarity and autonomy for the frontend team. This included:

• A repository containing HTML and Styled Components references, helping developers maintain visual and functional consistency.
• A Figma Dev Mode environment enriched with spacing details, annotations, and comments on behavior and edge cases.
• A high-fidelity prototype illustrating complete user flows, interactions, and visual states.

This handoff model significantly improved communication between design and development, reduced implementation doubts, and minimized rework during sprints — resulting in faster, more reliable delivery cycles.

Combining agile ceremonies with structured design documentation strengthens cross-functional collaboration.