I recently joined a new company in the FinTech and payment services space. It’s a super exciting field with lots of innovation happening right now, especially in Japan.

One of the major tasks I have been put in charge of is to consolidate all the current UI’s across 4 products and create a central and usable system that will will all the entire design team to create consistent UIs, and speed up hand over/development of the products.

I wanted to document my journey, from exploring ideas and technologies to implementing, refining, and improving the design system over time.

Current status: Initial research complete, starting to lay foundations for version 1.

The initial project was to update the current style guide that was over a year out of date. While it would be easy to update this style guide with the current styles, we are also constantly making changes to the products and updating. The styleguide would be obsolete before I could upload a copy to dropbox. We need something that is constantly growing and improving. A living style guide if you will.

Another issue is that, while a style guide is great at specifying certain aspects of the design, it can fall short of creating consistency throughout products.

I have proposed that if we really want to take this seriously, we should be creating a more robust system that details everything from design principals, pattern libraries, naming conventions and use cases. A system that is always growing and improving over time. A fluid design system.

A new designer should be able to read it over and immediately start designing meaning and on message experiences. For seasoned team members, it should improve speed, consistency and workflow for all their projects.

In order to achieve these goals, there is a few key issues need to be addressed.

It’s always up-to-date and current

The whole point of having a style guide and design rules is to create consistency and if the guide is saying something different to the current product it doesn’t work. It needs to be easy for people to update and maintain.

People actually use it

A great design system is nothing if it’s ignored. It must be accessible and easy to follow. Most of all it needs to improves peoples work flow no matter their job. If it hinders progress it will eventually go un-used as people will opt to do it the old way just to get things done on time.

Cross platform

The system itself needs to support multiple applications across a few different languages. The system should be written in an agnostic way that works for everyone across all of our platforms.

Let’s get started!

Research!

There are so many different ways to create a design system and finding something that works for you and your team is vital, I spent a lot of time reading over different articles and opinions on the matter, to try and understand the issues and concepts from all angles. Here are a couple of articles I found very useful.

Atomic Design
Plasma Design System
AirBNB – Building a visual language
A great list of design languages
List of other articles relating to design systems
Webcast with Brad Frost, Sophie Shepard & Jeremy Osborn on Design Systems (1 hour)
Design doesn’t scale by Stanley Wood
Styleguides.io

The tools

I spent a lot of time road testing lots of options. Considerations were taking around cost, learning curve, flexibility and what is already being used in the teams. Here is where I landed for the first round.

Sketch
Our team primarily uses Sketch as the main design tool. While some designs often use Photoshop and illustrator for some projects, Sketch has the most flexibility and accessibility for the team. Also, it’s much cheaper than Adobe products.

A master design file will be created to hold all the styles, objects, components and patterns for each product. This file will be the source of truth for the library.

Invision
We have used Invision for quiet a while in our team as a prototyping tool, but exploring their new products farther, it has turns out to be the perfect way to share designs throughout the team. By syncing your sketch files, it now allows you to get detail spec information without needing to actually write documentation for each design.

Craft (Sync and Library)
Craft is a plugin for Sketch and Photoshop that extends Invision directly into your Sketch app. This allows you to sync your files directly with Invision without even leaving Sketch. But more importantly, Craft includes a tool for creating and sharing libraries. It allows your to save all your styles, fonts, colors and symbols/components into a special format to be shared with your team.

Any one with access to the library has the ability to update it by changing a symbol and pushing the changes back up to the library files. This could be good and bad. While we want everyone to contribute, we have to be careful of breaking changes being made to the library.

If you pull changes from the library, those updates will propagate through your designs, so changing a symbol drastically could break layouts pretty easy. There needs to be steps in place to avoid this.

DropBox
By saving the library we have created into drop box, any updates make to it will be synced with the rest of the team and automatically update their libraries.

Google Sites
Google sites is a simple to use basic CMS system. So far I have found it the easiest way to document the rules and components to be shared throughout the teams.

Abstract
Abstract is super interesting. Basically it’s gitHub for designs. It has full version control and and merge documents if multiple people are working different branches. I haven’t fully worked out how to implement this yet but I would like to at least use it for the master sketch file for the design system components. I would like to take this further in the future and implement it for all finalized design files.

Pattern Audit

By breaking down the current designs to identify the current situation allows everyone to get a better overview of the system and how inconsistent it is at this point in time.

I simply went through all our products and took screen shots of each screen, then cut out each part and grouped them together in a keynote presentation.

This well help immensely when trying to sell your case for making a good design system by being able to visually show the current state of your applications.

It looked something like this:

Screen Shot 2017-07-28 at 4.48.04 PM.png

This is just one of the products. As you can see, there is some work to be done.

Planning for the next steps.

One of the most important parts of the project is to make sure everyone is on-board and excited about the project. As it is not a project that will directly impact customers or the companies bottom line, it can be a bit tricker to get people to understand why we should be investing in it.

I have been sitting with the designers and product teams to fully understand the current state of their workflows and identifying ways to improve this. It will be an on going process of iteration and refinement based on their feedback as we implement the system.

Backing all this up with a strategy to implement these changes and a roadmap of milestones will help everyone get a better idea on how to move forward.

At this stage I think I am in a pretty good position to start building the first version and testing out some theories and ideas.

Stay tuned for part 2!

Thanks for reading!


Alex Knight

UX/UI Designer – Tokyo, Japan.

www.agkdesigns.net

 

 

Advertisements