Trends peak and go under. One of many designer’s superpowers is to spot the difference between a design trend and a revolution. Design systems have passed the trend phase and have entered to revolutionise the way designers, developers and other stakeholders are working. There is a buzz around design systems as a whole, and some misconceptions on what it is, what it does and why it exists. Let’s clear that up.
Call me traditional, but I think that different understanding of the same terminology is the beginning of the miscommunication cycle. Let’s get those out of the way since we will hear them when talking about design systems.
Design: a plan or drawing produced to show the look and function or workings of something.
System: A system is a group of interacting or interrelated entities that form a unified whole.
Components: a part or element of a larger whole.
Component library: a storage place where the coded user interface components are stored and documented.
Standards: a level of quality.
Principles: a proposition that serves as the foundation for a system.
A Mini-History Lesson
Feel free to skip this if you aren’t a history nerd. The point is, that, design systems are not a new concept and have matured over the decades. Design systems as we know them today are a new concept. However, like most new ideas, they are hardly “original” and have stemmed from similar ideas before them. Here I will cover a brief history of it.
1977- Pattern Language, a design system for architects
15 Principles of Wholeness “A Pattern Language” by Christopher Alexander
A Pattern Language: Towns, Buildings, Construction is a 1977 book on architecture, urban design, authored by architects Murray Silverstein, Sara Ishikawa and Christopher Alexander. The book is considered by many as the start of design systems which the authors refer to as “pattern language”. A closer look at the book would reveal that most of their inspirations and examples come from medieval towns. Thus, the idea of a pattern language isn’t new, it just wasn’t accessible. Pattern language has revolutionised the thinking about those systems, in a way making it accessible to ordinary people, not only professionals to improve their houses, towns or schools by using those design tools. This book has lead to the next point→ Pattern Libraries
1986/1994- Pattern libraries
Book Cover – User Centred System Design(1986) by Norman and Draper
Although the idea of using “pattern language” in design was mentioned in” user-centred System Design”(1986) by Norman and Draper, it did not gain traction until the rise of web-pages during the late 1990s and early 2000s. Designers and especially developers found themselves needing to reuse components in different pages etc. Thus after the book “Design Patterns: Elements of Reusable Object-Oriented Software” came out in 1994, the idea has gained popularity. The Pattern Languages of Programming Conference (1994-present) became an annual event.
2016- Atomic Design
Atomic Design by Brad Frost
With the rise of different screen resolutions and devices, designers tasks grew immensely, and quite frankly, became unmanageable. Resulting in inconsistent UI’s across the board. The struggle was real. Atomic Design by Brad Frost, had solved problems and provided a system of thinking about these UI components in a scientific approach of Atoms, Molecules, Organisms, Templates and Pages. Many of the UI consistency issues were tackled. Some design principles were still lacking.
2014/2016- Google Material Design
Part of Google Material Design
2016 the birth of design systems as we know them today. Without a doubt, Google has pioneered the first complete and open-source design system. It has been used by countless companies either as is or as a template to build their design systems.
If you are interested in a deeper dive inside the history of Design systems, I highly recommend this blog post named “A HISTORY OF DESIGN SYSTEMS”
What is a design system?
A possible configuration by UXPin
Simply, a bunch of reusable components, guided by simple to understand standards and principles and can be assembled like lego pieces to create any number of applications. For designers, this could be done using design software such as Sketch, XD, Figma and many others. As for developers, this means using coded components libraries in for example react. For other stakeholders, this could mean referring back to standards and principles that can guide decision making.
A component library is not necessarily a design system.
Although a component library is one of the core elements in the design system, it won’t solve all the problems. Simply put, the component library answers the “What”, as for the rest of the design system answers the “Why”. In other words, how are those UI components used and why? Without understanding this critical step, we will still have inconsistent experiences despite having similar-looking user-interfaces. There are efforts being made, to unify the entire design system inside a single component libraries, but the process is still in its infancy stages.
What is included inside a design system?
Design systems are not a template to follow, nor does it come with a set configuration. It has to be customised to an organisation’s need. The size of the system could also have an impact on the things included. I.e. a fortune 500 company’s does not compare with a start-up’s design system.
Things that could be included but not limited to
- Design Tokens
- Tone of Voice
- Brand image
- Visual language / Look & feel
- Design principles
- Graphic guideline
- Code libraries
- Separate documentations
- Team and contributors
Who uses it?
Countless top organisations have started to utilise design systems to scale the design, lower the cost and improve usability. It’s quite rare to find an industry leader currently, that doesn’t have a design system in place.
Spotify as an example has documented its transition to using a design system and the effect it had on their organisation.
“Design systems help teams stay aligned so their output stays intentional.” –Stanley Wood, Design Director at Spotify. Read about their transformation here “Design Does Not Scale”.
Before the design system implementation
After the design system implementation
Another organisation that has written extensively about its design system as a key factor to their success and survival is Airbnb. More about Airbnb Design here.
Design systems as a way of working
Regardless of how detailed and meticulous the documentation is, verbal communication between all stakeholders remains a key point to create a successful design system. In other words, design systems are more than lego pieces with rules, they are a way of working and communicating. They help to awaken and revive the design thinking mentality in both designers and non-designers. The idea is not to follow rules robotically, but provide a a framework that would speed up the innovation progress. Many intangible yet critical issues to be address in a design system, that might not be apparent on face value.
What can a design system help with in real life?
Some of those benefits overlap but might be more interesting for certain groups than others. So divided it into three groups.
Although designs systems require time to be setup, and get going, creating complex UI’s between designers and developers becomes potentially faster, ideation takes less time since we know what we have to play with. In essence, designers can draw wireframes on a whiteboard and developers can develop that from the components existing without the need for a pixel perfect design in the middle. Still, some designers prefer to craft pixel-perfect designs using pre-designed components. Airbnb has designed an AI that translates paper wireframes to coded layouts using their design system. Read more about that here.
2. For stakeholders: Design Debt Reduction
Design vs tech debt in small teams usually creates a prioritisation nightmare. Product owners, designers and developers will be pleased to know that once the design system is in place, there will be fewer discrepancies and inconsistencies to fix in future sprints. Developers will be using ready components and thus create fewer bugs. This will automatically reduce the design debt.
3. For users: Boost Coherency and Predictability
Users, usually won’t and shouldn’t care about the top two benefits, when it comes down to usability though, users expect modern software to behave predictably. A design system will create a consistent experience across all UI’s and components. Design standards will help in the way everything behaves. Design principles will guide the team to take new decisions faster.
Design systems, like any other solution, doesn’t come with-out challenges. Some of those might be that designers feel that the design system puts some constrains on creativity. Others, think that it might hinder exploration, re-alignment and reflection. Other worries might involve the inflexibility of systems overtime. Thankfully, being aware of these pitfalls can greatly reduce the risk of these issues realising. Even if some of those challenges happen, there are solutions to overstep these hurdles. What is a challenge, is the constant amount of work and resources required to design and develop an effective system to transform your organisation.
A good design system is an ever-evolving one!
How to create a successful one? Create a living, breathing system that’s flexible, maintainable, stable, scalable, and is designed for the long-term. Of course, that is no easy task, if you are interested however, we will be happy to guide you through it.
Depending on your current organisational culture, the transformation from face-to-face meetings to virtual ones can be tricky. There are some aspects that you should consider before planning a virtual meeting, for example event purpose, targets, group size and locations, since they impact on how you should run your event.
There are some common practices that are easy to learn and apply to your to all your virtual meeting. To help you succeed in your digital encounters, we collected our best practices into five phases, following a common meeting flow: 1. Before, 2. Start, 3. During, 4. Close, 5. After.
Let’s go through each phase, one by one:
Decide which tools you are going to use
When deciding which tool to use for a call, Microsoft Teams, Skype, Google Hangouts, Zoom and Slack are currently the most popular meeting tools. All have their pros and cons, but you’ll manage with each of them. If you want to participate people, you also need some kind of shared workspace. Some tools come with this already, like Skype for Business or Zoom, and some don’t. In those latter cases, you need to choose a separate tool for collaboration.
We recommend trying out these combinations:
- Teams /Zoom /Slack + Sharepoint Powerpoint /OneNote
- Google Hangouts + Jamboard /Docs /Pages
- Teams /Zoom + Mural /Miro (for more advanced workshopping)
Setup a shared space
- Make sure all your teammates have access to shared meeting files
- Prepare the materials you’re going to present and work on
Test the equipment
- If you’re able to use video stream, test your camera before the session starts
- If the participants are new to you, you have a big group of attendees or the meeting is going to be a lengthy one: start 10-15 minutes earlier to check that everything is working properly. You can also have a check-up session a day before the actual meeting – in that case the participants will have more time to fix their tools, if any problems occur.
- Remember to have a backup plan for those who have troubles joining the call, seeing the screen, using the collaboration tools etc. (Believe us, this happens quite often.)
There are a lot of things to consider, so always prepare well
- Make sure you have a clear agenda for the session.
- Flow: If the meeting includes workshopping, it’s best to timebox everything. Plan and walk through the whole agenda. If you haven’t organised remote meetings or workshops before, it’s good to rehearse with your colleagues beforehand.
- If the meeting includes ideation, it’s good to share background information about the ideation topic beforehand.
- Send information about the event beforehand to participants: agenda and system requirements. Encourage them to choose a good (quiet) location and ensure their tools are working. Give your participants also the possibility to get prepared.
- Consider recording the meeting, especially if some invitees can’t participate. Remember always to ask for recording consent, beforehand though!
- If you’re using a company meeting room for your meeting/workshop, it’s good to reserve the room 15 minutes before the event. You will need some time for getting organized.
- Consider having a co-host: If you’re workshopping with a large group, having someone helping you out with facilitating the event is useful. It decreases your organising pressure and usually shows in the participants’ satisfaction. While one host is presenting, the other one can concentrate on fixing possible practical challenges. Just remember to practice the choreography beforehand with your peer.
Start with a check-in with all the participants
- Make sure everyone can hear each other. Say hello to every person individually, so they can reply out loud.
- Start your session by going through the purpose, target and the agenda for the meeting. Inform about the possible different phases that are included in the meeting (e.g. presentation, ideation, voting, discussions in pairs). Note: Unclarity breeds passiveness.
- Tell why you have invited these people in your meeting and tell about your expectations towards the participants
- Ask about expectations (utilise e.g. chat for this)
- Ask participants to inform in the beginning, if they need to leave early.
- Introduce people to each other (faster), or let them introduce themselves (takes more time)
- Use “ice-breakers”, to set a relaxed mood (ask us for details)
- Create a safe space for everyone to talk. Be an example.
Set working instructions
- Introduce roles, if there are any specific ones.
- Require focus: Phones should be put away. Microphone are supposed to be on mute if the person isn’t talking. Ask participants to close all other apps on their screen and focus solely on this meeting.
- Inform about possible breaks that you’re planning to have.
- Inform how to behave, if a participant needs to leave suddenly.
- Go through the tools and workshopping methods used.
- Set a protocol on how participants are allowed to speak (e.g. using icons, writing in chat, and starting with their name when they speak).
- Only one person should talk at a time, although there should not be long monologues.
Use video if possible
Video stream helps to engage and keep focus. However, it may also slow down the connection and cause other technical problems. Utilise video stream at least in the beginning of the session, to get more connected with your participants.
Keep the energy high
Following a long meeting or workshop remotely is tiring. Maintaining the focus can be hard for everyone.
Use your tools to engage and interact, to keep the energy levels high!
- If the meeting lasts more than 1.5 hours, have short breaks (remember to be very clear about the continuation time).
- Use “energizers”, if you feel that people are getting passive (ask us for details)
Keep the focus clear
- Keep the agenda visible, or at least easy to find (e.g. post it in the meeting chat, once everyone has arrived)
- Keep the current topic visible on screen to maintain focus.
- Write the meeting memo so that everyone can see it.
- Ensure action points are documented, reviewed, and have action owners.
Break up in small groups, if relevant
- If you’re ideating something, breaking up into smaller groups is a good idea. Some call tools enable this (like Zoom). Remember to give the groups clear instructions about the topic and the amount of time they’re allowed to use for it.
- “Me-We-Us” is a good method for ideating and problem solving (ask us for details)
- Working in smaller groups at times boosts energy within the team.
- Remember that dividing into small groups also requires some time, to get people oriented
- The smaller the groups, the less time they will need for working on tasks. Sometimes even 2 minutes can seem like a very long time.
Be strict with airtime
The great thing about remote meetings is that they can be more equal than live events for participants. Make sure same the people don’t dominate throughout the meeting and invite the silent ones to speak up their minds (you can try using a timer, for example).
Utilise the meeting chat
All call tools enable chat. For quickly collecting feedback, ask participants to write their thoughts in the meeting chat. Then allow few minutes for everybody to read the comments before proceeding.
Summarize and review
- Did you reach the target?
- What are the next action points?
- Do all action points have owners and deadlines?
Ask feedback: Was the session useful for them? What felt important? What could be improved next time? Remember to thank everyone for their time and input!
Share the materials
Share the possible recording, workshop materials, meeting memos and action points to participants.
To summarize things up
Some things to remember:
#Virtual space relies heavily on sound and you lose a lot of the non-verbal communication. Thus, you need to pay more attention to interaction with participants. Read more about the topic here: How to have a great virtual meeting
#Thank people for attending your meeting. Time is valuable, and yet they have decided to use it in your event. Show that you appreciate their time, and they will be happy to join your next session!
Wish to get more tips?
We are happy to help you in facilitating your virtual meetings successfully. Please don’t hesitate to contact us at: firstname.lastname@example.org.
Jonas Rajanto, Grape People, Basics of Virtual Facilitation
Recently I attended the Service Design Network´s event of Doing Good in Design: Social Impact and Ethics In Service Design. I thought I would share my notes and maybe you will also pause for a minute to really think about the impact of your work on the world. I sure did.
Miko Laakso from DNA (the host of the event) shared some wise words from Victor Papanek (1970):
“You are responsible for what you put in the world.
And you are responsible for the effects those things have upon the world.”
The main part of the evening was facilitated by the guest speaker Jethro Sercombe who works with social impact projects in Australia, projects like enabling better opportunities for homeless youths in rural areas of Australia.
We briefly touched upon the principles of ethical design:
Jethro reminded us about the position of power we take and bring into situations as designers, and how that can have a negative or misleading impact on the interaction and thus the outcome of the research. This applies not only to designers, but any profession and any situation. We all have and take power positions. That is why with great power comes great responsibility.
Jethro presented six different bases of power (by French and Raven (1960, 2008)):
How do we acknowledge our power position and dismantle it in order to create a safe place for the ones we are interviewing or observing (or for any human interaction for that matter)?
In designing for social impact, the object is different from commercial projects. We usually design for users or potential users of the service, when designing for social impact the object is families or communities – the community experience. See how this shift in perspective will impact your thinking.
Great questions to think through in the design process are:
- Who are we excluding with our design?
- How can we minimize the influence of our own biases (and yes, we all have them)?
- How can we anticipate the short-term and long-term effects of our design?
Working in smaller teams using the futures wheel
Next, Jethro divided us into smaller groups for ideating a billion-dollar business idea around: “What might an Uber or Airbnb of healthcare or childcare look like?” After a few minutes of individual time for ideating business ideas on post-it´s the team voted the most potential business idea. I will share our team´s idea to illustrate the process, not because it was any good or proposing any of you to actually run with the idea 😄
We voted for a “health taxi service” (Uber of health care) in which trained nurses are the drivers of well-equipped taxis that anyone can order to their home for health checking purposes.
Now Jethro told us our business was booming and in fact, our “health taxi” had become a Unicorn that ruled the health market. By using a tool, the futures wheel, we were supposed to come up with utopian and dystopian scenarios with newspaper headlines of what our business was going to look like according to those future scenarios.
In the Utopian (desired future) scenario our “health taxi” business pivoted into a data-AI driven company utilising all existing location-based health data gathered by all taxis. Since ordering the health taxi to your front door was so easy, people used it more often than traditional services. This enabled the company to move from “sick care” into preventative health care finding patterns and probabilities from the data. A newspaper headline was: “No more sicknesses and longer life expectancy for health taxi users”.
In the Dystopian (undesired future) scenario our “health taxi” business was in fierce competition with other health taxi services and due to legislation lagging behind there were a lot of fake nurses driving the taxis mistreating patients and giving false advice to people. Traditional health care centres were shut down a long time ago when the government decided to buy the services from the health taxi companies. Trust in health services dropped dramatically and media reported of mistreatments on a daily basis. The newspaper headline read: “Health taxi strikes again: yet another 10 people died during Christmas time for mistreatment”.
By using the futures wheel in your design process, you can challenge the customer to anticipate the long-term impacts of solutions through utopian and dystopian scenarios. Impacts can be considered on a micro or macro level like on people, community, society, globe (Earth). When both scenarios are ready the most important part of the exercise is to mitigate the risk of the dystopian world so it never becomes reality. This approach exposes the team to include a long-term perspective as part of the design process.
So, is doing good in design just about those who practice design for social impact in charities or governments or should we also take responsibilities as designers (or as developers) to ensure business decisions and solutions in the long-run cause no harm to people, communities, society or to mother Earth? I will leave you with this thought.
Ethical design: https://2017.ind.ie/ethical-design/
Bases of power: https://en.wikipedia.org/wiki/French_and_Raven%27s_bases_of_power
Futures wheel: https://en.wikipedia.org/wiki/Futures_wheel
´Speculative design´ – a tempting path (go there with your own risk bearing in mind it can have a great impact in your thinking) for learning more about addressing big societal problems and looking towards the future: e.g. in https://www.invisionapp.com/inside-design/speculative-design/
If you want your product or service to succeed, engage users early on and in every step of the development. No matter how cutting-edge your technology – if it doesn’t fit users’ needs, they won’t use it. Constant feedback from users helps in keeping the focus on the important things. Which in the end saves money and makes the product enjoyable to use.
Picture this: It’s a typical Monday morning at work and you’re trying to get your routine daily tasks done. At hand, you have a task that requires you to use a system or program that is not actually your favourite for many reasons. But since you’ve done it many times before, you’ve become a master at it. Maybe you’re handling invoices or retrieving information about your customers from CRM. As you sip from your first cup of coffee you sigh: “If only there was an easier way to do this…”
Scenario A: Designing technology first
You realise that a new button called “AI assistant” has appeared on the screen. Since you’re a tiny bit intrigued by it, you might as well see what it’s about. So, you click the button and “Heidi Helper” pops up on your screen. It seems that Heidi wants some information from you in order to be helpful, but it takes a lot of time to understand her needs. Also, you’re quite unsure what Heidi can do for you in the end: Will she handle my invoice all together or just some part of it? Will she just gather information and do some data-crunching without me knowing what is happening? You’re starting to think: “Maybe, I should’ve just done the invoice like I usually do. I would probably be done with it already and could be drinking my second cup of coffee with my colleagues.”
Scenario B: Designing user first
You realise that a new button called “AI assistant” has appeared on the screen. You’re thrilled about it: “It’s finally here! At last, I can get some help with these routine tasks!” So, you push the button and “Heidi Helper” pops up on your screen. Since you were part of the design process, you know exactly what information Heidi needs from you to make you get the job done faster. You also know, that by inserting all the required data, Heidi can learn to combine relevant information together quicker than you could ever possibly be able to. So, by helping Heidi now, she will be your trusted ally in the future. You would never go back to working the way you did before her.
Which scenario would you choose: The one where technology is pushed on the users without proper reasoning or training or the one where the users were involved in the design process to make the technology fit their needs? The answer is simple, right?
How we involved users in the AI design process
In our project of designing an AI assistant, we wanted to make sure that the actual users of the assistant would be in the centre of the design process. Our goal was to a) understand how they use the system, b) identify the pain points in getting their tasks done with the system and c) design an AI assistant that would resolve the issues they are facing right now and ease their work.
Here’s the process we followed in our work:
- Assemble a multi-faceted team with experts in user research, UI design and data science
- Conduct user interviews and observations to understand how the system is used in completing daily tasks. Put emphasis on digging out how they feel about the system, how does it work in their favour and what are the things they struggle with.
- Conduct a workshop together with the users where you illustrate their work process on a canvas. In our case we wanted to understand the following aspects:
- All the phases to complete the task
- The data and information sources they need for each phase
- The challenges they face in each phase
- The initial solutions for each challenge
- Design a technical solution that responds to the challenges identified in the research phase. Communicate the benefits of using it in a comprehensible manner to the users and make changes if needed.
- Design the user interface for the AI assistant and demonstrate to the users how the assistant would actually work in their environment. Use a technology that allows the users to get acquainted and test the prototype by themselves.
By placing the users in the heart of the design process, you can provide an AI assistant that brings the most joy and helps the users get manual work done more efficiently and automatically. It should also be remembered to gather feedback from the users and analyse usage data constantly to optimise the product for even greater user experience.
After the user-centric design process
While using Heidi Helper for some time already you don’t even notice it anymore. All the learning material you’ve provided to Heidi has made the AI assistant better and better each day. You feel confident when dealing with invoices because you know you don’t have to take care of everything by yourself.
The greatest thing is the liberating feeling when you can focus on the most important and challenging work and let the AI assistant take care of the more trivial but time-consuming tasks. While Heidi Helper browses through tens of email attachments in order to find missing invoice details, you’re able to combine information from several sources with unforeseen pace. Also, now you have time for that extra cup of coffee.
Taking a rational and analytical approach in strategic decision-making often lacks customer input. Adding a human-centric design approach to the equation enables the identification of new opportunities that both reflect customer needs and support strategic goals.
In our daily tasks we use both hemispheres of our brain in equal measure: the logical, analytical and rational left hemisphere, and the creative, imaginative and intuitive right hemisphere. In the same sense, when making business decisions, both perspectives should be considered equally important: the rational/analytical business-approach and empathic/innovative design-approach.
With business design you can bridge the gap between these two perspectives by studying the requirements of both the user and the business. In a nutshell, business design brings the needs of customers and users into strategic decision making.
Business design combines two perspectives: the rational/analytical business-approach and the innovative/creative design-approach.
The business approach stands on defining the company’s strategy consisting of the target markets and customer segments, the technologies used to produce a service, the ecosystem needed to provide a service and the earnings logic to keep the business up and running. This approach relies on hard facts and figures based on what is already known and an estimation of where the world is going.
…. and digging for desires…
When it comes to making business decisions, the design approach adds a softer side to the equation. The design perspective takes into consideration the emotions and needs of potential users. Rather than using objective data, knowledge is created from user insight and subjective opinions from user research. Where the business approach is focused on market segments and economic logic, the design approach is more focused on real people and their behavior.
….leads to creating new
Business design empowers the creation of services that reflect user needs but are also feasible from a business perspective. The purpose is to enrich a company’s strategy by bringing the customer’s voice and empathy into business decisions. It is used for creating business ideas that have an identified group of potential customers and verified demand.
Business design can be used to solve several challenges, such as modeling and developing internal processes, identifying areas for development in the current business, identifying new business opportunities or defining business models for new services.
Whether your need is to renew your current business or create something completely novel, adding the design approach to your process pays off.
Software development shouldn’t be an isolated island with little outside contact. However, communication between a development team and external stakeholders isn’t always easy, especially if their sole shared moments happen during sprint rituals. When themes such as transparency or communication come up in retrospectives, a team should consider incorporating new ways of knowledge sharing. One such way is mob programming.
Our development team was at a crossroads of sorts. With some new members and the departure of others, we felt the need to synchronize, since our customer has multiple products of varying maturity and technology stacks. At the same time, their own developers had begun to work more closely with us, so overall there was some confusion over how to get the most out of our team. It was in one retrospective, where communication and visibility were discussed, that a developer suggested mob programming as a possible solution. Despite none of us having tried the method before, we decided to give it a spin in the next sprint.
Mob programming extends the principles of pair programming to an entire team. In a mob session, attendees work simultaneously on the same problem, using only one computer. While the implementations of mob programming vary, at its simplest there are only three different roles: the driver, the navigator and the mobber. The driver is doing all the coding, but they should not make independent decisions. They listen to the guidance of the navigator, who in turn discusses with the mobbers. The navigator should give as detailed instructions as necessary, considering the background of the driver, while the mobbers follow the progress via big displays. All work happens in timed cycles, with the roles rotating in between. In our case, this meant that a product owner found themselves writing code, and a UX-designer pushed changes to a remote repository.
We started with our scrum master as a facilitator. He took care of the practicalities and made sure the team was committed to trying out the new method. We set up a development environment in a conference room and started working towards our goal. It was a slow start, but little by little, code started to appear. Whenever we hit an impasse, we took a breather and made sure we were heading in the right direction. At the end of the day, we had laid promising groundwork for a new feature. Satisfied with the results, we booked time for another mob session in our next sprint planning.
In the long run, the effects of mob programming have exceeded our expectations. In addition to getting actual work done, the whole team has become closer. Everyone despite their level of expertise has learned new things about our architecture, best practices, handy IDE shortcuts and more. The sessions have been so well received, that we began doing them regularly. The whole team, the customer included, is invited. While on paper it may seem wasteful to frequently assign multiple people to work on one item, mob programming can induce widespread benefits:
- Instant communication between team members, since no time is spent waiting for answers or sending emails back and forth. Communicating face-to-face reinforces good teamwork practices and the mentality of giving and receiving help. Kindness and respect will be on the rise.
- Improved decision making. The possibility to discuss problems and pitfalls together reduces overall reluctance to make decisions. This collaboration increases the individuals’ commitment to the results.
- Reduced waste, especially if the product owner is included in the sessions. The team can get instant feedback on their progress, discarding unwanted additions.
- Improved code quality. Having more than one set of eyes reviewing the code reduces technical debt. Best practices easily spread across the team, and even previously unidentified technical debt can be recognized.
- Reduced context switching, since the whole team becomes familiar with the feature being worked on. Mob programming can also shine a light on dependencies between different parts of the software, increasing overall familiarity of the architecture.
Ultimately, mob programming is a tool I can recommend to any team, whether they’re facing issues or not. When starting out, decide the topics beforehand and get everyone up to speed with the goals. This increases commitment reduces anxiety and maximizes your time available for the actual work. Once your session is underway, make sure that people remain in their roles. Experienced developers might be tempted to drive ignoring or predicting the navigator’s instructions, a pattern that should be prevented. Once your team’s confidence grows, you can start tweaking the parameters such as the roles or timing to better suit your needs. You can also try applying this method outside programming, for example in UI-design or user story creation. Have fun firing up your own mob!
This is a large topic and so needs a large introduction.
Essentially, I’m trying to explore what, as designers, we can do to save the planet. We should all know the consequences of climate change by now but to remind you, here are a few headlines from this year:
- The North pole will be ice free in 10 years.
- Soon, there will be more plastic than fish in the ocean.
- Our children probably won’t see any living coral.
- 30% of the world cities will be affected by drought.
Pretty grim for sure, and I wish this was the media exaggerating as usual. Unfortunately, there is no sugar coating these facts. I have experienced the changes in the ocean and coral first hand. I have been to places twice over two years, only to find that every piece of coral has bleached and fish disappeared. There are very important yet simple steps that anyone can take to have a positive impact on the environment. Some of these are:
- Don’t buy things unless you need them. More on minimalism here.
- Cut out meat from your diet, or at least reduce it. This is probably the biggest one. Take a look.
- Cycle instead of driving a car.
- Go for a smaller living space. Some are even considering The Tiny House Movement.
The list can go on forever, but I advise you to go through a more serious list on the WWF website. (hint: it requires contacting political decision-makers to make larger green decisions.)
The next question is:
What can I do as a designer to prevent, or at least slow down climate change?
There are at least 4 things we can start with.
1. The internet
“While we might not be able to stop using the web, we can change how we build and power it, to make it planet friendly as well as user-friendly.” –Planet Friendly Web Guide
The web is the largest machine ever built in the history of mankind with 4.5 Billion users. The scary part is that it’s less than 50 years old. It’s complex, with many moving components. Simply put, however, more data requires more energy. In fact, in 2019, it will emit around 1 billion tons of CO2, that is more than the entire aviation industry.
The internet does pollute, nevertheless, the whole industry as a whole is conscious and is willing to move into a more positive direction. Yet again, start locally, see if you or your client are using green hosting and have optimised your website to be eco-friendly on EcoGrader.
Usually, cloud solutions are more sustainable than traditional data centres. Keep in mind, not all clouds are vaped-out equal. Google, for example, committed to being 100 per cent renewable-powered. Amazon, on the other hand, has only started to take its first steps in the right direction. Click-Green can give you a good insight into your favourite brands and their greenness.
Since we covered most facts and theories about internet pollution, let’s take initiative by taking a deeper dive into Planet Friendly Web. A great open source knowledge library, equipping you with the knowledge you need to make conscious and informed future decisions.
2. Start small, Start in the office.
Digital design is surprisingly taxing on the environment. Sharpies, post-its, laptops, phones, Ipads, pens and lots of coffee. Luckily, we can offset many of those quite easily. I found this simple spreadsheet to calculate your CO2 emissions.
The largest savings can be made on travel, which unfortunately isn’t as easy as cutting back on paper. Clients still need to be met, and users have to be interviewed. Fortunately, most progressive companies are open to remote work. Tools are developing at a rapid pace that makes collaborative design, research and interviewing remotely almost seamless. At Gofore, we use tools such as InVision, Axure and Abstract to allow for remote and asynchronously reviews and version control.
Finally, I have been conducting experiments holding large workshops using tools such as Mural and Mira. They are not flawless, but great, considering that they are in their infancy stages. You are a UX designer with an analytical mind, so you look at the numbers and see that every action you save on doesn’t actually make a difference. Let’s have a look at a global scale. According to LinkedIn, there are about one million UX designers worldwide, that is excluding service, UI, visual and graphic designer. With ease we can save about 3 million tons of CO2, that is more than closing entire coal-fired power-station. Designers are smart and creative, and our power should definitely not be underestimated. Every small action counts. Saving on paper, less travel and black coffee instead of a latte makes a big difference.
3. Greenify your products
Let’s pay attention to where our products meet the users. We as designers are partly responsible for that. The great news is that most of the users are concerned about the environment and are willing to make a positive change. Although, their motivation gets trumped by daily life, old habits and convenience. What we can do as designers is give means and motivation to pull(not push) their actions into positives ones towards the environments. We can ask some questions to determine if we are on the right track:
- Is this helping or harming the environment? (a simple question that might require extensive research)
- What are we making?
- If what we are making has no sustainable alternative, how can we create the greenest experience with what we have?
Sometimes, solutions are easy and straightforward. When things are physical such as shipping and delivery, we can promote greener delivery options. Holiday booking apps/sites can offer means to offset the users’ carbon footprint etc. Most of what we design on the other hand is intangible and that makes it sustainable design thinking harder. Luckily with a designer’s brain, nothing is impossible
Asking users to go green is tricky. By asking users to go green, you are most likely asking them to sacrifice time, convenience or money. Design With Intent gives a good set of persuasion methods, I don’t agree with all of them as some contain dark patterns. If deemed effective however in actually saving our planet, I would explore “green patterns”. For example, choosing the more environmentally option by default for the user.
4. Size does matter, the smaller the better.
We are seeing banners growing larger, hero images taking the entire screens, video for visual appeal with no other function and more. This is harmful in some ways, starting from the digital divide. We are designing products to be used worldwide. Part of our design duty is to care about the user experience (people) worldwide, users in Bangalore with 0.5mb/s internet speed should have the same experience as the people in Helsinki. As from the planet’s point of view, more data means more fossil fuels. Websites are only increasing in size. From 500kb in 2011 to 4000kb in 2019. The majority of this lies with us, the designers. Modern sites and applications use web fonts, multiple JS libraries, high-resolution images, and videos, maybe adding a better visual experience, but definitely a more data-intensive and thus harmful experience for the planet.
Let’s not rely on internet speeds getting higher and work on making our products more lightweight. Also, research has shown that a faster user experience correlates with better conversions and higher user satisfaction. Take a look at the winners of the 10k Apart competition. They have achieved interactive and excellent designs whilst using 1/300th of the data of an average page.
Great tools for optimising your designs are, PageSpeed, Kraken.io and Performance Budget.
- Raise awareness through design, educate and guide your users on making the right choices.
- Data over everything. Deconstruct data to find what the right solution is, i.e. beware of greenwashing!
- Shift to green hosting and you could save thousands of KGs in CO2. (Again, beware of Greenwashing)
- Starting with ourselves, as people first, and as designers second.
- Optimising design and code across all mediums.
We are experiencing a revolution in design, it’s being discussed in relation to the world’s largest topics such as diversity and inclusion, digital divide and politics. Sustainability should become an inseparable part of that conversation. This blog merely scratches the surface, and I would be grateful to hear your other ideas on how we can sustain this planet for our children.
In digital times, people sometimes forget that the analog world still provides more organic results. Even though devices like the Ipad Pro + Procreate /w Apple Pencil and Wacom Cintiqs are getting closer and closer to analog results – analog still rules. It’s interesting to follow digital attempts on watercolour, oil painting, paint splatter and smudging. They are close to analog but still not quite the same.
Analog vs. digital
When deciding on a workflow that is suitable for you, there are some key points to consider:
* = can be converted to digital rather easily nowadays, like for example with Adobe Capture or Scan + Adobe Illustrator Live Trace
** = Git or a WYSIWYG choice of your selection (note: if you have no idea what is version control, now it’s the best time learn it! https://en.wikipedia.org/wiki/Version_control)
*** = pen, paper, ink, brush, paint, markers, scissors, sponge, water, hands, dripping, tossing, smudging, printmaking, painting, cut-and-paste, ..etc.
**** = Eraser, white opaque colour, redoing, reworking, …etc.
Time equals money – so speed is essential.
The speed of creation is hard to compare. It really depends on the tools you are familiar with (and learn easily).
Consider creating an organic background both in digital and analog. The time spent on analog will always need additional time for digitization. Let’s take a closer look at this interesting topic.
Options for digitizing
Scanner + Trace in Adobe Illustrator (Desktop) – The Oldie
The internet is full of articles about this, read this for example https://www.lifewire.com/use-image-trace-in-adobe-illustrator-cc-2017-4125254
Basically, you scan your image and then trace it to vector (or use it as a raster version). Depending on the scanned original + your live trace skills you might end up with great results.
In the end, you will have a vector version. Some images are virtually impossible to vectorize. Line drawings are easy, for example, comics.
Adobe Capture (Mobile App) – Easy Vectorized Results
Okay, this is what I love. I literally do.
Adobe Capture is not a well-known app. It’s a free app by Adobe that allows you to digitize assets to Adobe Creative Cloud and then use them instantly on synced devices – WHOAAAH!
Adobe Capture has the following sections:
- Materials – Easy creation of 3D materials etc, based on image/photo
- Type – Recognise a typeface based on an image/photo
- Shapes – Scan any raster shape into a vector from an image/photo – Wait, REALLY?!!!!
- Colours – Take an image of anything and create a colour scheme – Huh!?
- Patterns – Create a pattern from an image/photo, similar to a kaleidoscope
- Brushes – Custom brushes from an image/photo
Instead of writing an extensive tutorial on the app, check this video by Adobe:
For a free app, it truly delivers something extraordinary. I use this app weekly with comic creation and similar tasks. Just take a photo in the analog world and use it instantly on digital as a vector – this is as good as it gets.
Examples & Conclusions
There ain’t exactly one do-it-all workflow for creating visual designs and drawings. A true master needs to understand the context and the end result. Each end-media has its own limitations that need to be taken into account when planning a workflow.
Example 1: Praise IRL Label – digital + analog
When I was working on the Gofore Praise IRL label, I ended up mixing raster and vector graphics. (Gofore Praise IRL is one of our own Gofore beers)
I have done print designs in the past, so I knew that I could make a raster graphics background by tossing paints in the analog world on a paper and scan the result. I just needed to be sure that the scanned end-result would have enough resolution (at least 300 DPI for the printed label). I post-processed the background in Photoshop and then placed it to an Adobe InDesign document, which was all vector on the other hand. TLDR: In the end result you cannot notice that the background image is not vector as well. It just looks all good, if you have enough DPI.
Example 2: Craig Thompson’s workflow for comics
Craig Thompson is a famous do-it-all comic artist, who has released awesome graphic novels such as Habibi and autobiographical love-story called Blankets. A direct excerpt from his blog says:
[ I ] settled on a compromise common among comics pros – I pencil the pages digitally [ using a Cintiq ], then print out blue lines and ink on actual paper.
The advantage of digital penciling is I can see a chapter all at once (top right photo), cut&paste, zoom in close, edit on the fly, and work standing up (top left photo, avec Momo). But digital inking still looks too slick to me — I prefer the flawed & tangible qualities of fussy sable brushes on paper. Foot in both worlds!
This kind of unique combination comes from the perfect understanding of his own medium and workflow.
To achieve the best results, you will need to:
- Understand your medium and it’s nuances
- Understand the optimal workflow for you (time spent, skillset,…)
- Understand the differences in vector/raster outputs
- Understand your audience (what kind of looks do they like)
- Benchmark other artists
In the first part of the blog series, we described the challenge of combining service design and secure design with agile methods. In this blog post, we will describe a process model for tackling this issue. This model combines the envisioning phase with the agile development phase and ensures that secure design and service design are deployed with the development.
Start with the problem, not with the solution!
At Gofore, we use the service design approach to understand the service or products core purpose. An example of a core purpose can be, for example, Instagram stating that their product is meant to “Capture and Share the World’s Moments”.
The objective of service design is to design a holistic, user-friendly service experience by answering the needs of customers and the competencies and capabilities of service providers. By using design thinking methods and tools it defines the optimal customer experience for the service to be designed. Service design aims to make the service creating actions visible to all parties involved and find empathy and understanding of the users of the service.
The objective of secure design is to ensure that the security and privacy aspects of the service or product delivered, and the associated user experience, have been investigated together with the business and stakeholders from the inception of the project. The challenge is how to ensure secure design, like service design, gets built in?
Utilising a design-thinking mindset, we conceive the core purpose with a “Double Diamond” method. This diamond model of creativity combines divergent thinking and convergent thinking phases to discover as many ideas as possible, and then distil them down to the best solution. Using the Double Diamond, this process is repeated, once to confirm the problem setting (to find out “Why” we’re doing something), and once to ideate the solution (to find out “What” we’re doing). The user environment, user tasks and associated user behaviours are explored, elucidated, visualised and synced with the service provider’s business and strategic goals. This is done using various service design processes and tools, for example by applying participatory user- and stakeholder-oriented design methods from the very inception of the project.
Service design yields the design drivers for the service to be implemented. At the same time, the security- and privacy-relevance of these design drivers should be scrutinised; for example, what is contained within the user data? Does the service ingest personal data? What data regulation must be complied with? What are the business and user assets requiring protection, and how? Thus, service design and secure design should be done simultaneously.
Continuing with service design envisioning, the user epics are ideated, and corresponding requirements are extrapolated. Concurrently, the security and privacy aspects of epics should be identified and documented. When the corresponding service features are concepted and their stories are derived, the corresponding security and privacy user stories should be derived and linked. For example, if the concept is a web application, then the web application’s feature stories should be linked to the associated security and privacy stories where relevant.
Why should you envision first?
By finding the core purpose of the service to be designed, the envisioning phase delivers not only the customer value being aimed for but also the guidance for prioritising the backlog and validating the design (metrics and test cases). It also acts as a valuable resource for defining the service roadmap and business strategy by answering the question: what user features are most important to implement first?
As mentioned earlier, service design and secure design are mutually beneficial and complementary activities. Requirements arising out of service design are likely to have associated secure design and privacy requirements that can be further deduced by assessing the threats and risks to the design. By ensuring that both service and secure design perspectives are purposefully envisioned, a more user-centric and a more robust foundation will be ideated and architectured into the implementation phase of the project. This mitigates the risk of service design and secure design deficiencies that cause further expense, wasted effort and rework arising during the production phase. Notably, this complementary design characteristic also fosters the sharing of design, security and privacy awareness across these historically siloed disciplines.
From envisioning to production
When the backlog of service concept epics, feature stories and linked corresponding security and privacy stories are considered primed for agile implementation, then the initial sprint grooming and planning can commence.
How to ensure continuous design in agile processes?
To ensure a complementary user-centred and security- and privacy-oriented approach throughout the development phase we require both the secure design and service design advocates to participate throughout the implementation. We also require team members and a product owner who understand the benefits of building service design and secure design into the implementation. This is crucial because there is a natural tendency for developers to focus on visible deliverable features; after all, that’s what the customers and business stakeholders want to see; visible signs of progress.
For these reasons, a continuous service and secure design concepting flow should run alongside the actual sprint process ensuring their aligned iteration according to the agile iteration model whereby you plan, develop, evaluate and iterate the design continuously based on user studies and usability testing.
Figure 2. Development
As depicted in Figure 2, the service design and secure design activities continue throughout the development phase to keep the process agile and iterative. The deliverables from the concepting and prototyping work are continuously designed just one or two sprints ahead of implementation. The implemented design is then, in turn, evaluated by usability testing and acceptance testing according to the metrics established in the envisioning phase. If according to the testing, there is a need to change the design, it goes back to the drawing board as design iterations. This ensures a continuous evolution of the service design and secure design epics and features while keeping the service’s core purpose linked to the iterative development and evaluation of the service.
In this way the objective and purpose of the service being developed are nurtured along; prioritising the backlog is easier when the guiding requirements for it have been properly established and are maintained alongside the daily implementation work. Also, by using this model, the concepts delivered using service design and secure design can be re-evaluated at any time. For example, if while doing usability testing, we discover that users’ needs have changed from what the initial envisioning phase suggested, service design will scrutinise and update the core purpose and help steer development into a more user-oriented service experience. Or if some feature or component changes, secure design will scrutinise potential security and privacy impacts and protect accordingly.
Recap: to be truly agile, plan (a bit) first!
Figure 3. Holistic envisioning and development of service design and secure design
At Gofore we encourage our customers to ask for a pre-planning or study/envisioning phase before the actual agile production of the service starts. This delivers preliminary requirements for the service experience, its security and privacy considerations, and guidelines for metrics and evaluation. Envisioning also simplifies the estimation of the scale and scope of the project to be done. With our Envision/Develop process model, we can tackle the service design and secure design requirements while maintaining an agile process wherein the design concept can be iterated at any point during its production.
Service Design Network: What is Service Design?
Design Council UK: The Design Process: What is the Double Diamond? https://www.designcouncil.org.uk/news-opinion/design-process-what-double-diamond
Minna Puisto: People don´t want service design, they want their problems solved!
Craig Bachman: The Agile Experience Strategist
Valerie Carr: LEAN and Service Design | Understanding the differences.
Gofore blog, Niall O’Donoghue: Secure design is a mindset and way of working
Gofore blog, Jyrki Anttila:Hands-onn UX-Design in Lean Projects with Limited Resources
Gofore blog: Combining Service Design and Secure Design in Agile Software Projects: Part,1 the Challenge
Imagine building a house in the following fashion: you start building the house from one room, for example from the bedroom. You start erecting the room walls, decide its dimensions, interior design, and furnishing. Perhaps while building the bedroom you consider other rooms as well; you have preliminary ideas for the kitchen, the lounge, the bathroom, and so on. What’s missing?
What is missing is the fundamental architecture and functionality of the overall house; what type of residence is it intended to be? A loft, a cottage, a mansion, something else? What type of foundation needs to support it? What materials should constitute its roof and exterior walls? Who are the intended residents?
The challenge with agile methods regarding service design and secure design
Building a software product or service using the agile philosophy encourages implementing features quickly, with an expectation and pressure to deliver visible progress to stakeholders. Often, agile projects tend to sprint from the start – and keep sprinting – without enough attention as to what should be the appropriate starting point for the whole project. Jumping straight into the agile process is like building a house without its fundamental blueprint.
In many agile process models, the user-centric approach and service design philosophy are not written explicitly in the model. This omits the whole process of defining the service’s purpose in a user-centric way, or it is too vaguely described to be of actual use for the day-to-day production work. On the other hand, the lean start-up methodology isn’t well suited to large-scale organisations or complex service ecosystems.
Likewise, in many agile process models, secure design is not written explicitly in the model. Secure design involves design considerations for ensuring that the security and privacy aspects of the delivered service or product, and the associated user experience, have been taken into consideration from the beginning. A secure design aims to be self-protective and trustworthy.
Still, with even the leanest service creation, some kind of discretion and direction is required to elucidate the preliminary problem statement for the design. We like to call this phase envisioning. The bigger the picture, the more upfront study and understanding is required of users’ needs and their context of use.
If the envisioning phase is not done properly (and keeping the users in mind), the result may be a service creation process that is very agile and productive in letter but not in spirit; a process that actually fails to deliver any real value to the organization or its customers and users, and with security and privacy design deficiencies. If guidelines for prioritising the backlog are unclear, rapid arbitrary changes of focus and, changes to which feature preferences to implement may occur. Managing the service roadmap becomes unwieldy. The aimed for customer value may be hazy or not based on actual user needs with the consequence that the metrics for evaluating the service may deliver less accurate results. User stories may not be based on actual user needs at all, but instead, reflect the organizational perceptions of users and their needs.
This omission or gap from envisioning to production, from the project’s outset, triggers the risk of service design and secure design debt due to envisioning being de-prioritised, delayed, or skipped. As the saying goes; the earlier debts are repaid, the better. Better still, don’t allow debt to build up. It pays to use some time to plan and to avoid this risk before the agile process kicks off!
In the second part of this blog series, we will describe how this envisioning phase is done and its deliverables deployed to the agile development process.
Jari Hietaniemi: The Best Ways to Screw Up An Agile Project: