Design System for a Mobile App
Building a design system for a new product.
Role: Product Designer.
The Situation
Building a design system for a new product.
I joined the company as a Product Designer to work on the development of a new mobile app. This app was to be the evolution of existing legacy software.
The primary purpose of this app was to help engineers from energy companies organise their work and help them complete tasks in the field.
The project had already undergone a six-month discovery process with an external consultancy when I joined. My job was to bring the design process in-house, own the design assets and develop a complete design system for the cross-platform mobile app.
The Task
Owning and managing the design system.
My job was to own the design assets and develop a complete design system for the new app. So, I used the opportunity to catch up with the team, see what they needed from the design system, and make changes if necessary. I also aligned the approach to the delivery of MVP 1.
Goals:
- Own and manage the design system
- Create a design system for all team members
- Develop a design system and UI to support the release of the product’s MVP 1
Actions
1 - Align to the product roadmap.
Because I was new to the team, I needed to understand first all the work that the group had done. So I discussed with the team if changes were necessary for handover to developers, options for shared documentation, and version control. I also created a backlog for the design system work and scheduled time for design system maintenance.
- Worked with UX consultant to understand the app
- Worked with developers to understand how they currently use the design system
- Worked with product owners to understand the product strategy and align the design system to that (for example, cross-platform strategy.
2 - Collaborating to design the structure and focus of the system.
Because I was new to the team, I needed to understand first all the work that the group had done. So I discussed with the team if changes were necessary for handover to developers, options for shared documentation, and version control. I also created a backlog for the design system work and scheduled time for design system maintenance.
- Worked with UX consultant to understand the app
- Worked with developers to understand how they currently use the design system
- Worked with product owners to understand the product strategy and align the design system to that (for example, cross-platform strategy)
3 - Structure the design process.
I worked with the Product Owner and the rest of the team to create a workflow for creating designs and for having efficient handovers of the work to the developers.
- Create a backlog with tasks related to the design system
- Start high-fi prototypes from validated wireframes
- Identify in the design the relevant components for each platform
- Review the design with the product owner
- Incorporate feedback from developers
- Create documentation for the UI flow and components
Results and Learnings
- Design systems are an essential tool to make sure the product we build has components with clean code, consistent visual design and good usability.
- As the team does this work collaboratively, it’s vital to put yourself in the place of others when they look at the design system and change and adapt. It’s also essential to make time for design system maintenance.
- The agile manifesto states that working software is preferable to comprehensive documentation. We should consider this as designers and find a good balance by iterating on designs.
Projects
About me
Contact
lautecce@gmail.com