Back to top

Stamtafel

Connecting people safely and easily with family, friends and nurses. Focused on accessibility, simplicity, privacy and security.

Role

UX Research
Usability Testing
Concept
Design

Period

6 months

Client

iZorgD

Problem statement

The founder of Stamtafel, Ronald Helder, asked IGNE to develop a platform for supporting people in a vulnerable position. Ronald worked for over a decade with people with a mental or physical disability and people who felt alone most of the time. He asked IGNE to build an IT solution to get people out of their isolation.

"How do we connect people in a vulnerable position via an easy- to-use tool that they are kind of familiair with?"

I held workshops to get more insights from our client and did research on inclusive design. After a few talks we came up with the mission statement presented above.

Process

In multiple workshops with the client and nurses, we discussed what the missions statement needed to be and what our target audience was. I sat down with the development team to discuss how the path of new and existing user would be. Together with the client and product owner we made a list of all the necessary user stories and gave each user story points of how difficult the task would be to develop. All those user stories translated into a roadmap. With the roadmap ready I started to sketch. Those sketched were discussed with the team and later on translated to wireframes. The wireframes could be tested in-house. The wireframes were translated to designs and tested with real users.

Challenges

I knew I had to consider many different edge cases. I had to keep in mind that a large amount of our target audience were people with different limitations. I researched the most common limitations people of our target audience could have. There were visual impairments, auditory disabilities, motor disabilities and cognitive impairments. The book "Accessibility for everyone" written by Laura Kalbag gave me a lot of insights. Together with our client, we choose not to design for motor disabilities. If there were a user with motor disabilities, the nurse would already edit the user's account.

Sketches

Based on the user stories I started to sketch the most fundamental elements. For the sake of time, it was nice not to dwell on this part for too long. This allowed the most important elements to be discussed, but the process was nevertheless slowed down. Based on the sketches, for example, I found out that it was useful to place the agenda items vertically because they would not occur in large numbers. Also, it was important to upload a profile photo at creating an account phase. This makes elements such as adding friends easier to understand for our target group.

Wireframes

After the sketches I created a simplified version of the desktop screens. With the wireframes we could discuss the core elements of the product and where and where the pitfalls for the development team could lie.

User testing

With a working prototype which I developed with the Marvell app, I went to a nursing home just outside Groningen. Based on several scenarios with associated tasks, I took usability tests with five different users. The purpose of these tasks was to see if the users could find the most important parts of the product and if they could easily navigate to them. Some of the results of the user testing were as follows;

- The photos in the tour (onboarding) are too realistic, so users want to press the buttons that are only for explanation.

- During "completion" of the profile when registering an account, the button add profile photo was not immediately found. Clearly indicate underlying content.

- The text box together with the place message button are not yet clear enough that this can be filled in.

- There were some missing directions on how to post the photo. Perhaps add an icon for photos/videos in addition to the post message.

- Try to hide fewer items in "fold" such as messages or calendar events, so that people know that there is the content underneath.

Final Design

Together with the team, we developed an accessible platform where users, nurses and even organizations and associations can easily join. The profiles of the users are invisible to ensure their privacy. The users can post a message with photos, videos and documents on the user's profile, on a friend's profile or in a group. A calendar can also easily be edited and made transparent for added friends. Users can join organizations to keep updated about all the information of the nursing home.

Clear colours and typography

Because of the scale of the product and the number of messages that will be written I choose to go with Messina Sans as the font. It's a great font for advanced online applications with great readability. For the colours we made a pallet of tints of blue and tints of black as neutrals. I choose blue because of it's calmness and trust. I added a large range of tints of warnings colours that we could use throughout the system. All of the combinations we used passed the Web Content Accessibility Guidelines.

Kasboekje van Nederland User Interface elementen

Recognizable interactions

Throughout the platform, the primary actions are highlighted with the colour blue. Less important actions are in a different colour. Cards have a small drop shadow for easy recognition. I created a set of illustrations in support of certain explanations.

Forgiving Format

At touchpoints where the user needs to fulfil an action or where the action has a high impact, I provided the users with extra information. When the users want to delete his account, for example, I divided the task into multiple steps so that the user easily can redo his misclicks. These modals are used across the platform.

Easy customization

At every touchpoint where the user can add or edit elements, I used the same fill-in-form for consistency. At the calendar view, for example, users can easily see where they can add an activity. When they add an activity they get a horizontal view of the necessary inputs. There are multiple ways to undo their action, but every input is as clear as can be.

Stamtafel calendar overview
Stamtafel desktop screens events

Kasboekje van Nederland