Working with design systems
Design systems as a field have matured over the past few years. Now you can find hundreds of examples of them, as well as fantastic resources, communities & new tools. I have been working as Design System Lead at Ruter for a few years now, and I’m proud of how our design system has become a truly collaborative cross team effort. I thought it was about time that I shared a few tips, tools and essentials to help others getting started.
Design systems as a field have matured over the past few years. Now you can find hundreds of examples of them, as well as fantastic resources, communities & new tools. I have been working as Design System Lead at Ruter for a few years now, and I’m proud of how our design system has become a truly collaborative cross team effort. I thought it was about time that I shared a few tips, tools and essentials to help others getting started.
Whilst there is no one size fits all solution, there are some elements I consider to be essential to a well functioning system. I really believe that a design system should start with company values, guiding how we approach our work as well as directing how our system should be structured. Secondly, clearly defined design principles will help create resources, and enable those using the system to work confidently and autonomously straight away. I also believe that a design systems governance and contribution model should be in place from the beginning which explains how the team is organised, and invites feedback and collaboration.
A culture of collaboration
I believe design systems should be about empowerment rather than enforcement. A centralised system might seem inviting as decisions can be made quickly and without compromise. Components could be built that one might assume essential, and they could look impressive, but they might not fit with the product or the way the team work. This can lead to a design system which is removed from the product teams and customer needs. A system should have some degree of rigidness to it, but a product focused design system works when it is a reflection of the whole team.
““If you want to go fast, go alone, if you want to go far, go together”.”
I believe that design system teams should have a small core team doing most of the work, simultaneously facilitating others to contribute when needed and appropriate. I think this hybrid model reduces the bottle neck from the central team with work coming into the design system from other teams, and is the key to creating a design system that is actually used.
Instead of working autonomously, design system teams spend a lot of time working with all the product teams. This can be a challenge, but if collaboration is baked into company culture through sharing expertise, insights, alignment of goals, and processes, it can be a lot easier and very rewarding.
Working with the design team at Ruter on our icon library
In my role as design system lead at Ruter I feel as though I help the design team work much more collaboratively. For example, we have a design review meeting each week in which we look at different parts of the design system and discuss changes, new additions and give feedback. Designers often comment that they looked forward to our weekly sessions, and come away from them feeling inspired and informed. As well as this I organise design sprints, workshops, conduct research and invite other non designers into our space to work with us too.
Collaborative touch points
Make sure that there are multiple channels to give feedback and collaborate. As well as regular design reviews, it’s good to have a dedicated #designsystem slack channel, and really get the most of using Figma features such as comments and branching. Try to encourage designers and developers to work openly on shared team files rather than alone in private spaces.
Recently Figma has introduced branching. Branches are exploratory spaces that enable designers to safely try new ideas without making changes to the main, or existing, file. Rather than auto-saving to the main file, changes from branches are merged into the main file when you're ready.
Contribution model
Contributions to the design system should be useful and unique. A suggested component or pattern should be useful for many teams or services and it should not replicate something already in the Design System. It’s a good idea to explain this contribution model in your docs and slack channel so that users understand how and when to contribute.
Being a design system lead can sometimes mean saying no, but not without a discussion around that decision and an explanation why. Sometimes a new component is suggested, but there are a few alternative components already in the system that would work for that use case. Sometimes more research is needed to support changes in the system, and sometimes the answer is not ‘no’, but ‘not now’ as it doesn’t align with the current goals.
If you have a lot of stakeholders and users, it could be a good idea to use a feature request tracking tool such as Frill, Savio or Prodcamp to help prioritise, collaborate with users and share what is being worked on.
Measuring success
How is success measured in design systems? The first thing designers usually point to here is figma analytics, but just having and presenting data about component inserts isn’t enough. The trick is to figure out how to interpret and analyse that data according to the design system goals alongside other more qualitative insights. It’s important to share how the design system is performing, and present any analysis of metrics in a simple and easy to understand way.
Design system goals should be aligned with other team and organisation goals. Including the goals in the design system docs helps users understand the team and the system.
Start with documentation
The first thing to do is start documenting decisions, and making a plan for organising what you have so far. There’s no wrong place to start doing this, whether it’s Google docs, notion or directly in Figma, sharing design decisions from the beginning builds trust and understanding across the company. Instead of aiming for perfection, aim for appropriateness of needs.
In-line docs
Most design systems start as a small component library in Figma. This is a simple starting point for documenting design decisions and will give design system users enough context to feel confident using the system.
Dedicated docs file
When libraries get bigger, it could be time to move towards a dedicated docs file, this is easier to organise and will help lessen the bloat of the main asset library. It’s still easy to link to the right docs from each component. There has recently been a lot of updates and plugins made available which allow for clearer and better documentation, internationalisation of design systems, accessibility checks and automation, making Figma quite a good option for most design system documentation.
CMS
When working in an organisation with many teams and products it could make sense to eventually move towards having an open CMS that can be indexed. It’s needed when a design system is widely used not just by digital designers, but also by product managers, developers, marketing teams and other key stakeholders.
Most CMS systems have their own Figma plugins that sync with libraries and documentation. This helps automate processes and syncs tools seamlessly. Storybook is a fantastic open source tool for building UI components and pages in isolation. It streamlines UI development, testing, and documentation. Storybook code snippets can be integrated into CMS solutions, bringing design and development even closer together.
Custom
Fully custom solutions are high effort, and not really appropriate until a design system has more of an ecosystem around it. Stripe is a good example of this, as they have 3rd party developers creating stuff from their design system. It is a complex solution, and often not needed but important to consider as a product develops.
Describing components
Documentation should always start with foundational style guidance around colour, typography and other patterns that flow through the whole design, detailing also how the values and design principles work with the profile. These core elements of the design system (or atoms if you are familiar with the concept of atomic design) can be used to create design tokens which are then used to develop components. The design system should have a defined naming structure to guide the way every component is built up. Naming is a notoriously difficult thing to do and is debated passionately in the design system community, but alignment on how elements are described increases understanding and breaks down silos.
Examples and variations should be incorporated into component usage guidelines. I find that do’s and dont’s are helpful in quickly exemplifying component use, as well as referring back to the foundational style guidance and patterns. Accessibility features or considerations such as what happens with keyboard navigation, tab orders, or how the components work with screen readers should be incorporated into examples and documentation for components rather than in a separate accessibility section. This keeps accessibility top of mind instead of an afterthought.
Resources
There are so many great examples of design systems. Some of my favourite public ones are Atlassian, Polaris (Shopify), Carbon (IBM), Adobe spectrum, Orbit, Workday Canvas System, and Stripe Docs. You can watch a video of me talking more about Ruters design system here, and designsystems.com is a fantastic resource for articles and templates.
Ruter app wins gold at the European Design Awards
The European Design Awards, also known as the ED-Awards, celebrate European designers for the best work in the field of communication design.
This weekend the Ruter app was awarded gold in the European Design Awards in the Mobile Apps category. Receiving such an award feels so great, and I’m so thankful to my dedicated and skilled teammates who dare to explore, and constantly test services with our customers. We continue improvements on our app, in our quest to make travelling in Oslo more sustainable and accessible.
The European Design Awards, also known as the ED-Awards, celebrate European designers for the best work in the field of communication design. Supported by the International Council of Design, the ED-Awards are a little different to many other design awards, as the jury is not made up of designers, but of design journalists and critics - whose daily job is to evaluate design work.
Ruter wins gold at Visuelt
Visuelt is an annual competition in visual communication, highlights the best of work in graphic design, illustration, digital design and moving image and aims to inspire new thinking and high professional standards.
We are so proud to have won another award for our work on the Ruter app. This is what the Visuelt jury had to say:
Ruter's transformation into combined mobility – means that cycling, walking and new means of transport become options in the app. Ruter challenges conventions and makes brave choices. The solution reflects a strong and growing identity while ensuring readability and accessibility. The details are in place right down to the in-house developed font. The solution is built for the future, and we look forward to following the journey further!
Visuelt is an annual competition in visual communication, highlights the best of work in graphic design, illustration, digital design and moving image and aims to inspire new thinking and high professional standards. Read more about Visuelt here.
We won the DOGA award!
Every year, DOGA Norway honours the best design and architecture in Norway. Our team at Ruter were totally thrilled to receive this years award. Together with Bakken & Bæck and NoA Ignite, we’ve have been working on a new digital visual universe and a completely new mobility app designed to help millions of travellers on a daily basis.
Every year, DOGA Norway honours the best design and architecture in Norway. Our team at Ruter were totally thrilled to receive this years award. Together with Bakken & Bæck and NoA Ignite, we’ve have been working on a new digital visual universe and a completely new mobility app designed to help millions of travellers on a daily basis.
This is what the DOGA jury has to say:
“The app is clearly the result of good design management, resulting in a friendly and warm product. Underneath the surface, however, hides the intricate coding that manages to capture the whole of Ruter’s complex services in an intuitive and attractive interface.
We are also charmed by how the app gently nudges the user into choosing to walk or bicycle, and we want to applaud Ruter for thinking holistically around seamless mobility on the traveler’s terms.
Ruter’s new travel app is awarded the DOGA award for design and architecture as a long-awaited service that is skilfully designed and executed down to the last detail.”
The new app!
Every day over a million people in the greater Oslo area interact with Ruter through their apps, website, and countless transit points. Travellers demand greater convenience, speed, and freedom while expecting every product to be simple, seamless, and frictionless. Our ambition is to connect people to the city by offering a personalised experience across a digital platform so that we can provide freedom of mobility to everyone.
Building a new app from scratch, we wanted to combine previously separate features like route planning and ticketing while at the same time creating a new design system that can scale future unknowns and new means of transportation. We also experimented with features to incentivise walking and biking.
The app is simple to use and designed with special attention to accessibility and inclusion for its many, and diverse users. Thousands of travellers have already tested the new Ruter app, and we can’t wait to share it with all of you in 2021.
Building on Material icons
Everyone who works with me knows I’m a massive fan of Google’s Material design icons. I designed place category icons for a map to match the Material design style.
Everyone who works with me knows I’m a massive fan of Googles Material Design icons. They’re beautifully designed and easily recognisable. They’re also available in a range of themes, weights and best of all, they’re open source!
I started to use them in the Vegan Norway app for various parts of the UI, that was back when all the places on the map were simply marked with hot pink pins. After some testing and user feedback, we saw it would be useful if the users could see what types of places were shown on the map. And so I began the mammoth process of going through the hundreds of places in the app and categorising them. Yep, it was time to bring out the post it notes.
From the book Principles of Map Design by Judith Tyner in which she discusses the visual variables of cartographic symbols.
I didn’t want to have too many categories so I grouped relevant ones together. I showed my category types to our focus group and asked them for input, and I checked out how other map services and travel guides categorise restaurants so I could compare our category mapping.
Once we had decided upon categories it was time for Christian to put them into the system and start testing whilst I started designing icons. I knew that I wanted to use Google Material icons as a starting point but that their icons wouldn’t cover the quite specific categories we had, so I had to design new ones in the same style.
I began by scouring the icon pack and seeing if I could find existing icons that did match up. The local_cafe and fastfood icons were perfect for my needs. Once I had done this, I began sketching out ideas for what the other icons could be, keeping in mind the line thickness, simplicity and style of material icons.
When I had a few ideas I tested them by showing them to the focus group and asking them what they thought the icons might represent. It was quite hard to make icons that were easily recognisable, someone thought my icon idea for sushi restaurant was a pair of glasses! I went back to the drawing board quite a few times to get it right.
When we were finally happy with our new icon set we put it in the app and tested it again on the beta group. It was a success! This project was a challenge, but I really enjoyed coming up with new icons that match the beautiful Material design icon set.
The sushi icon was the hardest one to do. It had to be immediately recognisable but also work well as a tiny icon so it couldn’t have too much detail.
Strim
For the past few months my team have been developing and designing a brand new streaming service across browser, tvOS, iOS and Android. It has been a fun project in which we have achieved a lot. A big part of that was making everyone part of the design process. Here is how we did it…
The past few months have been a bit of a blur. In the midst of getting pregnant and moving house, it’s also been an exciting time at my job. I work as UX Lead at RiksTV and a while ago we started making plans to launch a brand new streaming service in Norway. We felt like it was time for a product which bridged the gap between Netflix style streaming platforms and more traditional cable TV providers. We believe people should be able to sign up and start streaming without being locked into a contract, having to pay annoying set up fees or connect extra equipment from what they already have, and that it would be great if they could also enjoy content across live cable tv channels in the same place that they watch their favourite on demand series.
The lean Strim team
Together with some colleagues from RiksTV we have been working with consultants from Bekk, Novanet, and Itera. Our team has consisted of mostly developers, but also designers, branding experts, project managers, and marketers. My role in the project was to design the user experience. We have worked as agile as possible, with focus meetings each week in which we discussed and prioritised tasks so that we could constantly release, test and evaluate. This helped us focus as a team, iterating over features quickly and productively. Building a product from scratch gave us a lot of freedom. We moved really fast, broke everything, learned a lot, fixed stuff, and nobody got hurt because we didn’t have any paying users yet.
We used Trello as our planning tool, with the classic ‘to do’, ‘doing’ and ‘done’ lists, however we incorporated some ‘lean extras’ into the mix too. We split the to do list into two: backlog and current focus, and added a list for things that were in test. The current focus list was basically a prioritised backlog of things to be done that week. We started every Monday with a focus meeting in which we archived all cards from the ‘done’ list and discussed what we should do next. We also had daily stand ups so that we could quickly sniff out if anything was holding us back, and get a good overview of what tasks we each were working on. Our customised approach to lean project management worked well for us, and we tweaked it as we progressed, adding work in progress limits to the columns and occasional retros and other lean ceremonies as we needed them.
If you are reading this and wondering what the hell I am talking about you can read about lean methodology here.
Designing a TV experience together
Designing Strim was interesting. We decided to start with a browser player as our first product. We wanted to get a first version of the product out fast so we decided to duplicate elements from our existing RiksTV browser player as a starting point, adding a sign up process and a landing page. There were two other designers here for a while working on branding concepts whilst we started on all the technical tasks. We did a lot of workshops and research to figure out how the brand should be and ended up with an exciting and modern visual profile.
I worked with the team, making paper wireframes to map out ideas for a sign up flow, and used Sketch integrated with Zeplin (which was then Integrated with Slack) so that the whole team could collaborate and discuss design work constantly, I find these tools help the team immensely. It is important that everyone is part of the design process.
Device reach
It wasn’t long before summer was upon us, and we knew that we couldn’t really launch a streaming service you can only use on your computer. Everyone else on my team was heading off on holiday but there were a few of us around and so we began a summer project to make a Strim Android app.
We used Facebooks own framework for building native apps: React Native and I used Google’s new Material Theming guidelines to quickly put it together. I have to say that I found it so satisfying to work with Material, and that the Material Theming plugin for sketch is a LOT of fun. If you are an app designer and you haven’t tried it yet you can get it here.
The rest of the team came back from their holiday and were surprised to see how far we had got with the app. In only a few weeks we had included most of the functionality, and content we had in the browser app, and it looked slick too.
Since then I have also designed a Strim iOS app and a tvOS app. It has been a challenge to juggle designing for 4 different platforms at the same time, but I seem to have managed because really the whole team has been designing the user experience with me. That’s partly thanks to our project management and design tools, but also because I’ve been working with people who are not afraid of getting creative and involved in all parts of the project.
The future of Strim
Last week we launched Strim, and it was very well received by our partners HBO Nordic, TV2, Paramount, Discovery, and Disney, as well as other key players in the media world. We also have our first proper paying users, and are enjoying great feedback. It’s an exciting time for us, as we see so much opportunity to develop Strim’s features, include more content and expand the team too!
My nice French boss Jérôme (bottom left) and some hot shot TV people at our launch party.
I probably can’t say what is next for Strim, but I can say that I’m having fun designing it! We are offering people a 7 day trial period, which is good to know if you are curious about trying it out. If you do please let us know what you think about it, if there are any features you miss and your thoughts on what the future of TV looks like.
Not to be dramatic but, I made an app and it changed my life.
Since creating our app the amount of places with veggie options in Norway has increased dramatically. We now have over 1000 places listed in the app, and over 20,000 users. I have learnt so much about app development, the restaurant scene and the vegan scene, and most importantly I have made some friendships that I hope will last forever.
Problem
I had been dabbling with vegetarianism and then veganism for a few years and had started to get serious about cutting out all animal products from my diet just before I started dating Nick. He was the first vegan I had met in Oslo, and I was so curious to find out what his experience was like. I asked him where he liked to go out to eat expecting him to name the same veggie friendly places I knew of. I was surprised when he named a bunch of different restaurants I didn’t know about. He had never heard of the places I told him about either. I sighed, ‘It’s so hard to find vegan places to eat, it takes too much time to scroll through recommendations on blogs and Facebook groups, wouldn’t it be great if there was an app or something that listed all the veggie places in Oslo on a map so you can easily find the nearest veggie place when you are out and about?’ He looked at me and raised an eyebrow ‘Sal, aren’t you an app designer? You should just make it.’
The more I thought about it, the more it seemed like a really good idea. It would certainly be useful for me and Nick anyway, and it would be fantastic if I could make it easier for people to eat less meat. But should it be an app, a website, or something else? How would I find places to add? Maybe it would be fun to make a little proof of concept? I started doing a little research.
Research & Ideation
I spent the next few weekends walking around Oslo looking at restaurant menus keeping my eyes peeled for veggie options, taking meticulous notes on my phone. In the evenings I analysed other restaurant guide apps, and saw what local bloggers had to say about the greener options available in Oslo. The user would need to find information about where to go when they were out and about, and it needed to take their location into account so it would need to be an app. I made some paper wireframes and then worked on some loose designs and prototypes.
Making the app
I decided upon a nice turquoise colour for the app, and an icon which was based on a dropped map pin. I dug deep into my savings and hired some developers to help me build a database, an iOS app, and connect the two. I signed up for an apple developer license, made a website, an email, and claimed all the social media handles I would need. That’s when I realised that this was really happening. After a month or two of hard work I suddenly found my mouse hovering over the publish button in the Apple Developer Console. This was it, I’d made my own app and soon real people would be able to start using it!
Making Oslo a little greener
I started the app with 30 places and no users. In the space of a week or two, and with a bit of hard work on my social media strategy the user base had grown to 1000! Nick volunteered to help me find places to add to the app so I could focus on promoting it. We spent all our weekends working on the app and testing out restaurants, it was actually really lovely and exciting. Things really took off after Oslo’s biggest newspaper: Aftenposten, got in touch and wrote an article about it. Suddenly the users started pouring in!
Expansion
Every day I would get messages from people who wanted me to make an Android version of the app. I really wanted to, but I couldn’t afford to dip into my savings again to pay for development work. I decided to find a full stack developer who shared my vision for the app, someone who wanted to be my partner in the project. My prayers were answered when I met Christian Ihle. He reached out to me and told me that he would love to work with me on an Android version of the app. A dream team was born. Christian did the development of the database and the apps, and I did design and content.
Soon after we launched the android app we started working on how we could cover other cities. We upgraded the iOS app and included new features in the UI like filters, images, and ways to sort results. We learned that the app had a bit of fanbase and we ended up with a huge group of people spread out across Norway helping us test and find places to add.
More than just an app
Making this app has been a lot of fun and led to so many other interesting experiences. I have held talks at festivals and events, and got to work with big brands and restaurant chains like Peppes Pizza and Deli De Luca to help them develop vegan options. We ended up creating The Nice Awards as part of Oslo Vegetarfestival in which we gave awards to some of the greener businesses in town. Since creating our app the amount of places with veggie options in Norway has increased dramatically. We now have over 1000 places listed in the app, and over 20,000 users. I have learnt so much about app development, the restaurant scene and the vegan scene. But perhaps most importantly I have made some friendships that I hope will last forever. Here are just a few of the good memories we have created over the years.
Nice to meet you
Hello and welcome to my blog and very first blog post! My name is Sally Renshaw and I am a young(ish) British woman who lives in Oslo, Norway, with my boyfriend and three cats. I've had a funny old life, and when I started to open up about it recently, the people around me started telling me about their lives too. I realised how important it was to talk about our personal experiences, reaching out for help when times are hard, and sharing wisdom on how you can go from coping to thriving. I used to be scared of being honest and vulnerable but I'm not anymore.
Hello and welcome to my blog and very first blog post! My name is Sally Renshaw and I am a young(ish) British woman who lives in Oslo, Norway, with my boyfriend and three cats. I've had a funny old life, and when I started to open up about it recently, the people around me started telling me about their lives too. I realised how important it was to talk about our personal experiences, reaching out for help when times are hard, and sharing wisdom on how you can go from coping to thriving. I used to be scared of being honest and vulnerable but I'm not anymore. That's the main reason I started this blog, and also because it's kind of fun to have a place for all your stuff.
As well as mental health, I might talk about cool stuff too: music, books, movies, food, basically all that classic blogger stuff. It will mostly be about mental health though. Here is a little overview of some of the topics I plan to explore, if it sounds like stuff you are interested in, pop your email address into the subscribe form and you will get my updates sent to your inbox once a week in a lovely email.
My creative work
My background and education is in fine art. I started my career working as an illustrator but now I work as an app designer. In the last few years I have worked on many exciting projects for both big corporations and small independent businesses. My fave projects has been designing my own app, Vegan Norway, and the work I have been doing for the past year at RiksTV, designing their tvOS app. Though that's my bread and butter these days, I still try to get away from apps sometimes, and get back to my roots in fine art and illustration. I love to talk about designing for a good user experience and the creative process behind my design work.
Sometimes life is hard
I have had a colourful life filled with ups and downs. I have managed to get through a bunch of scary and difficult situations, which unfortunately affected me deeply in complicated ways. I struggled with my mental health alone for many years because I was ashamed of myself. I'm not ashamed anymore, and I hope that by talking about my own experience I can help others who have also been through similar things.
Self care
Many people think that self care means treating yourself to indulgent things when you are having a bad day. Whilst that sounds nice (and really tempting) if you are treating yourself all the time to keep rubbish feelings at bay, your self care sounds like more of coping strategy than truly caring for your needs. The key to creating good self care habits is in understanding what your needs actually are. I used to have a lot of bad coping strategies, but now I prioritise self care above everything else in my life.
Helping Others
The better I care of myself, the better I can take care of everyone else! I'm really inspired by individuals and organisations which are making the world a better and fairer place and I want to talk about and get involved with their projects!
Don't miss a post
All those topics sound super interesting to you? Good! To make sure that you don't miss out on my ramblings make sure you subscribe via email, and I'll send you very occasional emails when I've got a juicy new post. Other than that you can follow me on instagram and twitter.
Thanks for reading my blog!