This content is password protected. To view it please enter your password below:

Design System Safari at OGD

We recently visited the IT-specialists Operator Group Delft. Interaction Designer Wouter Schuur gave us a tour through their Software Development department and six frontend-enthusiasts shared their view on Design Systems. Read on to see what we learned!

A brief history

OGD was founded by five students from the Delft University of Technology in 1988; a whole different era. There was no iCloud or Dropbox with automatic backups. The five students helped organizations by making backups of their cassette tapes with important data. The office spaces of OGD were just student rooms those days. In thirty years a lot has changed: OGD has 5 office locations in the Netherlands and counts over 1100 employees.

What to do at times iCloud wasn’t there yet? The five students helped organizations to make back-ups of cassette tapes. The office spaces of OGD were just student rooms those days. In thirty years a lot has changed. Nowadays OGD has 5 office locations in the Netherlands. OGD is now represented in Delft, Amsterdam, Utrecht, Enschede, and Eindhoven and counts approximately 1200 employees.

OGD practices their passion for IT through several B2B services, divided into three specialties: Outsourcing, Software & BI and Professional Services. These specialties are categorized in the many solutions OGD brings to the table, such as application development, machine learning, and strategic IT advice.

People

Currently the Business Unit Software & BI consist out of 80 great minds with a development background. In the near future, with the rise of new products and visions on for example Design, they hope to expand.

For a large organization as OGD, taking care of internal knowledge is a huge pillar in their culture. OGD made knowledge clusters to centralize specialized knowledge. For example, the UX&UI and the front-end clusters.

There is a lot to say about the philosophy and people of OGD. But we are on a Design System Safari. Where do they stand with their Design System? What is their current situation and what are the next steps for OGD?

Where it all began

In 2016 and 2017 OGD rebuilt their brand identity. Even though OGD has a tech-minded nature, corporate identity, as well as the communication standards, became a bigger priority.

The result: an updated employer brand.

Part of the employer brand and the corporate communications plan is the ‘purple book’ of OGD. The purple book contains rules about the tone of voice and copywriting standards. For who? Marketers and account managers; practically everyone who performs communication tasks within OGD.

Not to mention, the work on the employer brand did not stay unnoticed. OGD had found the website jebaanismeerdanwerk.nl, which had won a prize for best recruitment campaign at Werf& Awards.

Award-winning website: Jebaanismeerdanwerk.nl

After redefining the employer brand and the communication standards, employees at OGD began to wonder: how do we make this employer brand more applicable for our developers?

The OGD Styleguide: Bootstrap 3

In July 2017 they worked towards implementing the ‘OGD Style Guide’, with fragments of code based on Bootstrap 3. Bootstrap is a commonly used HTML/CSS framework to develop UI’s fast and easily. Due to the hands-on character of OGD, it felt like a simple way to start.

The Style Guide implementation became applicable for developers. Through one click they got the opportunity to style applications (and by using Webpack as well). The main goal was to serve developers with practical guiding principles and components to align their way of work.

The Style Guide consists of three main ingredients:

  • The rules on communication, which we also saw in the employer brand.
  • Usage notes about the implementing of the OGD style when developers want to style a new project.
  • Code based on Bootstrap 3.

The style guide is made for developers, by developers.

The public website

Hubspot is the content platform of the public website of OGD. The code for the public website was developed based on the Bootstrap 2 framework. While Hubspot works with Bootstrap 2, the third and fourth version of Bootstrap is not supported by Hubspot yet.

Future plans are to transfer to Bootstrap 4 for the OGD Style Guide, so it supports several devices. How to bridge the gap between the styling of the public website and other (internal) products? A burning question to take into consideration in times of building a Style Guide and working towards a Design System.

Marketing

Besides developers, Marketers have to deal with Design during their daily activities as well. Their biggest responsibility within the company is to protect the corporate identity. The resources Marketing uses for design-jobs are mainly located on Sharepoint. How to reduce this to one resource for all, without losing sight on the protection of the corporate identity?

💡 Tip: Many organizations struggle with starting off with a pilot for your Design System. Find out what the essentials are for your organization. Psst, by chance we created the ‘Design System Checklist’.

The opportunity

Software development is a group of people with a shared vision. Many developers acknowledge that OGD should start off with a Design System to help them to co-create efficiently. A fine initiative arising from the bottom-up. To get the management on board, the Business Unit Software is playing with the idea to define the different OGD personas who will be using the Design System internally. Journey mapping might also be helpful for them to clarify the user for the management.

Besides, with a majority of tech-oriented colleagues rather than design-oriented people on board, the Business Unit hopes to give Design a bigger stage.

The character of the organization breathes IT, this works on their Design approach as well. One source of truth for all the people is a challenge for OGD but would be the idealistic situation for the developers at OGD. What does that mean? Integrating one standard in the workflow of Marketing, HR, and development. Luckily, Design Systems are a great way to align people!

✍️Small note: We found that Design Systems are 80% about the act of people working together. Read more about it in our report about the State of Design Systems in the Netherlands.

3 tips from OGD to build a vision for your Design System

The front-enders gave tips on how they are making the shift from a one-sided developer perspective towards a more whole and aligned approach.

  • Don’t make it too big

The word Design System seems to be abstract. People tend to find it ‘too difficult’ or ‘too big of a challenge’. This might be a typical example of ‘developer thinking’. The advice would be to prevent getting lost in the process is to frame the term Design System through the orientation phase.

  • What is the problem you want to solve?

Make sure that you know what kind of problem you want to solve. This would be step one. Problem framing! Focus on the visuals and the tooling afterwards, so you make sure you don’t  forget about the higher goal. What is the purpose of the Design System? What are the values of the Design System? What and who is the Design System representing? Etcetera.

  • Who and what do you have in store?

Instead of focusing on creating something completely new: what knowledge and guidelines do you already have? You don’t have to start from blank, from nothing (talking about a company who is an expert in back-ing up stories, a throwback to the cassette tapes). What is already done by your people? Maybe somewhere in the archive you will find very useful data, stored by people you don’t work directly with. Not to mention, this is a way of getting all the people and all the visions on board.

✉️PS. Defining the workflow around the adding of new element to your Design System can be difficult (and to align your team). For this occasion, we have created a tool: the Process Puzzle. With the help of this puzzle, OGD made a new workflow for their team.

Vacature ​Visual/UI Designer

Welkom bij Angi! 👋 Samen met innovatieve organisaties gaan we hun grootste uitdagingen aan. Snel en zonder onzin.

Waar we van houden? Snelheid! Geen maandenlange voorbereidingen en onderzoeken, geen eindeloze vergaderingen, maar handen uit de mouwen en samen aan de slag. Daar waar design en business samen komen; dat is Angi Studio. Online halen we het beste uit organisaties.

Deze snelheid willen we graag vasthouden. Daarom zijn we op zoek naar een vlugge visual designer. Laten we het over jouw superpowers hebben!

Jij:

  • hebt 3 tot 5 jaar werkervaring bij een digitaal bureau of als freelancer;
  • hebt een portfolio met sterke focus op digital en online;
  • weet dat het niet bij mooie plaatjes stopt, je denkt graag na over de interactie;
  • vindt het leuk om kennis te delen met vakgenoten en klanten;
  • hebt interesse in het opzetten en doorontwikkelen van Design Systems;
  • bent een ster in design- en prototyping tools;
  • bent super nieuwsgierig, je verdiept je graag in nieuwe materie;
  • kunt jouw werk presenteren, onderbouwen en staat open voor feedback;
  • bonuspunten als je ervaring hebt met UI animaties;

Wat ga je doen?

Samen met collega’s & klanten ontwerp je doeltreffende visuele concepten. Je vindt het leuk om met collega’s aan uitdagende projecten te werken waarvoor je je in verschillende doelgroepen en brands moet inleven. Je stapt graag uit je comfortzone, op zoek naar de beste oplossing voor een probleem. Je hebt een feilloos oog voor detail en een sterk gevoel voor zowel visual design als interactie. Je zult werken aan grotere web-projecten. Dit brengt de nodige uitdagingen met zich mee. Gelukkig zijn ‘Design Systems’ & ‘Design Sprints’ termen waar jij voor warmloopt.

We bieden je:

  • gevarieerde en uitdagende projecten voor klanten als SNS Bank, Greenchoice, Gemeente Den Haag, Rechtsorde en Reed Business;
  • een klein en hecht team met veel ruimte voor eigen inbreng en creativiteit;
  • een open, persoonlijke en informele werksfeer;
  • een marktconform salaris + leerbudget;
  • reisvergoeding;
  • de mogelijkheid om af en toe vanuit huis te werken;
  • veel taart;

Waar we in geloven:

  • Klanten hebben de beste ideeën. Als design partner willen we de kennis van onze klanten optimaal benutten.
  • Stralend falen. Hoe sneller je faalt, hoe sneller je leert. Daarom testen we zo vroeg mogelijk.
  • We vertrouwen niet op aannames. Gebruikers weten ons elke keer weer te verrassen.
  • Geen vraag is fout. We zijn van nature nieuwsgierig. Kritische vragen? Stellen we ook.
  • Resultaat voorop. Geen ellenlange rapporten, maar resultaat in design & cijfers.

Klinkt dit je als muziek in de oren? We zien je sollicitatie graag tegemoet. 🙌

Eerst kennismaken?

Kom dan naar een van onze meetups.

The Lean Design System of Greenchoice: How to create a Design System on the fly

Thursday, 25 April om 18:00

26 deelnemers

The Lean Design System of Greenchoice

Do you ever feel like you just don’t have enough time to create that Design System you would love to have? That’s a shame because Design Systems are very useful. However, making a Design System when you are working scrum can be a challenge. During this meetup we shared how we created a ‘Lean’ Design System on the fly, next to all regular scrum work.

How to create a Lean Design System on the fly

During these meetup we shared our story how we’ve created a Design System ‘on the fly’ for Greenchoice, the most sustainable energy supplier of The Netherlands. We talked about:

  • How it all began and the why and when they needed a Design System;
  • Which steps they took to create a Lean Design System;
  • What the Greenchoice Design System looks like and how it grows;
  • How the System is integrated into the production environment;
  • How Greenchoice combined building the Design System with other ‘scrum’ work.

During the Meetup we shared some useful tools we’ve created to make our work easier. Check them out. They may help you as well.

1. Design System Checklist

This tool will help you and your team decide what is relevant to include in your Design System. What do you really need as a team? What could you start with? Our checklist can help you get more focus and decide what to include in your pilot.

Design System Checklist is part of our Design System Take Off, in which we help you kickstart your Design System.

2. Process puzzle

Design Systems are 80% people and how we work together. Want to get started with improving your governance and process? Our Design System Proces Puzzle could help you with the first steps.

3. Design System Buy-in🕺

You don’t build a Design System by yourself, you to convince others. To help you with this we created a ‘convince your boss’ slidedeck. You’ll find slides about:

  • what a design system is
  • why it’s necessary for your organization
  • how you make yours a success

Supported with relevant learnings from the Dutch market.

State of Design System in Netherlands, 2018

Last but not least. Curious how other organisations in the Nederlands build and maintain their Design Systems? Check out our research State of Design Systems in Nederlands, 2018.

Download the slides

Verder met je Design System?

Niet zeker of je Design System nodig hebt? 
Probeer dan Design System Taster Workshop.

Get your Design System up and running, but how?

Development within (scrum) teams goes faster and faster. New features and product improvements are therefore often more important than documentation and reusability. As a solution, more and more organisations opt for Design System. On April the 2th we told all about how you can get your Design System up and running in just 4 days.

Aan de slag met de checklist

Building your first Design System

Starting with your Design System, however, takes a lot of time. You review a component over and over and many things will be discussed when it’s finished. Many organisations struggle with collaboration and adoption of their Design Systems. People reinvent the same stuff over and over again, but you can prevent that

We showed different cases and exercises that we use during our Design System Take Off. Our goal? Make sure you are better prepared to setup your own Design System

Design System Checklist

During the Meetup we practiced with the Design System Checklist. This exercise will help you and your team decide what is relevant to include in your Design System.

The checklist helps you decide what to include in your pilot.

This tool is part of our Design System Take Off, in which we help you kickstart your Design System.

Convince your team 🕺

You don’t build a Design System by yourself, you need your team. To help you with this we created a ‘convince your team’ slidedeck. You’ll find slides about:

  • what a design system is
  • why it’s necessary for your organization
  • how you make yours a success

Supported with relevant learnings from the Dutch market.

Download the slides

Verder met je Design System?

Niet zeker of je Design System nodig hebt? 
Probeer dan Design System Taster Workshop.

Workshop Design Sprint 2.0

Conceptontwikkeling kan weken of zelfs maanden in beslag nemen. Maar waarom zoveel tijd besteden, zonder te weten of je de juiste kant op gaat? Een Design Sprint helpt je in 4 dagen nieuwe concepten te ontwikkelen en direct te toetsen met jouw gebruikers. Tijdens deze workshop ervaarden we samen met de deelnemers het volledige sprint proces.

deelnemers tijdens de meetup

Een veilige omgeving om te experimenteren

Het is niet zonder reden dat organisaties als Google, Slack en Uber deze methode massaal toepassen. Het is een veilige omgeving om te kunnen experimenteren met jouw meest kansrijke ideeën. Alles wat je kan verliezen, is immers maar 4 dagen.

design sprint proces
Design Sprint proces

Wanneer doe je een Design Sprint?

De belangrijkste vraag is natuurlijk, wanneer doe je een Design Sprint? Het is toch 7 man x 4 dagen = 224 uur, een grote investering dus. Het risico wanneer je een Design Sprint verkeerd inzet? Een gedemotiveerd team en er komt niet snel nog een sprint.

Wanneer is een Design Sprint een goed idee? 👍
  • Je wilt aan de slag met een grote uitdaging; hoe groter de uitdaging hoe beter de sprint.
  • Wanneer je weinig tijd hebt, je wilt snel tot een oplossing komen.
  • Wanneer je jouw team een boost wilt geven.
Wanneer is een Design Sprint geen goed idee? 👎
  • Je hebt een kleine uitdaging, niet waard om 200+ uur aan te besteden.
  • De oplossing staat al vast en hier van afstappen is geen optie.
  • Geen middelen om er vervolg aan te geven.
  • Team is niet bereid agenda’s leeg te maken.
Download de slides

Aan de slag met Design Sprints?
Esther denkt met je mee.

Esther Wieringa

Onze Lean Innovation Lead beantwoordt graag al jouw vragen.

Stel Esther jouw vraag

State of Design Systems in NL
[UXify Eindhoven]

Developing and maintaining a Design System is a hot topic right now. Setting up and improving your Design System can be very challenging. This evening we will share our experiences with helping companies and organisation setting up their own Design System.

Download the slides
talk

What have we learned from ‘State of Design Systems 2018’ survey

In this Meetup we shared our insights from ‘State of Design Systems’ survey that we conducted among 260+ designers and developers from the Netherlands! ❤️

Together with the participants we discussed the most interesting insights we found. We asked them how they perceive these challenges and how they would solve them.

Design System Proces Puzzel 

Design Systems are 80% about people and how they work together. This is one of the biggest challenges people face when setting up and using a Design System. In our survey we used process and collaboration as main focus.

During this Meetup we focused on this particular challenge and gave the participants a fictional case. In small teams we asked them to create a fictional process by using our Design System Process Puzzle to solve the following problem:

Cool Design System! I need a live chat, how do I add it to the Design System?

After everyone created their own process, the teams shared insights and discussed their flows.

Interested in more Design System related tools? Check out our Design System tools 🔥

processpuzzel
Download slides

Ready to start with your Design System? Join us at our next Meetup in The Hague or Amsterdam

Verder met jouw Design System?

Niet zeker of je Design System nodig hebt? 
Probeer dan Design System Taster Workshop.

Front-ending your Design System, pt. 1

Here at Angi Studio we aim to be as tool-agnostic as possible. We adapt our workflow to our clients’ workflow. If they use Figma for design, we’ll use Figma as well. If they use Sketch, we’ll use Sketch. Or Adobe XD, Framer, you get the picture.

The same goes for our development process and our Design System or component-library deliverables. If their team develops in React, then so will we. If they deploy their code components in Fractal, Frontify or Storybook… well, so will we.

To get to know all these tools requires effort on our end, but in the end it’s more than worth it.

Luckily, we’ve met great people from various companies at our meetups, who were more then willing to help us out. Recently we met with people from FramerX (design & prototyping) and Frontify (Design Systems). Both tools are amazing and for this post we’ll start with Frontify.


Frontify

frontify logo

The amazing people at Frontify built a tool to build and maintain your Design System, collaborate with your team and even keep track of progress in a Kanban board.

We could go into all features they offer, but hey, they already did that on their website.

We set up an hour-long call with Jannik and Stephanie from Frontify to answer some of our burning questions on building and deploying with Frontify. For this we’re very grateful, especially since they offered us a free trial of their Enterprise version. Thanks again guys!

There are two options that stand out from a frontend perspective:

  1. For other tools you need to arrange your source-files into their pre-composed folder structure to be recognised, but Frontify turns this around. We simply tell Frontify (via a JSON file) to look for files in our existing source code and folder-structure
  2. We can deploy from the local development (connected to GIT) to the Frontify App with a simple sync script


1. Frontify looks for your files

We’re used to working with Fractal, Patternlab and Storybook for deploying our component libraries. With Fractal one of the drawbacks for me as a Frontend developer is that we have to place all our source files in the Fractal folder structure. In this scenario, we’re not able to maintain a solid source-folder that follows naming conventions as we’ve grown accustomed to in our line of work.

Frontify changes this by allowing you to setup a JSON file, pointing to the source files in your existing folder structure. This enables us to maintain a workflow we – and of course the developers that will inherit this project – are accustomed to.

This speeds up development for us and for our clients. Big win here!


2. Sync!

With their Node API , Frontify enables us to push the changes we made directly to the Frontify App. This makes it a breeze to update clients with new components in their Design System.

As all of our code is hosted on Github, every change stays in sync across our development team.

They offer a basic example right there on the NPM site. Now all we have to do is extend their example with a Gulp Git package to pull the latest changes (just in case) just before we push to Frontify, keeping our Repo the 100% source of truth.


In the end…

We love working with Frontify: it’s a great tool, with amazing features and we can’t wait to use it for our next client, who knows, that could be you.


Next up…

In a next post we’ll be talking about our experiences with other tools for your Design System or component library. Currently we’re doing a lot of stuff with REACT, so Storybook is a good candidate!

State of Design Systems in Nederland 2018 [onderzoek]

In september 2018 hebben wij een onderzoek gedaan naar de huidige staat van Design Systems in Nederland. In dit artikel willen we jou meenemen in de resultaten van dat onderzoek en delen wat wij allemaal geleerd hebben van jullie.

Design System Safari at de Volksbank

For this safari we were invited by Ad de Bont and Daniël Wedema from De Volksbank. De Volksbank is a family of bank brands: ASN Bank, BLG Wonen, RegioBank and SNS Bank. All brands have their own identity, but are part of a single Design System. We talked with Ad and Daniël about the challenges they faced setting up this multi-brand Design System.

Design System Safari bij DSW

Voor deze tweede Design System Safari mochten wij een kijkje in de keuken nemen bij zorgverzekeraar DSW. Wij gingen aan tafel met Rick (Design en Development), Marieke (Design), Bert (Design en Development), en Daniel (Developer / Architect) en vroegen hen alles over het DSW Design System ‘Daisy’. De dag van deze safari is een spannend moment voor het team, namelijk de release van hun eerste alpha versie!

Get your Design System up and running, but how?

Development within (scrum) teams goes faster and faster. New features and product improvements are therefore often more important than documentation and reusability. As a solution, more and more organisations opt for Design System. On March the 5th we told all about how you can get your Design System up and running in just 4 days.

meetup

Building your first Design System

Starting with your Design System, however, takes a lot of time. You review a component over and over and many things will be discussed when it’s finished. Many organisations struggle with collaboration and adoption of their Design Systems. People reinvent the same stuff over and over again, but you can prevent that

We showed different cases and exercises that we use during our Design System Take Off. Our goal? Make sure you are better prepared to setup your own Design System

Design System Checklist

During the Meetup we practiced with the Design System Checklist. This exercise will help you and your team decide what is relevant to include in your Design System.

The checklist helps you decide what to include in your pilot.

This tool is part of our Design System Take Off, in which we help you kickstart your Design System.

Convince your team 🕺

You don’t build a Design System by yourself, you need your team. To help you with this we created a ‘convince your team’ slidedeck. You’ll find slides about:

  • what a design system is
  • why it’s necessary for your organization
  • how you make yours a success

Supported with relevant learnings from the Dutch market.

Download the slides

Verder met je Design System?

Niet zeker of je Design System nodig hebt? 
Probeer dan Design System Taster Workshop.

Aan de slag met Design Systems?
Maurice denkt met je mee.

Maurice Timp

Onze Design System Lead beantwoordt graag al jouw vragen.

Stel Maurice jouw vraag

Een vliegende start met je Design System, hoe dan?

Ontwikkeling binnen (scrum) teams gaat en moet steeds sneller. Nieuwe features en productverbeteringen zijn hierdoor vaak belangrijker dan documentatie en herbruikbaarheid. Als oplossing kiezen steeds meer organisaties voor Design System. Op 28 februari vertelden we hoe jij in slechts 4 dagen een vliegende start kunt maken met je Design System.

Volle zaal bij de Meetup

Je eerste Design System bouwen

Beginnen met je Design System kost veel tijd. Je herziet een component vaak of veel dingen moeten achteraf nog besproken worden. Samenwerking en adoptie zijn de onderdelen waar veel organisaties mee stoeien. Het voelt alsof mensen elke keer opnieuw het wiel moet uitvinden, maar dit hoeft niet zo te zijn.

We laten een aantal verschillende cases zien en nemen jullie mee met een aantal oefeningen die wij zelf tijdens onze Design System Take Off gebruiken. Zo ben je beter voorbereid om zelf aan de slag te gaan met je Design System.

Design System Checklist

Tijdens de Meetup hebben we in groepjes geoefend met de Design System Checklist. Deze oefening helpt je om snel te bepalen wat relevant is om in jouw Design System op te nemen. Gebruik deze techniek wanneer je een nieuw Design System opzet.

Het doel is om snel te bepalen wat relevant is om in jouw Design System op te nemen en focus te creëeren voor jouw Design System pilot.

Wij gebruiken deze tool als onderdeel van onze Design System Take Off, waar we je helpen een vliegende start te maken met je Design System. Een goede start is belangrijk, want uit ons onderzoek blijkt dat je anders een wildgroei en inconsistentie overhoudt.

Overtuig je team 🕺

Een Design System zet je niet alleen op, daarvoor heb je je team nodig. Om je hier een handje mee te helpen creërden we ons ‘overtuig je team’ slidedeck. In het slidedeck vind je slides over:

  • wat een design system is
  • waarom het nodig is voor jouw organisatie
  • hoe je jouw design system een succes maakt

Onderbouwt met relevante learnings uit de Nederlandse markt.

Download de slides

Ook klaar om aan slag te gaan met jouw Design System? Kom naar een van onze volgende Meetups in Den Haag of Amsterdam.

Verder met je Design System?

Niet zeker of je Design System nodig hebt? 
Probeer dan Design System Taster Workshop.

Aan de slag met Design Systems?
Maurice denkt met je mee.

Wij gebruiken cookies voor de beste ervaring van de website. Tijd teveel, beklijk onze privacyverklaring