Design System
This case study outlines the development and implementation of a design system for a medical application that previously suffered from design inconsistencies due to the contributions of multiple designers. The absence of a unified system led to a cluttered, unprofessional look, with icons that did not communicate effectively or align with the app's care services theme.
My Role
• Concept
• UI/UX Design & Research
Tools
• Figma
• Miro
• Adobe Illustrator
Research
The medical app in question faced significant UI/UX challenges. It lacked a cohesive design language, which affected the app's functionality and user experience.
The objective was to create a design system that would bring consistency and clarity to the user interface, thereby enhancing the overall user experience.
The goal is to create a unified design system that enhances the user experience for both customers and developers.
User-Centric Approach and App Evaluation
Design System Development
Objectives
Unify the app's visual style, redesign icons to align with healthcare themes, establish a clear icon hierarchy, create a clean and trustworthy interface, clarify icon functions for better user understanding, and provide developers with a standardized icon library and clear guidelines to facilitate efficient and error-free app development.
Tackling Complex Challenges Head-On
Design Challenges
Addressing these challenges required a combination of careful planning, effective communication, and a commitment to the overall goal of improving the medical application's user experience through a cohesive design system.
Multiple Design Contributors
One of the primary challenges was dealing with the legacy of multiple designers contributing to the app's interface over time. This had resulted in a mishmash of styles, making it difficult to create a unified design language.
Icon Inconsistencies
The existing icons lacked consistency in terms of style, size, and metaphors used. This inconsistency confused users and affected the app's overall usability.
Maintaining Accessibility
Ensuring that the new design system was accessible to a diverse user base, including those with disabilities, was a significant challenge. This required careful consideration of color contrast, text legibility, and screen reader compatibility.
Balancing Aesthetics and Functionality
Striking the right balance between creating an aesthetically pleasing design and ensuring the app's functionality was not compromised was a constant challenge. Some design choices had to be made with trade-offs in mind.
User Adoption and Training
Implementing the new design system required training sessions for the design and development teams. Ensuring that all team members understood and consistently applied the system's guidelines was a logistical challenge.
Feedback Integration
Gathering and incorporating user feedback during and after the implementation of the design system posed challenges. It required a streamlined process for feedback collection, analysis, and prioritization.
Iterative Improvement
The design system was an evolving entity, and maintaining it over time to adapt to changing user needs and technological advancements was an ongoing challenge.
Resistance to Change
Some team members may have been resistant to adopting the new design system due to familiarity with the old interface. Managing this resistance and facilitating a smooth transition was a challenge.
Interaction Consistency
Achieving uniform interaction patterns across the app, including gestures and animations, was a demanding task.
Methodology
The project began with an audit of the existing UI elements. We cataloged the various icon styles, identified inconsistencies, and noted areas where the iconography did not align with the service's intent.
A cross-functional team, including UI/UX designers, a content strategist, and a front-end developer, collaborated on the creation of a new design system.
Harmonizing Form and Function
Design Pillars
Design Unity
Establish a consistent design language across the app to ensure that all visual elements look like they belong to the same family.
Icon Revamp
Redesign icons to better reflect the app's focus on care services, making them more relevant and empathetic to users' needs.
Icon Hierarchy
Implement a clear hierarchy for icon usage, defining which icons are the most important and should be most prominent.
Clean Interface
Create a professional and uncluttered visual interface that communicates a sense of trust and competence.
Icon Clarity
Improve iconography to ensure that each icon clearly communicates its function, reducing user confusion.
Dev Efficiency
Streamline the development process by providing developers with an easy-to-use icon library, which standardizes icon implementation and speeds up development time.
Tooling Precision
Provide developers with tools and clear instructions to easily integrate design elements, ensuring uniformity and minimizing errors.
Accessible Design
Enhance accessibility in the design system for universal usability and inclusivity.
Interactive Elements
Integrate dynamic user interactions within the design system to create engaging and responsive elements that improve user engagement and satisfaction.
Results
Post-implementation, user feedback indicated a significant improvement in the app's usability and aesthetic appeal. The clear, consistent iconography improved user comprehension and navigation within the app. The professional look and feel of the app also positively impacted user trust—a crucial factor in medical applications.
Summary
The design system implementation significantly improved usability, enhanced the app's visual appeal, clarified iconography for efficient navigation, and projected a more professional and trustworthy image, all contributing to a positive user experience and perception of the application.
Implementation
We harnessed the collaborative power of Figma for implementing the design system. Figma served as a centralized hub for our design assets, enabling real-time collaboration among our cross-functional team.
With Figma, we created and maintained our design system components, including color palettes, typography styles, and icons, ensuring everyone had access to the latest assets without version control issues.
Figma's collaborative features facilitated efficient communication and iteration, allowing designers, content strategists, and developers to work concurrently. Real-time feedback and prototyping capabilities helped validate design decisions and user flows before implementation, ensuring a successful design system transformation for the medical application.
Discussion
The observed improvements in usability and user experience can be attributed to the successful establishment of a consistent design language. The design system's guidelines provided a framework for streamlining interactions, reducing cognitive load, and improving overall user satisfaction.
Clearer and more consistent iconography contributed directly to enhanced user comprehension and navigation. The user-centric approach taken during icon redesign, focusing on functionality and relevance, yielded positive outcomes in terms of user satisfaction.
In the context of medical applications, user trust is paramount. The professional look and feel achieved through the design system positively influenced user perceptions. Users were more likely to trust the application with their healthcare needs, fostering a stronger connection between the user and the platform.
References
- Apple Human Interface Guidelines. (2022). Apple Inc.
- Material Design Guidelines. (2022). Google Design.
- HealthIT.gov - Health IT Usability Playbook. (2022). U.S. Department of Health and Human Services.
Design System Impact
Conclusion
The development and implementation of our design system have fundamentally transformed our medical application. We've achieved consistency, clarity, and enhanced user trust through a professional and uncluttered interface. Users now navigate with ease, benefiting from improved usability and accessibility. Our iterative approach ensures future relevance, and team alignment fosters a more efficient workflow. This project underscores the pivotal role a well-executed design system plays in enhancing user experience and trust, positioning our application for continued success in the healthcare sector.