INTURN's Visual Systems Reboot
One of the major projects I have led at INTURN this year was the creation of a proper system and library for the styles, symbols, colors and components for the new INTURN 3.0. This was something that I hadn't been able to prioritize in the past due to limited time and resources, particularly during periods when I was the sole member of the design team.
I learned the hard way through experience that working from memory wasn't ideal for our team; I made some attempts every couple of quarters to reuse and revamp assets built previously, however the speed with which we needed to iterate and ship, limited time available for general maintenance and more pressing day-to-day tasks kept our team from truly devoting proper time to this project.
As I grew our team to over five people and received more resources, we saw the transition of the INTURN application from version 1 to version 2 as a perfect time to bring this library to life. However, there were still major challenges. The clients were picky, the users were white gloved and were unfortunately dictating how features were built.
I'm extremely proud that we were able to rise to these challenges, even as a new team working together for the first time. With our new resources, it was the right moment to solve these problems, branch out and create pods. I led our team and oversaw the whole design system, including the interface decisions of style, icons, use of fonts, the design of components, states and symbols.
As I explained, there were many problems to solve:
- No useful or properly documented style guide.
- Consistent component library on design side is non-existent.
- No source of truth for either engineers or designers.
- Most of designs were done by memory; less than 20% of components are currently symbolized.
- Handling and managing icons through Fontastic was outdated and took too much time from insertion/creation of new icon to closed ticket and implementation.
- The color palette we had previously established was getting stale and had some contrast problems we never came back to solve.
- General design inconsistencies with basic elements like navigation, buttons and hierarchy.
What's the plan
Since we have to finalize this Style Guide while we work on another project, the Linesheet, We allocated time in our sprints to work on it. This was a 200 hour project that needed to be done in a single two week sprint.
What I wanted to do was simple: to create source of truth for designers and developers, an easy way to have other designers update their library seamlessly in order to apply the components and symbol changes to their files in less than 5 minutes per update.
We knew that someone had to be on top of creating symbols and updating all current symbols in future weeks, so I took the duty of being the master library keeper.
Another goal we identified was to have at least 80% of components symbolized. We knew that creating too many symbols would be a mistake and it can make the process of designing actually slower. So we needed to start with the atoms, such as icons, colors, fonts, headers, navigation and grids, and work from there.
Additionally, a major goal was to update all icons to make them match the new visual language we are developing. Finally, we needed to tweak the colors to increase accessibility, contrast and legibility.
I created a master library that took care of all styles, symbols and components. In order to avoid repeated components in the engineering side, this library was defined as a main source of truth and the go-to file for questions and clarifications for new and current developed features.
We were lucky that by the time we were creating these systems, Sketch released version 49, which allows designers to upload Sketch libraries to the cloud. It was seamless to use across several team members using Sketch, and we didn't have to worry about people messing with the source file. We also gained the ability to one-click update the assets and symbols of any file we opened in case there were changes in the library.
We made a one hundred percent revamp of all 350+ INTURN icons. We settled on Nucleo as our single system to use, manage, export and handle icons for both designers and engineers. This was because it allowed us to easily create custom projects with custom and native icons, export to both SVG and Icon Font, and have the icon library accessible at all times.
The first work of action was revamp our old icons and make new icons that go better with the new and refreshed visual language and brand direction. We also created some brand-new and custom icons that we wanted to add to the library. Finally, we cut more than 60% of unused icons that we causing ambiguity and clutter.
Because the export from Nucleo was different in code from what we had implemented before, we made a release plan. Working closely with engineers to make tests with the new system, we decided to make a reconciliation file that displays icon and name replacement for both designers and developers.
The first step in addressing color palettes was to explore different options for the main buttons and anchors in the application; then we dove down to secondary and supplementarycolors.
We also needed to reshape how our grays and blacks worked together to increase contrast.
We created custom sharable palettes for designers so everyone is always using the same colors from the palette, including full black, full white and even the same magenta for redlining and markings.
INTURN's application was using Open Sans for a while and we believed it was time to make a shift. After some research and discussion, we decided to go with Roboto because is modern, approachable and easy to work with.
Roboto has a wide range of weights and it had ideal the density for the amount of information we display to our users.
Results and Outro
The pattern and style guide library has been updated weekly/daily since its inception. We are making sure we have enough time during sprints to update it in a timely manner and that everyone is using the latest version without breaking any designs.
Transition from Open Sans to Roboto was smooth, causing minor problems with liquidity of divs, all which were resolved in a single day. Legibility upgrades were visually obvious and well received across users and inside of the company.
Color updates were applied across the app in one sweep and very minor tweaks needed to be done to make sure we had the right amount of contrast in some parts of the website that were one-offs. Color updates were the most subtle, since not a lot of parts of the app needed contrast, however, the updates to grays and blacks was the most positively obvious for information architecture and contrast.
Icons were updated also in one pass, with minor tweaks, enhancing the clarity and lightness of the application in a lot of places, and helping with hierarchy. All icons follow a consistent design language and are perfectly sized and aligned with the style guide.
Symbolizing around 85% of all patterns means we have seen a 100% increase in design speed.
These changes created a future proof system that is scalable for any team size including designers, developers and product managers.