Redesign and Scale
Task completion time cut in half. Development speed doubled...This is how we transformed Fynn's senior living management system.
Okay, so, quickly: great client, knew their issues, knew what they wanted to solve. Focused on the Bulk ADL feature (that’s basically a preview of scheduled activities for elderly residents...Google it if you want more). Started with lo-fi, then hi-fi designs, then user testing. All went great. Got a lot of valuable insights, iterated on it, and ta-da—feature done. In parallel, we built a UI library based on the Ionic framework. In the process, we understood that some devs wanted Angular, some Ionic (pull yourselves together!). The file was getting larger since we started moving to other features, so we needed to understand how we were going to organize the pages and document our design decisions. After the successful launch of the Bulk ADL feature, we reduced the time to complete the task by 50%. We are now focusing on a new, much more complex feature. We just finished with interviews, all is going well, and development will start soon.
Intro
Fynn, U.S.-based technology company specializing in senior living care management systems, approached us six months ago to redesign their “Activities of Daily Living” feature. This feature needed a complete rethink and rebuild, not just to enhance its usability but also to establish a scalable design system that could support the company’s broader goals.
The system had become a patchwork of different frameworks - Ionic, Angular, and Bootstrap all mixing in ways they shouldn't.
Our mission was to:
- Streamline the user experience
- Modernize the interface
- Build a cohesive design patterns
With no ready-made Ionic UI kit in Figma, we had to craft our own solution that would bridge the gap between design and development, while setting up Fynn for future scalability.
Switch on the console, we are synchronized...
Design Discovery Path
Initial discovery call focused on current issues and future plans. Understanding future goals helped connect present needs with upcoming requirements. We set clear scope and expectations to avoid overdesigning. This approach let us focus on core problems without scope creep.
Process followed these steps:
- Created lo-fi designs for quick solutions
- Used simple wireframes to test concepts
- Generated multiple design approaches
- Focused on core functionality
- Presented options with pros/cons to Fynn team
- Explained each design decision
- Documented team feedback
- Discussed implementation challenges
- Got direction and feedback in first call
- Selected main design direction
- Added new requirements
- Refined scope based on feedback
- Built hi-fi prototypes from approved concepts
- Used design system components
- Created interactive elements
- Defined user flows
- Conducted in-person user testing
- Observed physical interactions
- Recorded user feedback
- Noted pain points
In-person testing showed both screen interactions and device usage patterns, giving deeper insights into user behavior. This revealed how users physically handled devices while completing tasks, which influenced our final design decisions.
More input, output, and feedback...
Process Framework
We established a streamlined workflow:
- Start with Jira user stories and requirements
- Move through design phase
- Run refinement sessions with dev and product teams
- Get approvals before development
- Perform visual QA before production
- Release and collect feedback
- Make data-driven iterations
Teams review work during refinement sessions to catch issues early. Visual QA ensures design matches implementation. Frequent releases let us gather user feedback and improve features based on real usage.
Documenting Decisions
We tested different ways to present design decisions:
- Figma sections with color coding
- Custom annotation system
- Combined dev and product notes
- State management documentation
This led to clear documentation structure where both development team and stakeholders know where to look. Notes system points to key areas and explains states, making handoff process direct.
Final workflow helps teams read designs and focus on important details without missing critical information.
All in all, it’s just another brick in the wall...
Setting the Stage
The initial meetings with Fynn's development team focused on understanding their technical stack and requirements. We identified two key factors:
- Their planned transition to Ionic for future development
- And their existing commitment to Angular and Bootstrap in current projects.
This discovery phase helped us understand the constraints we needed to work within.
Building Strong Foundations
We started with the basics. Creating simple, root-level tokens for colors, typography, and spacing that matched Ionic's structure. This made our system immediately understandable to developers.
For components, we took a dual approach, creating core components based on Ionic's properties and custom ones for specific features. Each component was built from smaller, reusable parts, making future updates simpler.
We kept our Figma files clean with three distinct sections: foundations, native components, and custom components. This structure eliminated confusion and made the system easy to navigate.
Streamlined Visual QA Process
Without access to Storybook, we developed a straightforward Visual QA process. The development team built a component showcase page that displayed all built elements. We used this to systematically compare the coded components.
Pattern Documentation
We built a rulebook for patterns with developers. Documentation covered patterns:
- Navigation
- Filters
- Drawers
- Grid behaviors
Our documentation works for designers and developers by showing:
- Component breakdowns
- Building blocks
- Usage rules
- Resolution behaviors
- Spacing specs
- Token mapping
This rulebook improved workflow. Teams used specs without meetings, cutting development time. Pattern standards increased team efficiency by 13%, with faster builds and less revisions.
By pressing down a special key, it plays a little melody...
Profile Structure Redesign
We redesigned the resident profile layout and navigation to solve its complexity issues. The profile serves as a central hub for resident information, actions, and document management at Fynn. Having all features on one page created difficulties for users to find what they needed.
Our solution:
- Split information into tabbed groups
- Focus users on one task at a time
- Keep actions accessible where needed
- Move complex forms into drawers
- Keep resident context visible during tasks
Process differences from previous feature:
- Used existing design system components
- Conducted user interviews instead of testing
- Changed layout while maintaining functionality
- Introduced drawer pattern for forms and detailed information
The drawer pattern keeps user context by showing resident details throughout interactions. While single pages might work better for complex forms, drawers provided a faster solution with our existing components. Initial user feedback was positive, though we continue monitoring its effectiveness across the app.
We applied existing components to speed up development and test their real usage. This validated our design system while letting us focus on solving navigation and layout challenges.
The Parts That Make The Whole...
Building Better Teamwork
We focused on two key areas:
- Connecting teams working on current and future products
- Creating standard practices everyone could follow.
This unified approach helped maintain consistency while preparing for future growth.
Results
The redesign delivered three clear wins:
- First, we cut task completion time in half by streamlining the "Activities of Daily Living" feature.
- Second, our new design system now powers faster development across all projects.
- Third, by aligning our design structure with development needs, we made implementation smoother despite working with multiple frameworks.
Lessons Learned
Three essential insights emerged from this project:
- First, technical stack decisions must be finalized before design system work begins - our split between Ionic and Angular created unnecessary complexity.
- Second, we succeeded by keeping the system simple and focused on core needs.
- Third, constant communication between design and development teams prevented issues from growing into obstacles.
Moving Forward
Our roadmap is focused on three core objectives:
- Complete the transition to a single framework
- Strengthen team collaboration processes
- Expand our design system for new product features
With these foundations in place, Fynn is ready to scale efficiently while maintaining product quality.