Case study: Red Emancipatic

Networking. Designing a new functionality that connects members with volunteers in order to facilitate the integration of the elderly in an increasingly digitalized world.

Esther Calaco
Bootcamp
12 min readOct 11, 2022

--

For a shorter version, check the Behance post here

Horizontal image with an smartphone on the left that shows the name of the project, Red emancipatic, a sentence that says “Do you know that internet can make things easier?” written in spanish and a picture of two woman, one young and one old. On the right side the logo of the project, and the description, it says: Bootcamp’s Final Team project. Real customer “Emancipatic”. Rol: UX/UI Product Designer. Duration: Two Weeks.
Mockup by muhazdinata on Freepik

This post has been written hand in hand with my classmate Berta Otero. If you want to read the Spanish version click here

Getting old while enjoying every moment of life is what older people expect when they reach certain age. However, there are many problems derived from the use of technology. Digitalization and connectivity must be at the service of people and not be a reason for not being able to function on a day-to-day basis. This is where “digital literacy” comes in.

Red Emancipatic is the result of a two-weeks multidisciplinary project, in which we addressed the problem from a real client, while the five disciplines of the school had to work alongside: UX/UI, Marketing, Full Stack, Cybersecurity and Data Science.

The goal was to create a digital service, not an app but used through a smartphone, to manage a collaborative community between members and volunteers, offering help to the elderly in order to solve the problems coming from an increasingly digitalized world; while promoting donations to sustain both the organization and the implementation of this new service.

We designed a product that helped the elderly find a simple and intuitive way to solve their doubts, to learn new things, to look into technology accompanied by volunteers and, as soon as they gather enough knowledge, they will become teachers, too. Security, self-management and empowerment are the most important gains.

Who is Emancipatic? It’s our client, a non-profit organization (NPO). Where their members dream of a more inclusive society in which older people are an active part; Their efforts grant technology access for people older than 50 yo, the gateway to the society as it is now.

A digital generated image that depicts the problem and the solution of the project that we talk about during the article about the big gap for older people when using internet and the need of creating a communication networks to overcome it

PLANNING

Fourteen people, five disciplines, (almost) two weeks, a real project and Design Thinking as our secret weapon to make everything go smoothly.

For those two weeks, as product designers we had to coordinate everyone effort to come up with a minimum viable product for the client.

We spent the first days working hand in hand with Marketing and Data Science for the discovery, strategy, ideation and conceptualization stages, to be able to turn everything into a prototype, with its own design system, and deliver it to Full Stack and Cybersecurity.

A timeline of the project schedule during the two weeks period. The stages that appear are: discovery, definition, ideation, conceptualization, UI design and the final presentation

DISCOVERY

(Note: all this work and research are limited to Spanish territory)

To read the bibliography go to the end of the post (in Spanish)

As soon as we studied the briefing that the client gave us and after the kick off, we had to identify the context, needs and motivations of the users, to summarize: empathise with them. Then, we started the investigation.

DESK RESEARCH

Given the short time we had the goal was to focus our research on three essential aspects related to the problem, that is: the context and condition of the elderly (according to the client’s requests, they would be over 50 years old), how they interact with technologies and the specific design needs we will need to address for those kind of users.

Context and condition

The aging of the population in Spain is increasing, as in the rest of the world, it varies between 11% and 31% depending on the region (INE). At the same time, life expectancy, datum from 2018, is 83.2 years for both sexes (CSIC).

This situation may be one of the reason for the huge number of old people living alone, as in 2020 there were 2,131,400 people in this situation.

Physical loneliness is a concerning problem, but easy to recognize and point out, however, there is another kind of loneliness that goes unnoticed, for it is considered to be a taboo, but as problematic and it affects 39.8% of people older than 65 years: the emotional loneliness.

💡 It is loneliness, specifically emotional loneliness, what made us realize the urgent need of creating networks and community.

The interaction of old people with technology

The elderly, unlike our prejudices, despite being non-digital or technological native generations are already part of the digital world. The gap is getting smaller: 73.3% of people between 65 to 74 years old already use the Internet and 96.6% of them have used a smartphone in the last three months (CSIC).

Gerontodesign and accessibility: That is to say, blending emotional design focused on our target from a sensitive, social and cultural point of view with an interface that meets all the needed and essential requirements for an optimal usability:

  • High readability typography.
  • Colours and contrast have to meet WCAG AA/AAA accessibility guidelines.
  • The design must avoid using colour codes to give information.
  • The usability heuristic about “error prevention” must focus on our users handicap when using smartphone’s keyboards.
  • It has to find a good balance between design, simplicity, plain interface and giving just the necessary info: not an icon without its descriptive text or animations without a real purpose, friendly content, a constant support for their memory, etc.
  • We must keep in mind that the interaction of the elderly with our product will be longer than average.

BENCHMARK

The goal of our benchmark study was to get to know our competitors and the services they offer. We focused on apps related to our matter whose good practices and ideas could help to improve our project.

A grid with a benchmark. There are five apps, some of them are Spanish: Adopta un abuelo, Finally, Meet up, Yo te cuido and Familiados.

We chose a bunch of interesting features to evaluate in order to use them as a reference or to keep in mind what deficiencies may exist in the market.

Table with the points we gave to the features of the five competitors apps. The conclusion are below the image

Our conclusion were:

  • There isn’t an equal product so we won’t find a direct competition.
  • But there are a lot of indirect competition:

Events and entertainment apps: Adopta un abuelo, Meet up

Making new friends or dating apps: Meet up, Finally

Health information app: Yo te cuido

Finding caregivers app: Familiados

  • The easiest the login process the better.
  • Having video tutorials could be a good feature.

DEFINING OUR HYPOTHESIS

Starting from “How could we create a network for older people and volunteers to allow the first ones get into the digital world so they can start feeling they are an active part of society?” we outlined this hypothesis that will be validated during the next steps:

If we design a simple and accessible product that connects elderly people and volunteers willing to help them, both in person and through smartphone assistance; then the fear of digital and the feeling of being left out of society will diminish because they will feel supported, they will learn and empower themselves in the process.

SWOT CANVAS

Once we found out what the competition does it’s self-analysis time, to know about our strengths, weaknesses, opportunities and threats

Strengths and Opportunities:

  • It will be a new market with no direct competition.
  • We have the means to make the difference if we simplify the processes.
  • Due to the aging society our market sector is growing bigger and bigger.
  • A good accessibility design will be the distinguishing characteristic of our product. We, the “uxers”, have the knowledge and the proper tools to achieve it.
  • We already have a client (users) portfolio and an ongoing project: Emancipatic.

Threats and Weaknesses:

  • Due to the digital gap rising the number of users could be a challenge.
  • We have to overcome the individualist trend of current society.
  • We are limited by time and technical resources.

OUR TARGET

According to the briefing, our user (member) is someone older than 50 yo, eager to learn how to navigate by him o herself through the digital world. However, while developing and designing our product we broadened the volunteers profile to include anyone willing to help with the sole requirement of having the time and knowledge to do it.

After the research we found out who we were targeting, thus we tried to get closer to their way of understanding life so we could empathise with them, the result was our user persona, and like this we reached the next phase: strategy and ideation.

STRATEGY AND IDEATION

USER PERSONA

A digital image with two user profiles, talking about what kind of users we have, the member and the volunteer and how they behave. Both pictures has been generated using the IA DALL-E 2. The text is almos the same of the one from the article

Marisa Rivas: She is the perfect example of our user, the kind that tries to solve the problems she encounters when using technologies; she is so curious that sooner or later “the student will become the master” and will be able to help while she keeps learning. The perfect member-volunteer hybrid.

Naiara Martín: She fits into the volunteer profile, the one that stands for her love in helping her community.

MARISA’S JOURNEY (AS IS)

We are aware of our user need; now it’s time to empathise while witnessing her go trough a “Costumer Journey As Is” in order to find out specific needs, the pains and gains from her experience to design the details of our product.

Marisa’s Journey As Is that talks about he experience when using an app to send money to a friend. She doesn’t achieve it and gets frustrated.

This analysis supported our first thought about the need of providing outside help to the elderly.

💡 It is easier for the user to bring up their specific problems and let us address them individually, instead of reaching and offering them common training, because of the wide range of possibilities and doubts that may arise on a day-to-day basis.

UNIQUE VALUE PROPOSITION

After defining our users profile, aligning their needs with our features proposal and working with the Value Proposition Canvas, the moment to present our Mission, Vision, Values and UVP has come.

Our Mission, Vision and Values, that come from the main business, and our UVP that says: Our product offers a solution for the elderly to find a simple and intuitive way of solving their doubts, learn new things and going into technology with the help of a volunteer and, as soon as they have the required knowledge, become the teachers. It will make them feel safe and autonomous while helping in their day-to-day affairs.

IDEATION

Finally, we reached one of the most thrilling stages, ideation, where we would collect a huge amount of ideas to achieve the final solution for our problem.

Although the basic features had already been -properly- designed we needed to specify the main topics that will group the inquiries from our users. We started with the Brainwriting technique.

A los of post it with the result of the brainwriting technique

A soon as we gathered plenty of ideas, we used an affinity map to sort and classify them.

The ideas from the previous technique all sorted out.

According to Miller’s Law (Laws of UX) the average person can only keep 7 (plus or minus 2) items in their working memory, so we decided to use six as the “magic” number, since our users will be old people we stablished that this was the accurate number of sections that will avoid an undesirable cognitive load and ease their decision making experience.

  • Health. E.g. How do I make an appointment online with my doctor?
  • Everyday life. E.g. How does the supermarket website works? I want home delivery for my groceries.
  • Friends & Entertainment. E.g. How can I download the IMSERSO Holiday Scheme Magazine?*
  • New technologies. E.g. How can I send pics to my grandsons through Whatsapp?
  • Bureaucracy. E.g. How do I renew my ID Card online?
  • City public services. E.g. How do I contact with the citizen public services on the city council’s website?

*Imserso is a holiday scheme that the Spanish government offers for pensioners who are legal residents of the country. Through this scheme, Spanish pensioners get to enjoy cheaper holidays during the off-peak season, from October to June.

CONCEPTUALIZATION

FLOWCHART

In order to make tangible our User Journey, we designed the step by step path until the goal is reached: To write and publish a message with a question, talk to a volunteer and get it solved.

An image with the member’s flowchart, the goal is to write and send a question with our digital service

SITEMAP

Following our own requirements about simplicity and accessibility, our sitemap was designed with a plain and simple hierarchy, without unnecessary sections and options but meeting the user’s expectations

Our project sitemap. It has and access to login or sign, then the home where you can access: your profile, notifications, messages, a search and the categories

LAYOUTS

And just like that we got all the necessary information so it was time to grab a pencil and some paper and start drawing the first sketches.

UI DESIGN

MEDIUM FIDELITY WIREFRAMES

To be sure about the mobile-web structure and functioning, the contents in every (page)view and the optimal path, we made a pit stop to design the medium fidelity wireframes:

An example of a wireframes and the path

Our starting point has never been zero, the corporate identity was already there, known by its users and despite the fact that our product will function autonomously, we could not ignore the branding -logo, colours and identity- when working on the UI design.

The isologo is an evolution from the Emantipatic’s; we added the word “RED” (net in Spanish) as both a distinctive and descriptive element of our product because we aimed to create bonds and new connections in the community.

Although we were gonna used the corporative colours and gradients we decided to run an accessibility test to guarantee the legibility and the WCAG guidelines compliance.

An images with the corporative colour: blue, violet and turquose and two gradients, with the colour code. The final logo. The result of the accessibility tests we run.

And last but no least, typography, one the main characters in this adventure for it’s the element that combines aesthetics with accessibility.

We picked two typefaces: the friendly, rounded and funny “Baloo Paaji 2”, great choice for titles and headers, and “Atkinson Hyperlegible” for every other text.

The base size was established in 18px scaled by Major Third (1.250), we decided to start one step ahead from the traditional 16px due to advanced age of our users and their, very likely, deteriorated visual condition.

INTERACTION

As perfect introduction of “Red Emancipatic” MVP, the marketing team suggested a landing page design we created hand-in-hand

A gif that show the landing page scrolling up.

Finally, all the time and work invested took shape as something real, interactive and tangible: a prototype that would allow the UX/UI team to run some test, check and, maybe, iterate.

This is the previous stage for the product to become a working mobile web, a job for our Devs team.

Our MVP allowed our users to perform the basic task of “asking a question and solving it” through a mobile web design, this is what they would find:

  • A simple login that will requests just the necessary data to create a profile: a mobile number (it’s better than asking for an email in terms of accessibility), a postal code (regarding the geolocalized help) and a password, for security reasons.
  • Depending on whether they are looking for help, offering it, or both, they will have to choose one from these options: a) the common user or “member”, after the login they will enter the home page right away; b) volunteer, they will have to fill in an easy test to let us know about their capacities, availability and the cities or region they can reach to help and c) the mixed profile for those who want to keep learning and asking but also helping with the issues they have been able to master.
  • The home page will show six categories to choose from so our users can ask questions, read what’s already posted or get in contact with a volunteer straightaway.
  • The volunteer’s profile view will have a short bio, a list about their interests, skills, the topics they can help you with, and reviews from other users.

You can check the prototype here

A mock up with seven final screens as a composition.
Mockup by user17882893 on Freepik

TO SUM IT UP…

It seemed like the end was far away but we finally reached it. All five disciplines had to row in the same direction to accomplish it but it was worth it: our client was pretty satisfied with the result, It was a great product with future potential if the right conditions were given.

We don’t want to lie, two weeks to design a product like this cannot be called anything but intense, challenging, demanding and overwhelming.

For the sake of the team we’ve learnt to manage the tensions, to speak to each other, to work hard, to cry and to laugh. We gave the best of ourselves. Everything we learnt during the bootcamp lead us to know the best way to make this machine work, it also gave us experience and knowledge to bring to a real work environment. Thank you, team mates!

A poem by Gloria Fuertes called “Tren de la tercera edad” in Spanish it says: Y ahora a envejecer bien, como el jerez, ser también útil de viejo, ser oloroso, ser fino, no ser vinagre, ser vino. The loosely translations says: And now, let’s age well, like sherry. Be useful when old as well, be smelly, be elegant, don’t be vinegar, be wine.

You can watch in Spanish the presentation of the project to the client here (02:08:26)

Bibliography

--

--

Esther Calaco
Bootcamp

Hi! I’m an experienced graphic designer & illustrator and a brand new UX/UI product designer trying to find new opportunities.