Angel’s Care — a UX Case Study of the online platform that assists parents in overcoming their loss of a child

Design Lab is a yearly educational series of lectures that takes place in Lviv’s Design Office. During the autumn period students, in addition to their lectures, work on volunteer projects together with dedicated mentors to study in practice the methods and practices widely used in providing design solutions. My colleague and I were mentoring one of those groups, and here is a brief walk through our design process and deliverables.

Project overview

Angels Care is an online platform that assists parents in overcoming their loss of a child. The main focus of the project is grieving parents, and it looks at different ways of solving the emotional challenge of having to live through such a tragedy. We discovered some new ways of helping them alongside the ones that were used already. We applied a design thinking process to solve this issue and to bring empathy to the next level within the team.

Team composition

Dmytro Orlyk — Senior UX designer

Khrystyna Novak — UX designer (a pretty good one ;)

Viktoriia Shamrai — Design Lab student

Sophia Sharak — Design Lab student

Volodymyr Malyk — Design Lab student

The Process

First of all, we had to understand certain things: who were our users and what their needs were, how the product would position itself on the market with other companies and solutions, on which stage the project was currently. To find this out, we’ve conducted the following steps:

Stakeholder interview

The stakeholder’s of Angel Guardians are Natalia Senitsa and Taras Bondarenko. When this couple was dealing with the grief of having lost a child, they encountered a problem — there are no information services in Ukraine that could assist parents who were experiencing such a loss. So, Natalia and Taras decided to do something innovative for our country, in the truest sense of the word. During the interview, we recorded their answers and described the process that we would follow as a team to achieve our goals in terms of both design and business.

User interview

The biggest challenge in the project was interviewing, which we conducted because we needed to understand parents who recently lost a child. Through these interviews, we found that the primary issues users had were contact with doctors and finding relevant information online.

We conducted 8 user interviews (6 with parents and 2 with doctors) to understand key pain points and issues that we would proceed to address.

Valuable information we received included:

• 6 respondents sought every opportunity to get support in the situation;
• 6 users visited a psychologist and had difficulty finding good specialists;
• 8 respondents, through their experience, became convinced that loss is a taboo topic in our society, which meant that most people avoided talking about it.
• Medical personnel is interested in providing psychological support to grieving parents, but in reality, no one really does this.

Competitor analysis

We carried out an analysis of foreign competitors, since there are no similar services in Ukraine.

Key insights:

• only 3 websites out of 11 provide online support;
• also, 3 out of 11 provide professional psychological counseling services;
• only 1 website out of 11 has a platform with online courses.

Surveys

We placed a questionnaire in a Facebook group. Based on 30 answers, we received the following data:

• 27 of users used a smartphone frequently during the day;
• 26 parents fell the need to share their story;
• 23 respondents asked for psychological support;
• 20 users preferred to seek help anonymously.

Summarizing the findings from our research, we prioritized the hypotheses for translating them into functional requirements.

Here are the main insights:

• users need to be able to fill out forms to get support conveniently;
• parents must be able to register online with a psychotherapist to receive the support of a qualified specialist;
• the story-sharing feature should be accessible to users to engage them in communication and increase their trust in the website;
• parents should be able to choose a convenient way of anonymous communication: online chat and hotline to get a quick response, especially in emergencies;
• online psychological training should be accessible to all users, so that not only doctors can learn to help, but anyone. For example, friends or relatives of parents who have lost a child.

Ideation

To interpret the information we have received, we moved to the next step. Here we tried to come up with certain artifacts that we would hopefully allow us to get a deeper understanding of our user’s needs and look for ideas to help them out to achieve them.

Personas

After conducting our survey and user interviews, we identified two personas:

Anna (main persona). She lost her baby 2 years ago. Anna had a negative experience communicating with doctors and is well aware that there are other parents currently experiencing the same situation, so she wants to help them not feel alone.

Her wishes are to:

• get support;
• find community members with whom she can share her story;
• have access to information on any topic regarding the loss.

Serhii. He has been working as a neonatologist for 15 years. However, despite his experience in medicine, he does not know how to support his parents in such difficult situations, so he often tries to avoid talking about them.

His wishes are to:

• get quick and convenient access to new knowledge to provide psychological support to parents;
• Have the opportunity to study at any convenient time through a non-standard work schedule.

User journey mapping

We chose this type of map because it’s mostly focused on the experience of the main person. It was important to see her pain points, and the path she follows from the moment of interaction with the product to the desired result.

• In our case, it was quite difficult to identify positive changes because at all stages Anna continued to feel pain. The main outcome was the interaction with the product, enabling us to improve user experience.

Problem Framing and Ideation workshops

We chose these types of brainstorming to dive deep into Anna’s situation. As a result of the first brainstorming session, we received about 8 major user needs. And with the help of Walt Disney workshop, we generated hypotheses and ran through crazy eights to generate quick sketches and ideas on solving problems. After this activity, we came up with solutions that would meet the needs of the user. So, we already had a base for our future wire-frames.

Kano Model

Before creating an information architecture, we prioritized all the hypotheses obtained during the interview and brainstorming stages.

The main hypotheses that set us apart from our competitors and satisfy the most important user needs are:

• availability of anonymous online chat;
• the opportunity for users to organize an event;
• the opportunity to read other parents’ stories and to share one’s own story;
• the opportunity to register for free sessions with a psychotherapist.

User flows

User flows helped us to understand if all the processes in the product had a logical conclusion. Our flows were non-linear — they had decision points, paths, modes and loops, with which we illustrated all possible interactions with the product.

We created 5 user flows:

• completing a form for getting support;
• booking a visit to a psychologist;
• downloading online brochures;
• completing a form for becoming a volunteer;
• getting help in the fastest and most convenient way (questionnaire results indicated that most users want to seek help anonymously. Therefore, testing this flow showed that to get help, people were chatting rather than calling a hotline).

Information architecture and site-map

To create an information architecture, we needed to understand the components of our product. To do this, we focused on the key information blocks that we had gained in the previous stages and proceeded to delve deeper into them.

Given the context, content, users, and specifics of our project, we defined a flat hierarchy. This type of hierarchy is quite common and is used daily by users. Pages are easily accessible because the site map has up to three page levels.

Prototyping

We had to interpret the results quickly and move accordingly to test our judgments and hypotheses, so to do that, we decided to make quick prototypes to test navigation and to minimize risks in making late changes on the initial UI part. So, we ran a test phase two times during our project.

Wire-framing

After creating a site map showing the pages of our future product (desktop and mobile), we covered each of them with a wire-frame. With this approach, our team was able to better understand and see the users flow, the functionality, structure and content of the pages. After that we made a prototype and showed the result to the customers.

Navigation testing

In general, this was successful according to our usability testing results. It was easy and understandable for users to navigate the site in both desktop and mobile versions. Users were able to use it properly to achieve their goals.

Mobile navigation:

• all respondent understood how to reach all pages/open a menu;
• at first, bottom navigation was unusual for 2/5 respondents.

Desktop navigation:

• the menu item «For parents» wasn’t so clear. Users couldn’t predict what kind of information was there;
• all users could easily navigate through the sections.

Design implementation

We started by working on the UI-kit to speed up our process, as a gui tool for layouts we chose Figma since we had a team of 5 people and we needed to collaborate clearly and quickly in the Agile manner. We imported the complete flows and prototypes we’ve used to import to the Framer app and then we published the initial build on Netlify to run a few tests with our users.

UI kit

Collection of all the elements that built the site UI allowed us to quickly and efficiently create each subsequent page using components previously precisely crafted by the team. It included all the usual: buttons, icons, checkboxes, radio buttons, menu, status bars, forms, lists, cards — all the content of the site, including what the photos would look like.

Branding

We chose purple and pink as the primary colors of the site. After doing a little research, we concluded that these are the colors that people generally associate with pregnancy, infants and emotional support. According to our research, purple has a calming, inhibiting effect on the human body. And pink relieves longing and inspires hope for the best. It’s especially well put to use after various disappointments or stresses.

Testing

On top of our deliverables, we were running out of time and we still had to test our decisions to prove their validity. So, we decided to run automated tests on top of the usual user-testing sessions. We were lucky to have our users who accommodated our need to spend additional time with them, but we had to save some time for making the latest and final changes as a team, and we had to come up with some fresh ideas on how to do that.

Framer testing cases

We chose an automated design process with Framer and Netlify, taking our main user-flows and importing the layouts into Framer to get the most out of the prototyping features but mainly to add the Hotjar integration and track our results with users and their initial usage.

The initial results showed-up quick and helped us to update the structure of information and layouts accordingly: later on they helped us keep track of the success rate in user actions and the completion criteria of their tasks. From this were convinced we’d made the right decisions in our previous steps, proven with 15 sessions, which saved us a great deal of time and brought rapid results.

What we changed after testings:

• automated testing: the registration form for a psychologist (we did provide information about the location of the psychologist);
• usability testing: a starry-sky concept on the homepage (lighting stars in honor of death was a very poor choice. During testing, we understood that stars can be a great gamification of donations).

Afterword

It was a great honor and privilege to lead one of the most dedicated teams at the Design Lab at EPAM Lviv’s Design office. As a team, we followed Agile practices to identify risks and to keep our project on schedule and meet our deadlines. Daily stand-ups, retrospectives, demos and planning meetings helped us become stronger as a team and to grow together. We experienced some hard times and setbacks but these led merely served to make us even more determined to complete the project successfully.

The dedication and hard work of the students from my team meant they were invited among the first to join the core team of designers at the EPAM Lviv office.

We gained the trust of our stakeholders, which resulted in grateful words from them after each demo. Design decisions and artifacts were delivered on time, within scope and with top quality.

At this time, we continue to communicate with the stakeholders and are waiting for the development team to together implement this project.

I’m proud to say that this team delivered and implemented design decisions that met the high standards of the EPAM Design Office in Lviv. We believe this product will be of a great help for many families who find themselves dealing with the loss of a child.

Big thanks to the co-author and contributor, Viktoriia Shamrai.