APN Design System

APN (now HT&E) is a large Australian news network that has multiple companies under it’s umbrella. It caters to international, national and local news and strives to be the biggest source of trustworthy information and news in Australia. As part of a two person team, I created a UI style guide that could be used for all parts of the business to help developers and designers accomplish tasks like prototyping faster.

The Challenge

Unifying APN’s multiple UI components under one roof was no small task. A mix of multiple front-end developers and high turnover rate produced a lack of consistency in terms of padding, margins, colours and naming conventions. There were differences between the underlying companies but only minor things like logos and brand colours; largely, the components were the same across the board. Another bump in the road is that we weren’t able to restructure the format of the HTML and were only able to make changes to the CSS as there were a lot of dependencies that would need to change.

My Role

I was coupled with a front-end developer that would help me create the solution to APN’s UI problem. I got my hands dirty with code but I still needed help in certain areas which was why it was great to work with an experienced front-end developer. I went on to take the lead on the project since I had experience creating UI style guides before.

Think

I conducted stakeholder interviews to see what the key performance indicators would be. Speed, efficiency, easy learnability and a comparison of what the current component or design pattern looked like vs. the new. We also found out what we could and couldn’t do with the current codebase, i.e we could only touch the CSS and not restructure any HTML.

I then proceeded to do some participatory design as well as interviews with the current front-end team. They needed to find a tool that would be easy to teach new developers as well as memorable naming conventions for ease of use.

While doing our research we also found out that there were too many CSS files being loaded from different sources, this was causing an increase in page load time.

Now that we had surfaced the problem, we started to create a list of refactoring we had to do:

colours

typography

spacing (padding and margins)

images and how they are displayed for retina and responsive use

smaller tasks like <hr/> versus 1px border-bottom

To achieve our solution we had to research what kind of functional CSS was best to suit the problem and we found that Sass with Bourbon fitted our needs perfectly. We also outlined what pages were needed to make the style guide. Nunjucks (a templating framework) and Gulp.js (a task runner) were the perfect combination to assist in the creation of the style guide.

Make

The hardest part in all of this was getting Gulp and Nunjucks installed on my machine, from there it was all about the execution. The developer started out with a basic template in Nunjucks and created a basic task in Gulp to compile the Nunjucks into HTML. From there, I took the project and ran with it. I designed right in HTML and CSS but I used a bit of a cheat by designing in Sketch then grabbing the CSS values from the items. This was a great refresher course since I hadn't touch code in a while. Sass and Bourbon, once I had watched a few tutorial videos, allowed me to refactor CSS with great speed.

Another thing we added was an intro page for anyone who needed to use Nunjucks, Gulp, Sass and Bourbon in the future.

Test

We were consistently working with the stakeholders throughout to complete the style guide. This allowed us to meet the given criteria by creating a fast, efficient, learnable and comprehensive style guide.

What I learned

I expanded my knowledge in coding by learning some functional css and javascript frameworks:

Sass and Bourbon — Functional CSS was new to me, I had previously understood the concept but never had implemented it myself.

Nunjucks — The templating framework was really helpful in getting a large quantity of HTML pages created in a short amount of time.

Gulp — The task runner that was the glue of this project. I gained a lot of insight on how to boost my productivity with a few key strokes.

Pairing with a developer is my favourite way to design — with a tight collaboration we were able to accomplish tasks so much quicker if we were to do more of a waterfall approach.