Template Design

Template Design

I think the phrase I’ve heard, and said the most these last years are: “Be consistent!”.
And I think this is an important rule in any type of design, but most importantly in Interface Design.

Consistency is especially important because we as users already have a mental model and an expectation on where things should be placed, and how they should function. When there is a mismatch between the users mental model and the system/designs functionality we add to the users cognitive load and the user will not have a very good experience.

Templates are a great tool to ensure that we stay consistent at all times and across all platforms. They also make the life of a designer at bit easier, and speeds up the design process. Template design often uses the atomic design method to build the structure – atoms -> molecules -> organism -> template. You can read more about Atomic Design here.

 

So what are templates?

Templates are layouts of webpages or applications consisting of the complete page that designers can reuse. Templates includes brand elements like logos, images, buttons etc and the placement of these are already decided by the designer responsible for the design.

One example of using template design is a email newsletter. By using an existing email design template, the designer only has to worry about adding the content the business wants to share with the customers. Another example of template design is e-commerce and product pages. When you have hundreds or thousands of products you want displayed to potential customers, it doesn’t make sense to make a layout for each one – not to mention how time consuming that would be. Instead it makes sense to have one or two templates and only make small adjustments as needed. The last example I would like to mention is dashboards, which is another excellent example of template design. In a dashboard most information is presented in graphical form, and having to design all those elements can be very time consuming. So having a dashboard template, wouldn’t only save time, but also make us more effective and help us stay consistent.

 

Example of template

As an example on how to use or make tempates I’ve included a quick module assignment I did a little while ago.

The assignment was to design an email and form template for WWF – Wildlife conservation. There were two requirements in this assignment:

1 – They need an emailer to go out to supporters to encourage them to donate.

2 – They need a fresh online form design to capture the information about the donation.

Before starting I visited the WWF website to get a feel for their identity and how they present themselves online. I wanted to incorporate as much as I could of their graphic profile and tone of voice.

I then started the process by making low-fidelity wireframes of both templates.

Email template

The email/newsletter should entice the users to click the call to action and go and donate on the WWF website. I tried to include the WWF branding with the logo and colors. I kept the call to action above the form, and to guide the eye towards the donate-button. I also wanted the text and images to evoke an emotional response, stay true to the cause and get donations. The template is pretty standard and by just changing the content it can be used again and again.

Donate page

I kept the same style and tone of voice to keep the connection between the email and the donation page. The main goal with the page was to make it easy to use, informative and effective in collecting donations – while also being visually appealing and evoking emotions. The donation blocks should be prominent, and the form should only include the necessary form – and payment fields. There is no need to gather more information, and long forms will only make it harder and more tedious to fill out. I’m hoping that donations would increase by making it as easy and appealing as possible

WWF newsletter template
Donation page template

Making and using templates can make a huge difference. It saves you both time and money, they ease your workload and are just plain easy to use. They also makes it easier for new designers that start a new job and they reduce errors. But most importantly it keeps your designs consistent.

Data Visualization

Data Visualization

Before we can think about how to visualise data, we need to understand what data is. 

Data can be statistics, facts and bits of information we gather that provides us with insights and knowledge. Data can also be qualitative or quantitative and are pieces of information that aren’t always numerical. 

Data visualizations can include data, data points, data metrics and show KPIs.

So, what’s the difference between data, data points, data metrics and KPIs?

Data – any collection of observations/facts can become data.

Data Point – is a single fact. It is a set of one or more measurements that gives values without any meaningful context. For example: Sale = $ 100 

Data Metric – A metric is a numerical measurement of something, and it’s a quantitative measurement of data. It’s the result of contextual measurement and summarization of data points. Examples of data metrics are: net profit (profit after expenses), number of customers per month, number of visitors to a website. 

KPIs (Key Performance Indicators) – A KPI is tied to a goal. It’s the goal the company wants to achieve and a value showing its ability to achieve its goals and objectives. You can have many metrics, but they are noe all equally important. The important metrics are KPIs.

And what is Data Visualization?

Presenting data visually has a long history, and the two biggest steps in showing information are maps (cartography) and science. Data visualization is the visual presentation of data using specific visual elements, it shows the data graphically and visually. 

Most of us are visual learners, and we remember a higher percentage of what we see than what we read. We deal with large data systems daily and so much information that we need a simple way of making sense of, and comprehending, large amounts of data. By visualizing the data we can turn it into a format that is easier to explore and consume.

With the help of visual charts, graphs and infographics, data and insights are shown in simple ways that we can easily understand. Just reading numbers, statistics and percentages in spreadsheets makes it hard to understand the data and see connections and results. 

Dashboard

Types of data visualization

Data Visualization often use different types of charts and graphs, and they all show data but in different ways. It’s important to choose the right kind of graph or chart relevant to the data you want to show. Data visualization can include visual elements like charts, maps, graphs, tables and infographics.

 

Data Storytelling

Why not go further and include storytelling? Presenting data visually will certainly tell you what is happening, but it doesn’t tell you why. Creating a narrative around sets of data with visualizations will establish a story for the audience viewing the data. It creates the context needed to explain why something has happened and gives your data a voice – your data have a story to tell after all.

What to consider when visualizing data

Research and preparation is everything when it comes to visualizing data:

– Know what you want to communicate
Before creating the visualization, think about what it’s for. What is the purpose and goal of the visualization?

– Communicate the truth and be clear
Visualization should be based on good data so make sure that the data is accurate. People should be able to trust that your visualizations convey only reliable information. The graphs, text and layout should also be clear and easy to understand.

– Show just the right amount of data
The visualization should show the right amount of relevant data. Try not to either oversimplify or make it too complicated. 

– Know your audience
It’s important to know the user, and find the right type of visualization for your target audience. What challenges does you target audience face and which questions will they try to answer with data visualizations. What decisions will they make based on this data and why?

Choose graphs and charts that show statistics relevant to what your audience needs to know. All data visualizations should align with the user’s expertise and knowledge, and use simple and easy to understand language.

Conclusion

Data visualization is an effective graphical way of showing data or telling a story, and we have the tools to create visualizations with little effort. But we should keep in mind that every design choice we make should enhance our user’s experience – not our own.

Sources:

Noroff
Adobe – XD Ideas
Nugit

My take on Design Thinking

My take on Design Thinking

Design Thinking is a non-linear and iterative process that is often used to come up with innovative products or solutions that solve real problems for real people. The most common version of Design Thinking have 5 steps, and is both an ideology and a process.

When I was first introduced to this methodology I honestly struggled a bit to understand how this would help my design process. I thought it looked very complicated and overwhelming. But now I find that I use design thinking, in one form or another, every day and on every project.

The 5 steps in Design Thinking

The process is very user-centric and focuses on solving problems by focusing on the consumer/human first, and above all else.

But before you can tackle the steps, you need to understand the problem. What needs solving and why? 

1. Empathize

After you have an understandig of the problem that needs solving, the next step is empathy. In this stage the designer seeks to gain an empathic understanding of the people they design for. What are their wants, needs and objectives? In this process we set aside our own assumptions and gather real insights about the user. 

In this stage we form our research questions and do a lot of research to gather qualitative and quantitative data. Qualitative to get in-depth information about people’s motivations, opinions and beliefs, and quantitative to generate numerical data and transform it into usable statistics.

Research methods can be surveys, interviews and literature reviews for example, to gather information, analyse and form insights. One of my favorite ways to analyse a lot of information is using the atomic research approach and affinity mapping. Once you’ve formed your insights and made sense of your research, you enter the next step: 

 

2. Define

This stage is about defining the problem and go from challenges to opportunities. You start to make sense of the insights and information you’ve gathered during the empathise stage. What is the users problem that you need to solve? What difficulties and barriers do they have?

In this phase you can create “How might we”-questions from the insights gathered and turn challenges into design opportunities. HMW-questions can help you come up with creative solutions to solve the problem. By the end of the Define-phase you should have a clear problem statement (and vision statement).

The process I like to use to form a problem statement is to use the 4 W’s: what, who, where and why – then I make a POV template, and the end result is my problem- and vision statement. When you have this information it is much easier to create a persona and scenarios.

When you have your problem statement, persona(s) and their context- and key scenarios, it’s time to enter the third phase.

 

3. Ideate

When you have a clear understanding of your users and the problem, it’s time to start working on potential solutions. This is where the creativity happens. In the ideate stage designers will be ideating solutions to the problem by conducting ideation workshops and sessions to come up with as many ideas as possible. Ideation techniques can be brainstorming, mindmapping, laddering or bodystorming for example.

I like to base my ideation sessions on the HMW-questions from the Define-phase, to frame and open up the design challenge. This process helps us think outside the box and think of many solutions, instead of getting fixated on the first idea or solution. Usually ideation sessions generates multiple ideas, and one can narrow this down by doing a dot-vote and then use the NUF-method to find the top idea(s). At the end of this stage you’ll have a few ideas to move forward with.

 

4. Prototype

In this phase it’s all about turning ideas into to tangible products by making a prototype. A prototype is usually a low-fidelity version of the product. Through this phase the solution will be put to the test to find any constraints or flaws. In the prototype stage the solution may be accepted, improved or rejected depending on how the solution works in prototype form.

At the prototype stage I usually do the requirements for the solution/product first. The requirements process explains what the product is and what it should do. The next step is the information architecture and user- and task flows before I start with the actual wireframes. When developing the wireframes I ususally consider the three levels of design (Don Norman), to make sure the product connects with the user’s needs and goals. The tree levels are the visceral-, behaviour- and reflective level. I then usually sketch ideas before moving into low-fidelity wireframes. 

 

5. Test

The last step in the Desing Thinking process is testing, but it is rarely the end. Usually the results from this step will take you back into some of the previous steps to redefine the problem statement or the testing will give you a whole new idea for the solution. This step also means that you usually iterate more on the wireframes and move them from low-fidelity, to mid- and then high-fidelity wireframes. Testing should be done as early as possible to uncover issues before too much time is spent on the wrong idea or feature.

Often the purpose of testing is to identify usability problems and to see if the solution/product meets the user’s needs, wants, goals and mental models. This is done to see which areas needs to change and imporve before implementation.

Not a linear process

 

Design Thinking is not a linear process, even though it might seem that way. It’s a flexible and iterative process and you will move back and forth through the steps several times with each new discovery.

 

The 6th step

While Design Thinking have 5 main steps, implement is often added as the 6th step in this process. Implementation is crucial as this is where the vision is put into effect. The goal, at this stage, is to materialise the final design and get it out to the users. As meaningful as Design Thinking can be for us designers, it only makes a true impact and leads to innovation if our vision is executed.

Whether you’re working alone or in a team, Design Thinking helps you focus on the user, to innovate and design products that solve real problems for real users.

Design Systems – What are they?

Design Systems – What are they?

A design system is a systematic library of how the visual aspects of a product is implemented. And it contains a collection of reusable components, code snippets and other assets. It also explains and guides the designer in how and when to use them.

A design system is a set of deliverables that will constantly grow and evolve with the product. Using a design system helps us maintain consistency and design faster. In the end we want to create the best experience possible for our customers, and design systems helps us achieve this.

It’s easy to confuse style guide and pattern library with design systems. But style guides and pattern libraries are actually a part of the design system. Think of the design system as the big umbrealla that covers everything.

 

A design system is:
  • The source of truth that eliminates confusion and conflict
  • Makes sure we are consistent on all platforms
  • Lighter, faster loading products
  • Faster design process
  • Quicker development and testing
  • Reduction in design debt when scaling up

 

So what do we include in a design system?

Imagine every part of an interface visually, and ask yourself: What makes up the product? What does it consist of?

A brand is most often based on certain principles, and they can be described as the look and feel of their product. Their design, or interface, often represents these principles but aren’t really visible. Instead they are expressed visually. These principles are often included in a design system.

 

Other things common design systems include sections on:
  • Guiding principles
  • Imagery and media (logo, photo, illustrations, icons, diagrams, sounds, video, animations etc)
  • Color
  • Navigation
  • Spacing
  • Copy
  • Typography
  • Accessibility

Typically how big or small, complex or simple, a design system is, depends on the product.

 

8 design systems to look to for inspiration:

 

Google Material Design

Material is a design system created by Google to help teams build high-quality digital experiences for Android, iOS , Flutter, and the web.

Apple Human Interface Guidelines

Get in-depth information and UI resources for designing great apps that integrate seamlessly with Apple platforms.

Shopify Polaris Design System

Our design system helps us work together to build a great experience for all of Shopify´s merchants.

Microsoft Fluent Design System

Fluent is an open-source, cross-platform design system that gives designers and developers the frameworks they need to create engaging product experiences – accessibility, internationalization, and performance included.

Carbon Design System

Carbon is IBM’s open source design system for products and digital experiences. With the IBM Design Language as its foundation, the system consists of working code, design tools and resources, human interface guidelines, and a vibrant community of contributors.

Mailchimp’s Design System

Mailchimp help millions of customers around the world grow in their own way. We want to show our customers that building successful business means staying true to yourself. With this brand identity and design system, we hope to inspire them to be bold and creative with their own brands.

Salesforce Lightning Design System

Salesforce Lightning Design System is flexible, scalable, efficient, accessible and living. Its purpose is to improve marketing, commerce, IT, service and sales efforts and allows their users to do the same.

Atlassian Design System

Design, develop, deliver – Use Atlassian’s end-to-end design language to create simple, intuitive and beautiful experiences.

SkySmart – A booking app

SkySmart – A booking app

Many of us use apps to book flights, and if we don’t use them for the booking itself we often use them to keep track of our tickets and to get relevant updates and offers. In this assignment the goal was to design a mobile app for iPhone that also works on a smartwatch (watchOS). In other words, two apps for the same fictive company, SkySmart.

The main objective was to create an app that worked seamlessly and in tandem og both devices. This was done by following the design thinking process, and considering the content first.

 

How should the SkySmart-app work?

The mobile app:

  •  Search and find suitable flights
  •  Choose the flight
  • Enter personal details for the flight (name, passport, number, email)
  •  Choose seat on the plane
  •  Pay for flight (enter credit card/payment details)

The smartwatch app:

  • View the flight departure date and time
  • Check the flight number
  • View the flight departure and destination cities
  • See the flight duration
  • Monitor the flight status (on time, delayed, cancelled)
  • Access boarding pass

Even though this was not a case study, I sort of followed the Design thinking process, but the product did not go into high-fidelity wireframes or testing.

Getting started

I had already conducted research on smartwatches previously, and while this research was done with a fitness app in mind – it is not a big leap to apply this research to other areas where the need is similar.

From this research some of the favorite features was mentioned to be:
– Availability and getting notifications without disturbing others.
– Keeping track of goals and activities.

One of my questions about the user (research question) was:
– How and where would the user use the mobile/watch app – in which context?

I based my persona and scenarios on that previous research and what I think is the users goals, needs and frustrations. Research was also a continuous process during this task (literature review, competitor analysis).

 

Sketches and Low-Fidelity Wireframes

Before starting on sketches and wireframes I looked at other travel apps to see how they had solved certain, issues and to see what the best practices seemed to be.

The main purpose of the mobile app is to allow the user to search for flights, book them and allow for basic travel admin.

The main purpose of the Watch-app is to allow the user to see the most important information about their travel at a glance, to keep track of all their flight details and receive important notifications.

User Flow

The starting point for my customer journey for the SkySmart app is based on a signed-in user opening the app, and starting from the homescreen.

SkySmart User Flow

Low-fidelity Wireframes

The SkySmart app is thought to function on iPhone and WatchOS.

The pages and patterns follow a pretty standard set of rules and guides to provide and easy and fast way to search for flights. It also gives the user a way to manage and find previous and current bookings fast and easy on the go.

Skysmart Low Fidelity app

WatchOS low-fidelity wireframe

The thought when designing this app was that it should give the user information in a easy and fast way. It should tell the user what they want to know at a glance. So it should be fast and easy. Since the screen is so small, there is no easy way to give a lot of information – that is what the phone app is for.

(I know this more of a mid/high-fidelity wireframe, but I got a bit carried away)

SkySmart WatchOS
SkySmart WatchOS

Mid-fidelity Wireframes

Before starting on my mid-fidelity wireframes I went back over my research and also continued my search of other apps to find the most common patterns and how others have solved the usability issues with booking on small screens.

For the mobile app I went for a blue-ish color as the main color in reference to the company name – SkySmart – in addition to Apples recommended system colors for text and background.

For the SmartWatch I used Apple complications and the colorscheme from the Human Interface Guidelines. When going in to High-fidelity one can add SkySmart blue to the app as an accent color. Since this one went straight to mid-fidelity instead of low, I iterated on my design and made some changes and corrections.

Skysmart app medium fidelity wireframe
SkySmart WatchOS medium

More iteration is needed as the SkySmart apps move from mid-fidelity to high-fidelity. And of course the apps should be tested by real users to make sure they function as intended and solve the users needs.