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…”
workshop

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:

  1. Assemble a multi-faceted team with experts in user research, UI design and data science
  2. 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.
  3. 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
  4. 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.
  5. 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.

Hanna-Riikka Sundberg

Hanna-Riikka Sundberg

Hanna-Riikka works as a Senior Business Designer at Gofore. She is responsible for creating new business models and services by bringing the needs of customers and users into strategic decision-making. This she has done for OP, Telia, MTV, Tikkurila, Raisioagro, Wärtsilä, and Andritz, among others. Hanna-Riikka holds a PhD in Industrial Management (with distinction). She is also an Executive MBA (EMBA) trainer at Edutech in the Customer and user experience in business development program. She is the author of the Business Design booklet.

Avatar

Miika Mikkola

Miika works as a Senior Designer with more than ten years of experience in creating better customer experiences. He has a passion for a holistic understanding of human-computer interaction and digital services that enhance the quality of everyday life. Miika is also an enthusiastic sports fan, especially keeping a close eye on his hometown team Ilves

Do you know a perfect match? Sharing is caring

Previously I wrote about why we need to use semantic HTML. Now, most of the internet services we are developing are no longer just webpages, but dynamically structured Web Apps*. Still, those apps use HTML and CSS for user interfaces in the browser. Below I have outlined my heavily opinionated conventions on this matter at this particular moment in time.
* As I see it, we should think about the term “Web App” as constantly evolving ideas and technologies for services running in a browser.
It might not be a good way to design a component – and overall the collection of your components – based on the semantic HTML structure. You should be more focused on designing the component API* and hide the complexity of each solution behind an abstraction. If you feel that you spend more time designing the specifications for component usage than creating simple implementations in the component itself, you could be on the right track. Overall spending time in the configuration of your project and component-libraries (after the initial POC**), is very healthy if it saves you time and complexity when creating and maintaining the main source code itself.
Defining Component APIs in React, Brent Jackson
** Spikes, POCs, Prototypes and the MVP, Leigh Garland
I admit that it is also a bit harmful to the developer ecosystems to hide basic HTML semantic and basic accessibility implementations behind abstractions. But would you rather your app has a solid foundation for the client or has more mistakes that end up in production for everyone to learn from?
This leads me to ponder, can someone be a fullstack developer without an understanding of basic HTML semantics? There are people titled as fullstack developers maintaining frontend code without much knowledge of the DOM API* or modern JavaScript**. To make sure your UI component (and library of components or the complete app) is going to be accessible, your implementations should take responsibility, not the interface. When your component’s interface is really good, you can fix and change the implementation without modifications to the interface. So actually your component’s first version doesn’t need to be the most accessible version. You can pass it on for validation and testing – even for usage at development stages. And during the upcoming iterations, you have the chance to implement more detailed accessibility.
Document Object Model (DOM), MDN Web Docs
** Functional programming in JavaScript, Fun Fun Function, Mattias Petter Johansson

What you see is not what you get

At the current moment you cannot rely on libraries and frameworks to handle your app’s accessibility. There are a few accessibility-centered user interface libraries, but their implementations are also based on opinions. The basic HTML5 semantics are standard and have good support with browsers, but with screen readers (or other less common tools) you might feel like you’re developing websites to support IE6 all over again.
Use coding frameworks mainly for their designed abstractions – not so much to generate imperative source for UI. Return components with fragments, arrays or other variables (based on the API of the library you are using) when no semantic structure is needed – and non-semantic HTML structure only when needed for visual layout and styling.

Testing with tools

Only about 30-40% of accessibility issues are found by automated testing. Still using tools for accessibility testing is a good way to prevent some of the errors and educate developers what and why to improve. Some great tools I can recommend are Axe (Jest-axe and React-axe), Lighthouse and Accessibility Insights. Also you can learn manual testing by using a screen reader like VoiceOver (macOS, iOS) or NVDA (Windows). Some accessibility testing can also be done with design tools using a plugin like Stark (Adobe XD, Figma, Sketch).

Taking steps forward – To fix this:semantics

  • Use HTML5 DOCTYPE declaration.
  • The primary language of content must be identified accurately on the html-element.
  • If your page title contains unique information about the current view, it should come first. The title should be consistent with the main content. The title must be updated when the url-path changes.
  • If you have a lot of content in the page before the main-content, add a ‘Skip to main content’-link that can be hidden when not focused with the keyboard (https://axesslab.com/skip-links/).
  • Replace divs with HTML5 semantic tags. All elements’ ID’s should be unique – use CSS classes for styling.
  • All text should be contained within a landmark region (header, nav, main, footer, aside etc.). Use minimum instances of landmarks.
  • Use list elements for lists.
  • If you use link-tags for your navigation – not buttons – screen readers can get to your navigation by browsing all links on the page. (This is an exception to the rule that buttons should be used when a user action changes view within the app)
  • Use heading levels correctly, do not skip levels (for example from h1 to h3). Each view should have only one h1. Screen readers are also using headings to navigate through the page.
  • Use CSS for visual styling.

semantics 2

And to fix this using aria-attributes*:

ARIA is not a replacement for semantic HTML
semantics 2a

  • If you disable focus outline provide an alternative working solution, do not completely disable :focus styles.
  • Use CSS-classes for visual styling.
  • Use label with for-attribute with the correct id-attribute in the input-element. Id’s should be unique within the rendered HTML page.
  • Use aria-hidden for visually displaying information that is already defined by aria.
  • Use buttons for user actions, not clickable divs. Buttons can have proper type-attribute.
  • Use Aria-required and HTML5 required -attributes. Most current web browsers automatically set the aria-required value to true when the HTML5 required attribute is present.
  • Submit button is disabled when required inputs are empty or invalid. Change disabled to false when corrected.
  • Submit button has aria-label (SVG-icon for visual presentation) and assertive text describing why it is disabled.
  • Visually placed error-texts are hidden from a screen reader. If you don’t need to support IE-era browsers you can also more safely use an aria-label instead.

semantics 3

Joonas Kallunki

Joonas Kallunki

Joonas is a visually minded front-end developer constantly pursuing for new ways to reach contentment in application experience. He is interested about interactions between technology and humanity overall. His developer life is adjusted with a lots of music, exercising within nature and precious family moments. "The CSS dude can handle this".

Linkedin profileTwitter profile

Do you know a perfect match? Sharing is caring

The role of organisations has been under heavy discussion over the last years. Recently more and more organisations tend to choose a new approach regarding their management control; self-management. This blog post looks at how one local Finnish service company has developed its way of finding a balance between employees’ autonomy and accountability.
Hello networked organisation
Organisations are designed to be stable and predictable environments. They have been very good at processing information, optimising processes and producing outputs. But over time, things change: customers want different services, new competitors and business models arrive, and the organisation might scale rapidly. This greater overall complexity forces organisations to fundamentally rethink their whole organisation model.
In the networked organisation model, the organisation operates as a network of small, self-directed pods that are connected by a common purpose and supported by a platform. A platform is a structure that increases the effectiveness of a community. The networked organisation cannot fit on a traditional organisation chart and is optimised by information speed and people pods.
The networked organisation enables a whole a level of flexibility and adaptiveness, that would never be possible in a divisional organisation. It can respond dynamically to change and can learn and adapt to the environment continuously. This will help the organisation to faster identify and capitalise on opportunities.
Networked organisations are also very resilient. It distributes the workload across a wider area by allowing each pod to focus on goals rather than on steps or stages. If one connection breaks, pods can still continue to work.
Networked organisation in action
Gofore plc. has around 600 employees and provides consultancy services in the fields of software development, design, management consulting and cloud. Gofore wanted to keep its organisation as simple as possible even though the growth has been rapid. The next chapters explain briefly how the networked organisation model functions at Gofore.
Gofore’s business model is consulting, so the company is eager to find new customers and deals. In this typical example, a sales person discovers an interesting invitation for tender. He contacts another sales person to discuss the details. After discussion they decide to create a bid.

The invitation to tender requires proof of concept and a team of three developers. Sales person A discusses with the sales person B and uses Gofore’s internal services to find a suitable UX-designer and a software developer for the project. Sales person B leaves the pod.

The UX-designer and software developer A start designing proof of concept. Software developer A invites two more developers B and C who would be right for the project. Sales person A also invites a legal advisor to help prepare the bid.

Software developers A, B and C fill needed resumes and help the UX-designer to finish proof of concept. The legal advisor advises software developer B on details of her resume. Sales person A and the legal advisor finalise the bid. Sales person A sends the bid to the client. Finally, the pod disappears, and people return to other pods.

A notable thing in this example is that people might not have met before. There were also no managers or a standard process of how to proceed. The pod shares the common goal to “finish the bid”. In other words, the whole pod is accountable for doing all the needed actions in order to reach the goal.
Most of the communication happens in one Slack channel and the pod might be active for only a couple of weeks. The pod goal can be everything from a small marketing event to a large strategic acquisition and it can contain employees, partners and customers. Size and activeness of the pod also varies over time. Sometimes the pod has one facilitator and sometimes multiple members are the driving forces. Occasionally, a pod fails to reach its target. Then people from the pod sometimes gather to reflect on what went wrong.
Theoretically, people can jump into different pods and take different roles at any time. On the practical level, people have varying expertise and responsibilities that restrict mobility. People who have more sales or recruitment responsibilities for example tend be more active than a single customer project focusing expert. There are also more static structures at Gofore, such as the executive management team and human resources function. Despite this, most “goforeans” are members of multiple pods simultaneously.
Side effects
Every model has side effects and the networked system is no exception. Gofore has numerous pods active every day. This might cause a situation where two pods are working on the same topic without knowing the others’ plans. Thus, a pod might be operating on an activity that has previously been done, or is already planned to be done. In my experience, this sub-optimisation risk hasn’t been a major challenge at Gofore so far.
If an employee belongs to too many pods at the same time, context switching might generate overhead and frustration. The other challenge is that people become bottlenecks – people struggle to say no for new pods and activities, even when their schedules are fully booked. For these reasons, employees need to know how a self-organising organisation works. Gofore has created internal “People Person” and “Coach” services that support employees in their self-management and personal development skills.
Some people might also miss long-term teamwork and traditional supervisors, where decision making is slower and more predictable. Gofore’s customer projects are typically long lasting which helps to create a more stable environment. Some pods such as “Guilds” and “Capabilities“ are also more durable by their nature at Gofore.
Control your own fate
This blog post offers a glimpse into Gofore’s operational level. It is important to understand that when the organisation is adaptive and learning, structures and culture also evolves continuously. Hopefully organisations understand this paradigm change and let go of the legacy of Taylorism.

References
The Connected Company by Dave Gray
https://hbr.org/2015/06/what-makes-an-organization-networked
https://blogs.oracle.com/content/who-is-dave-gray-and-what-is-a-connected-company
http://blog.idonethis.com/cells-pods-squads-structure/
Graphic Design
Miia Ylinen

Avatar

Juhana Huotarinen

Juhana Huotarinen is a lead consultant of software development at Gofore. Juhana’s background is in software engineering and lately, he has taken part in some of the biggest digitalisation endeavours in Finland. His blogs focus on current topics, involving agile transformation, software megatrends, and work culture. Juhana follows the ‘every business is a software business’ motto.

Do you know a perfect match? Sharing is caring

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.

Crunching numbers…

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.

Hanna-Riikka Sundberg

Hanna-Riikka Sundberg

Hanna-Riikka works as a Senior Business Designer at Gofore. She is responsible for creating new business models and services by bringing the needs of customers and users into strategic decision-making. This she has done for OP, Telia, MTV, Tikkurila, Raisioagro, Wärtsilä, and Andritz, among others. Hanna-Riikka holds a PhD in Industrial Management (with distinction). She is also an Executive MBA (EMBA) trainer at Edutech in the Customer and user experience in business development program. She is the author of the Business Design booklet.

Do you know a perfect match? Sharing is caring

This blog post is part of our Recoding Society blog series started by Mikko’s blog ‘Creating a positive impact’ and continued by Kaija’s blog ‘Creating empowering solutions‘. The series highlights the impact our work is having on Society. We are helping organizations and citizens to overcome several challenges and in this series, our experts share their thoughts featuring real projects one theme at a time.
Work and employment are a significant part of our lives. Employment related events affect everybody. All of us have been looking for a new job or unemployed at some point in time. So, we have strong feelings about the employment related services different public sector organizations offer. At Gofore, we have had the opportunity to be involved in creating several new solutions for future employment services in different areas of employment and business development. All of these solutions start from the needs of the customer using the services.

A new era of employment and business services

Previously Sipilä’s government in Finland started a program for renewing current employment services. These services are being developed by creating new digital services whose main goal is to match job-seekers and jobs better, faster and easier than before. The short-term objective of the TE-Digi program is to provide seamless customer guidance with the prevention of continued unemployment and provide clear online services, which will support the self-motivation of the job-seekers. The renewed approach and information systems will reduce bureaucracy and streamline processes. The new digital services will play a big role.

The key element of the new solution is being customer-centric. The development team has run a lot of studies and done plenty of service design to get a proper understanding of the needs of customers and public authorities. These studies and findings are the base of the design for new services. It is time to lift employment services into the 21st century. The program will take advantage of modern technologies and use for example AI solutions to create better matching for employees and open positions. The TE-Digi program started in 2016 and it continues at least, to the end of the year 2020.
As we are using agile methodologies, for example, SAFe, TE-Digi builds gradually. Parts of it are already in production and a new release is targeted for September 2019. While the new Rinne government in Finland still has a strong will to improve the employment rate [FI] and to focus on services [FI], for example, for incapacitated or elderly persons or for immigrants, the TE-Digi program is still more than valid.

Designing services for protection in the event of restructuring

In the case of employment termination and lay-offs, the enterprise has certain obligations it needs to follow. In these situations, employment services offer dedicated services both for the enterprise and for the employee. We have been re-designing the services to make the service offering even better in co-operation with Häme Centre for Economic Development, Transport and the Environment [FI]. Through this service design, there have been some concrete improvements to the services. For the enterprise, the services are now listed in a service plan that is easier to follow. There have also been some concrete ideas about how to improve communication with the affected employees. For the employees, the focus has been on encouraging job seeking before the actual layoff and improves guidance in this situation. One big advantage of this project has been creating networks for the different parties working on this area like for example, employment services, employment funds, collective industrial organization.

Enterprise development

The Finnish Government has several ways of supporting the development of enterprises. Enterprise development grants, enterprise development services and start-up grants are used to add new business, to encourage existing companies to develop their business and to make use of new business opportunities. Finland needs varied, future-forward business and an encouraging operating environment for companies. Public financing is used to lower the barrier to entrepreneurship and to encourage companies in goal-oriented development of their operations.  At Gofore, we have been involved in creating new digital services for these grants together with the Ministry of Economic affairs and Employment.

Jaana Majakangas

Jaana Majakangas

Jaana is Gofore's technical project manager. She has twenty years of experience in a variety of roles within the IT industry including extensive knowledge of the public sector and how digitalisation can benefit society.

Linkedin profile

Do you know a perfect match? Sharing is caring