Connected Learner Styleguide

I was contracted as the team lead for An Airline Company to lead the User Experience Innovation team and bring cohesion, unified branding and reusable assets to the project – already in progress. The team had no design direction, they were re-inventing the wheel and all over the place with the styling and brand assets they were using.

There was no asset directory or grid-pattern the designers were adhering to, they had a company styleguide that consisted of fonts, a basic color palette, and some marketing design considerations. The first part of my strategy was to expand off of the company brand direction and develop a Style Guide Driven Development plan, using a living style guide as components were being developed and documented so the team could keep working.

Traditionally, when we think about front end implementation, we think about HTML, CSS, and Javascript. However, Design is also part of it, because this is where the User Experience and the Interface are defined. Putting it simply, Design is the starting point when building an application – so it only makes sense to make it part of the development process.

How do we do this?

Creating a flexible UI system that is consistent and easy to customize, while also scalable and cost-efficient, depends not only on how it is built, but on how it is designed. Design assets with production in mind by setting up your documents, art boards, asset libraries, symbols and other assets in a manner that allows for seamless transition between team members and effortless asset hand off. Setting up files for production flow your design is more likely to be consistent, elements don’t need to be re-invented or re-purposed and your design deliverables will be meaningful and cohesive.

How Did this Change Things?

After working with the team for a few weeks I became part of the newly formed, User Experience Community of Excellence where I was able to bring my process, strategy and styleguide before the board – getting it approved – and teaching my methodology across the other teams. I was asked to present my work and later become part of the community.

The Outcome

I was able to implement a living styleguide with reusable assets that could be imported into existing work, stored and managed in one place and expanded on as technology updates and new features were added to the applications. This cut down design churn, ensured designers and developers were on the same page, and gave the stakeholders enough faith in the project to continue with more funding. Native Andriod applications have been released on Google Play for download on company issued devices. In late 2018 the project was in the 5th-phase of beta testing with actual users, being prepped for shipping early 2019.

My Role
Lead User Experience Designer
Project Duration
8 Months
Tools of the Trade
Sketch App, CSS, HTML, & Google App Builder
Client
An Airline Company