page > connect creative competence ux design in practice ...ux design in practice at aperto...

UX design in practice at Aperto

Together with their parentcompany IBM, the digital agency Aperto has developed the Elderly Care App. With its help, relatives and carers of those in need of care can keep an eye on their well-being. Read about the making-of!

PAGE > Connect Creative Competence

Post-it-Life

Interface designer Santiago Uribe, UX designers Leticia Bialoskorski and Nico Neumann working on the conception.

Demographic change, longer life-expectancy, increased chronic illness: in most of developed countries people are getting older — and they want to remain in their own homes for as long as possible. But this means ever greater challenges for relatives and carers. How can one be sure that, in an emergency, Granny can get help even when she’s alone at home? How can I identify typical indicators of dementia if I’m rarely there? The answer lies in technology: reliable and affordable sensor technology paired with precise data analysis that collates and interprets vital information quickly, enabling one to react immediately. At IT and consulting company IBM, one works on the very technology that helps seniors, patients, and people with disabilities — as well as their carers — in their daily life. For examp-le, the analysis software IBM Watson allows the collection and analysis of data that is drawn from various sen-

sors, indicatin movement in the apart-ment, fire, smoke, flooding, the degree of light or even open windows. IBM subsidiary Aperto took on the task of using this data to develop a meaningful and user-friendly service specifically for carers and relatives of those in need of care. Since 2016, the Berlin digital agency and its around 400 em-ployees have been part of IBM iX, the global agency family of the technology company. Working on the Elderly Care project was an interdisciplinary team comprising a business owner, project owner, user experience and user inter-face designer, developers as well as a QA and DevOps manager.

Determining user needs: research and workshopLeticia Bialoskorski is a user experien-ce designer at Aperto and has been in-volved in the Elderly Care project from day one. “To start with, we familiarised ourselves ->

Connect Creative Competence > Service Design

Irma (76) sitzt zu Hause auf

Ihrer Couch. Nachdem ihr

Mann gestorben ist, lebt sie

alleine zu Hause.

Mit einer App erkennt Irmas

Tochter, Andrea, dass Irma

schon bedenklich lange auf

dem Sofa sitzt.

StoryboardEin Storyboard visualisiert ein Szenario.

Andrea macht sich Sorgen

um ihre Mutter, weil sie

nicht ans Telefon geht.

Andrea fragt sich:

„Geht es Mama gut?“

Mit der App kann sie schnell

ihren Sohn informieren, damit

jemand nach ihr sieht.

Andreas Sohn, Thomas, fährt

schnell bei Irma vorbei.

Thomas ist beruhigt -

seine Oma ist nur vor dem

Fernseher eingenickt und hat

das Telefon nicht gehört.

Damit sich seine Mutter

keine Sorgen mehr machen

muss, setzt Thomas den

Status auf „Alles okay“.

Teamwork

Together, interface designer Santiago Uribe and UX designer Leticia Bialoskorski collaborate on the look and feel of the Elderly-Care-App - among other methods using storyboards (see below).

Irma (76) is sitting on her couch at home. After her husband died, she lives alone at home.

With an app, Irma‘s daughter, Andrea, recognizes that Irma is sitting on the sofa for a really long time.

Andrea is worried about her mother, because she does not answer the phone.

Andrea wonders if her mother is doing well.

With the app, she can quickly inform her son so that someone can look after her.

Thomas, Andreas son drives quickly to Irma.

Thomas is satisfied- his grandma has fallen asleep infront of the TV and did not hear the phone.

Thomas puts the status on „everything ok“, so his mother does not have to worry any more.


-> with the sensor technology and conducted benchmark research,” she explains. Programs for care services that use sensor data to deliver infor-mation about the activity of those nee-ding care already existed. But IBM and Aperto’s goal was to create an appli-cation for the relatives and caregivers. “The challenge lay in trying to convey a sense of security and reassurance instead of surveillance. The sensor technology focuses on the resident without giving a Big Brother impressi-on,” she adds. Within the agency, Bialoskorski be-longs to an expert team for lean service creation, that develops digi-tal solutions in a lean process. That entails not only focussing on the user but also close collaboration with the client. In order to identify the needs and desires of all stakeholders, the in-itial Aperto team — which, apart from Bialoskorski, included a designer and a business owner — organised a two-day, design thinking workshop with the project partner, IBM, and potential users. Here they resolved general questions such as: What does the ser-vice need to provide? What does the user journey look like and what prob-lems may arise from it? At that point the brief was still very open and was based primarily on the idea to create a service for caregivers to the elderly, that utilised sensor data. In the course of the workshop, the idea of a smart-phone app for the relatives and care givers took shape — amongst other

things, because of the ability to send push notifications in an emergency and make communication between users quick and uncomplicated. In defining potential users, the work-shop participants identified two dis-tinct personas — essentially fictional characters with concrete characte-ristics and behaviours: Andrea is the typical daughter figure, who lives too far away from her elderly mother to be able to help her with doctors’ appoint-ments etc. Her son, Thomas, lives much closer and occasionally drops in on his grandmother. Both of them are sometimes uncertain of the senior’s condition. “These two personas amply cover the target group that emerged from discussions with carers and re-latives of those in need of care,” says Bialoskorski. For these potential users, the work-shop participants developed likely hypothetical scenarios as storyboards, that they then broke down into indivi-dual user stories. ->

“The visual design played an important role in this pro-ject right from the beginning, because it concerns such an emotional subject. It isn’t just about information but also very much how it is presen-ted.”

Santiago Uribe, interface designer at Aperto

Step by step

With first scribbles (above) the team started the conception. UX designer Leticia Bialosorski developed the first wireframes in the design tool Sketch (below).


-> “These essentially serve as feature descriptions for the application, formu-lated to describe the user needs. On that basis, I create the first scribbles to make the possible interface of the app more clear,” explains Bialoskorski. During the workshop, the team also formulated so-called ‘hills’: goals that they aim to achieve with the first relea-se of the app.

Experimenting: Prototyping and testing

After the workshop, the Aperto team prioritised the required functions of the app: What are the core functions? Which are less important and can wait? What does the process within the app look like? The first prototype could then begin. Using the design tool Sketch, UX designer Leticia Bialos-korski completed the first sketches or wireframes, and linked them to one another using prototyping tool InVi-sion. Parallel to this, user interface designer Julia Lingertat designed the surfaces and interactions. The resul-tant click-dummy already illustrated the user flow and gave a sense of the look and feel of the app. “The visual design played an important role in this

worked with the crowd-testing compa-ny Applause. From their database of over 100,000 people in Germany, they select candidates according to Aperto’s pre-defined target group and send them a link to the click-dummy as well as a list of questions compiled by Aperto: Do you understand the app? Do you like the design? Etc. “It is incredibly important to test and gain user feedback as soon as possible because we started working, wi-thout too much research, on the basis of personas and hypotheses. It is only th-rough user feedback that we can estab-lish whether we’re on the right path with the prototype,” explains Bialoskorski. The first prototype of Elderly Care was tested by 25 trial subjects — with positi-ve results. The adopted direction trans-pired as the right one, making a second prototyping round unnecessary. ->

project right from the beginning, because it concerns such an emotional subject. It isn’t just about information but also very much how it is presen-ted,” explains Santiago Uribe, the cur-rent interface designer for the project. A red, flashing alarm button might evoke panic and in an emergency one would rather have a cool head.InVision allows prototypes to be tested on mobile devices. They then feel like an app, even before the functions have actually been developed. The desig-ners link the screens through an easy If/Then link, so that they can test the processes with both the client and the potential users. The latter doesn’t need an InVision account for this but can access the prototype easily on their mobile device by entering a pass-word. For the user testing, Aperto

The final look

The app uses traffic light colours to signal the current status of the person in need of care. The display is underlined with a light animation, which makes the view interesting and emotionally charged.


designers would have to dimension everything down to the last pixel, and define colour codes and fonts for the developers,” explains Nico Neumann, DevOps and Quality Assurance (QA) engineer at Aperto. “Today, developers can just click on an icon, and download all the relevant information and code snippets. This is why InVision is such a good tool for interdisciplinary coopera-tion, something that is very important to us.”

Defining core functions: warning and reassuringThe prototype that Aperto started in the development phase, incorporated

The perfect flow

If A, then B: Overview flowcharts show the usage history within the Elderly-Care app. The first time the user has to register, the user can access the Dashboard from the start screen and access other areas of the application from there.

-> “Some users even shared personal stories and praised the idea and pur-pose of the app,” reports Bialoskorski happily. Results from the first crowd tests showed that the term the “Assis-ted“ was more fitting than the “Affec-ted“, that the design was well received and that the topic of data security played a huge role. With the help of the InVision prototype, Aperto was also able to collect feedback from the IBM team, who could comment directly wit-hin the app. An additional advantage of the tool: all uploaded designs could be accessed by the developers as assets (icons, text boxes, buttons and so on), downloaded and used. “Previously

the most important basic functions — including the registration process. Due to the very personal nature of the information, this entailed a two-step authentication. But an automatically generated and encrypted activation code made the process very easy and user-friendly. On the main screen, the user can view the current status. The app uses the colours green, orange and red to indicate whether everything is in order or if there are inconsisten-cies. The status indicator is highlighted by a subtle animation that makes the display more interesting and emotio-nal. “Ideally one should only see green on the app screen, which means that everything is fine and one doesn’t have to do anything further,” says Bialos-korski. If, however, there are inconsis-tencies (orange) — such as water that has been running for too long, com-bined with an absence of movement — then the user can view the compre-hensive sensor data and decide them-selves whether or not it necessitates a reaction. Whether that means quickly calling Granny or, if in doubt, the Mal-teser emergency services. A red alarm directly alerts the Malteser emergency services, and only they can deactivate it again once they have checked in on the subject. For an exchange between users there is also the comment fun-ction. So, for example, Thomas could inform his mother that, in response to a warning, he drove over to Granny to check on her and see that everything was in order. “Users exchange purely context-dependent information here, important details or emergencies are discussed on other channels. But the comment function within the app was very important to users,” explains Bia-

loskorski. After defining this corefun-ctionality, the team started on the app development.

All systems are go: Agile develop-ment and toolsFor the technical implementation, Aperto worked together with a de-velopment team from IBM, that con-currently built the backend from which the app receives sensor data. The project team discussed the individu-al features (user stories) from the workshop with IBM, and defined the conditions that need to be fulfilled in order to satisfy a story. Then the “poker” began: all employees received cards with numbers 1 to 13, with which they can rate the complexity of a story. Is authentication a seven — or just a three? If a story receives the maximum number of points, it will be divided up over several smaller stories. For the app development, Aperto orientated themselves according to scrum, the agile project management method, adapting it to create their own lean service creation method.

“The challenge lay in trying to convey a sense of security and reassurance instead of surveillance. The sensor tech-nology focuses on the resident without giving a Big Brother impression.”

Leticia Bialoskorski,UX designer at Aperto

Startscreenregister

log in

Registration 1verification- reference number

- activation code

Registration 2Create an account- name- e-mail adress

- password

Registration 3Confirmation e tan:- change e-mailadress

change e-mailadress

e tan sent again

Logine-mailadresspassword

change e-mailadress

Forgot passworde-mailadress

Password sent to e-mail-adress: ok

Dashboardstatus & reasoncallemergency

Status detailsDetails about the status

overview

Commentschange status

History

calendaroverview

Contacts

family members &service provider

Settingsmanage info supervisornotifications account informationsign out

Support Imprint

Day Contact details

relates to all of us. We also commu-nicate more and are inspired by one another,” Bialoskorski says of the agile work process. The Aperto team documented the project process with the collaboration software Confluen-ce, a type of Wikipedia for knowledge exchange, both internally and with the clients. This is where employees store all of their work on each story with both text and images. As well as Bialoskorski’s wireframes, complete with captions, one could also find all the results of the function crowd tests that Nico Neumann, responsible for quality assurance, had commissioned from crowd-testing service Applause after each sprint. If new requirements or bug fixes transpired from these tests, they would immediately be integrated as new stories into the JIRA plan — after which the team would prioritise them accordingly. All in all, the development required only four sprints and spanned eight weeks. The minimum viable product (MVP), and thereby the first marketable version of the app, was then complete.

Implementation: First projects and feedbackIn the course of the first client project, since March 2017, various sensors have been installed in over 50 apart-ments in Berlin and other metropolitan areas, while the Malteser emergency services and residents’ relatives were equipped with the Elderly Care app. The team is curious to know how it’s received. “What testers say about an app in the beginning is one thing. What the users actually do with it or how they rate it is another,” Bialoskorski knows. ->


“The challenge lay in trying to convey a sense of security and reassurance instead of surveillance. The sensor tech-nology focuses on the resident without giving a Big Brother impression.”

Leticia Bialoskorski,UX designer at Aperto

In order to display their processes clearly, the Elderly Care team used workflow management tool JIRA, into which they entered individual tasks and established which they wanted to complete within the typical scrum intervals of two weeks, or so-called sprints. The team then split the indivi-dual tasks according to the discipline: UX design, interface design, develop-ment, quality assurance etc. At the be-ginning of every story, UX, UI and often developers will collaborate to scribble the first ideas on paper.Every morning started with a stand-up meeting that IBM was dialled into, in order to discuss the agenda for that day. These daily meetings ensure transparency in the working process and a seamless procedure. If there is an issue with a particular story, one can quickly identify the source of the problem and collectively work to solve it. The scrum master oversees the process and ensures that stories are worked through from top to bottom. “With traditional, non-agile working processes, everyone is just preoccu-pied with their own tasks. But we plan as a team, and the scope assessment

The tools

Above: This is the surface of the design program Sketch, in which Leticia Bialoskorski designed the wireframes. Bottom: The Elderly Care team used JIRA for workflow management. In the tool they kept the individual tasks and the periods in which they were to be processed.

-> Aperto and IBM conceptualised the app as a white label solution that IBM could offer to insurance companies in partnership with the Malteser emer-gency service. Thanks to the modular structure, the app can be easily indi-vidualised to accommodate their own requirements or corporate branding. Both those in need of care and their relatives receive the system from their insurance — including sensors, IBM technology, carer service and the app.According to Leticia Bialoskorski, Aperto will be involved in more projects like this one in the future: user-orientated services that incorpo-rate technologies and products de-veloped by IBM. In this way, UX desi-gners at Aperto have the opportunity to work with innovative technologies before the competition do.


Lean service creation

Aperto’s working process marries design thinking and agile development, while al-ways keeping the user at the core. In the design thinking process, teams research user needs, conduct market analyses and define a concrete problem that they aim to solve. They then collect ideas, create user journeys and develop the first lo-fi prototypes for testing. Based on the test outcomes, they either con-tinue to work on the prototype or start from scratch.

The Aperto team then develops the prototype further in an agile process, conducting new user tests in every pha-se to check that they’re on the right path. This yields several iterative cycles, until one is left with a marketable product or service system. The market introduction often serves as an additional test: How is the product received? Does it need to be developed further?

This extremely lean process enables quick reactions to client and user needs, and allows the client to become closely involved. Rather than a mere service provider, the agency consults on an equal level.

Written by Nina Kirst (PAGE)This article was originally published in German at: http://page-online.de/branche-karriere/ux-de-sign-in-der-praxis-bei-aperto/

MeasuringCrowd-testing

Learn

Build

CreateIdeas, User Journeys

MakeLo-Fi prototype

DefinePersonas,

Empathy Map

From customer problem . . .

Lo-Fi-Prototyp Hi-Fi-Prototyp Proof of Concept Minimum Viable Product

. . .to customer solution.

DiscoverUser Research,

Business Analysis

Persevere orpivot?


Learn

Build

Learn

Build



Design Thinking Agile Delivery & Lean UX

page > connect creative competence ux design in practice ...ux design in practice at aperto...

Documents