Benefiting from the collective knowledge and helps to make the visual system more modular and easier to maintain by leveraging motif design system
Credits
Role: Art directorResponsibility: Art direction, Design system, Digital experiences, UI/UX
Team: Sina Mossayeb, Chief design officer, Jaime Martinez, Director of experience, Zoey Chung, Senior designer, Sabrina Yen, Senior designer, Aishah Mulkey, Visual designer, Raza Khan, Visual designer, Meysam Qaderi, Motion designer
Overview
I led the project for a motif-based design system that captures its core values and offerings. The challenge was to find the right context for each motif and ensure a clear visual representation that resonates with all stakeholders. The solution was a modular motif system that enables Medable to create a unique look while maintaining brand style cohesion across various platforms.
Project duration
This design project took 9 months to complete, including research, explore, iterate and implementation while I’m working on other big initiatives.
The Problem
Biggest story with motif is discussing appropriate context and how it should be framing it up. Team needs to find the comfort zone of power of many and how to capture messages. There are two types of motifs – Functional & Expressive. Individual motif should be categorized into right group and has clear visual representation. The designer, developer, contractor and stakeholders absolutely understand how it works and context that represents.
The Solution
Our motif elements are all rooted in the ideas of technology and science. I focused to create variety of motif that create a unique look and make us recognizable. I created motif system in simple, modular & contemporary, so it creates applicable system that can fit in to our product and digital experience platform with brand style cohesion. These motifs shouldn't be combined, but can be emphasized or played down individually to add visual interest and enhance our storytelling. The motifs can be used a versatile manner in controlled way and within certain rules.
Understanding the system
The objective of this phase was to gain a deep understanding of Medable's core values, offerings, and target audience, as well as the current design landscape. The goal was to leverage collective knowledge and insights to create a visual system that resonates with all stakeholders, from designers to developers, and ultimately enhances Medable's brand identity. I explored with the keyword, mood board, structure map that laid the foundation for the successful development of the motif-based design system.
Exploration
After conducting thorough research, I develop its motif-based design system. The objective was to create a system that captures Medable's core values, including scale, connection, growth, decentralization, and patient-centricity, while representing technology and science. To achieve this, I categorized motifs into functional and expressive and created a variety of variations that create a unique look and make Medable recognizable.
Motif
Motifs are a key part of Medable’s graphic system. Our motifs always focus on the core things we provide as medable. As such, they capture the story of multiplicity: The power of many to achieve great things.
Iteration
After I shared the first round of design system, I received feedback from stakeholders, including designers and developers, indicating the need for a more modular system that ties more closely with Medable's values. To address this feedback, I conducted multiple iterations of the design, exploring different approaches and gathering feedback at each stage. The objective was to refine and improve the Medable motif design system, leveraging a collaborative approach and the results achieved through iteration.
Additional exploration
This methodology is focusing on distinctive core shape to categorize the group. And, it will be 3 different variations for each group.
- Elementals (circle, square, line, arrow) combine to make patterns
- Simple elements make larger ones
Execute
I dive deeper into the concept of motifs with grid and how they could be used to create a cohesive visual system that aligns with the company's vision. I explored different variations of motifs that could represent Medable. This phase was crucial in establishing the foundation for the Medable design system, as we began to develop a unique look that could be applied consistently across various products and platforms.
Implement
I created individual motifs involved building a variety of components in Figma, such as variants of grid, color, and direction. These components were designed to enable the creation of unique, recognizable motifs that capture Medable's core values. By using Figma to create these components, the team was able to ensure that the design was consistent, modular, and versatile, and that the motifs could be seamlessly integrated into Medable's product and digital experience platform.
Going forward
With the Medable design system in place and implemented across a range of materials and products, the team is now focused on the future. Furthermore, the motif-based design system will continue to evolve and grow in response to the needs of Medable's target audience and the changing landscape of the healthcare industry.