Pilot Design System - ForeFlight Jepessen
ForeFlight's multiple mobile & web services were built by a 14-person design team. The need for visual processes and a coherent user experience that can scale was more than evident as the team grew. Without a standard system and methods, different people will contribute new styles and principles over time, causing the overall product experience to diverge and devalue.
Client
ForeFlight Jepessen
DELIVERABLES
Token Structure, Component Library, SF Symbols, Accessibility Mapping, Contribution and Governance models, Code Connect Implementation
Year
2019-2020
Role
Lead Product Designer
In 2019, this was a self initiated project that nobody wanted to within the 14-person design team due to the lack of tangible immediate outcomes. However, the need for visual processes and a coherent user experience that can scale was more than evident as the team grew. Without a standard system and methods, different people were contributing new styles and principles over time, causing the overall product experience to diverge and devalue. As a sole designer, I focused my efforts on creating solid fundamentals and a pilot styles in order to bring team members along the journey and become advocates for the upcoming component changes.
Step 1 : Design system education
Aligning designers, developers, and stakeholders about what a design system as a product is was though. I had to make multiple presentations on the topic and workshops. In the end what really drove the point home was the diagram below which organized all the different files and made the connection between the different part of the system.
Step 2 : Simplify current UI patterns
Auditing and unifying the existing patterns and libraries to create a solid base that the teams can work and expand on. I knew that without this I would face an extreme pushback for the new architecture.
Step 3 : Unified iconography & typography
This was the year that Apple introduced SF Symbols and nobody knew how to create them. I knew that with time typography as an icons will be increasingly important for this iOS product so I lean into the idea early on. I've found a way how create them by using only the tools at our disposable and written a step by step tutorial here. As part of this effort, I led the migration of the entire typography system from Helvetica Neue to San Francisco, aligning the product with current and future Apple OS typography standards. I documented font token mappings, text styles, and usage guidelines, and validated the system-level impact across surfaces. The transition required no additional engineering work, as it leveraged native OS typography behaviors and existing implementation patterns.
Step 4 : Improved color accessibility
Since the business product was used in areas of bright direct sunlight or very dim night flight environments. Improving accessibility was one of the many outcomes of that work making every important text differentiated from its immediate neighbors.