PROBLEM
Designing a new operating system from the ground up is a challenge. It becomes exponentially challenging when the location of your design teams are in the US and Germany headquarters, and an external agency. Not only is communication a big factor but, so is collaborating on design files.
ROLE
Lead Designer responsible for building the Design System.
Collaborating with Germany headquarters and the external agency.
Presenting to colleagues and Senior Management.
Collaborating with Germany headquarters and the external agency.
Presenting to colleagues and Senior Management.
Tools: Sketch, Photoshop, Illustrator, Confluence
STRATEGY
Build a design system that allows designers in different regions to efficiently design new components, update visuals, deliver assets for development, and share knowledge to all designers in the company.
User Personas helped me understand the audience this system was for, our internal designs, developers, and an external agency. After conducting interviews with stakeholders, I understood each teams goals and frustrations.
Persona for Designer
Persona for Developer
COLLABORATION
We implemented Agile methodologies and the Scrum framework across the company, allowing designers and developers in all regions to build features and have better cooperation. I laid out a designers high-level process and presented to Senior Management for a clear understanding of our contribution and collaboration.
DESIGNWORKFLOW
To build an OS from scratch with multiple designers and an external agency, I developed a design workflow to increase the efficiency of new designs. This example showcases the graphical layers for a tile cursor. In Photoshop we used vector shapes, layer styles, and masks to make the elements responsive. The layers are then structured in a way to export easily and integrate into the software.
To build an OS from scratch with multiple designers and an external agency, I developed a design workflow to increase the efficiency of new designs. This example showcases the graphical layers for a tile cursor. In Photoshop we used vector shapes, layer styles, and masks to make the elements responsive. The layers are then structured in a way to export easily and integrate into the software.
As we continued to design the system it was important to share the basic elements with designers and developers. While we eventually documented everything on Confluence, I also created style guides to share with others.
TOOLS
To quickly iterate and provide assets for development, we used a plugin call PNG Express for Photoshop that allowed us to spec our designs and quickly export assets. I worked with the software developer to tailor the plugin for our specific use.
ICONREDESIGN
The previous version of the system had a more realistic icon style. I redesigned the icons with a flat style to visually match our new UI and reduce the image size on disc for hardware efficiency.
KNOWLEDGESHARE
As more designers work on features, the design system grows organically, and the design principles become more defined through documentation. A big part of my job was to transfer knowledge of our process and workflow to the headquarters in Germany and the external agency so they could complete the rest of the system.
FINALOUTCOME
Creating the design system for the MBUX infotainment system allowed designers to work more efficiently together and to communicate design decisions from conception to final production easily, getting the new MBUX system to launch in time for the release of 2018 production cars.
LESSONSLEARNED
I grew as a designer throughout this project, becoming more confident when presenting to colleagues and Senior Management, understanding the importance of the process and effectively scaling a design system for a large corporation.
The final design system documentation has been omitted from my portfolio as it contains confidential material.