Overview Discover Define Develop Onboarding Figma Prototype Reflection

Overview

Client

Mobilize Me

Time

June 2024

10 weeks

Team

Solo

Focus area

UMS

Administration Panel

Onboarding

Information architecture

UX writing

Key methods

Design thinking, double diamond, user flow, wireframing, vpc, think alound testing, guerrilla testing, prototyping, design system

Background

Mobilize Me provides neurodivergent people with digital tools to give them more structure in life. They have created 2 apps for that purpose - daily planners: Mobilize Me and PlaNet. Both allow a family member or a caretaker of the user to contribute to the process and provide more detailed instructions to each task. Those apps can also be used by institutions - such as schools, where they can be used by teachers to give more structure to the students, who need it. However, for that to work the institutions need to use administration panel to add and manage all the users. So far, Mobilize Me and PlaNet had separate admin panels, which were quite outdated and hard to use, so the company decided to merge them into one and improve their learnability.

Problem statement

How can I improve the user experience of the administration panel for both Mobilize Me and PlaNet apps so navigating the system is easier for new and current users?

Discover

Analysis of existing solutions

I started the process with analysing the existing solutions to understand how the current systems work and find their drawbacks.

Overall, the administration panels are working ok as a tool to perform the tasks that admin has, but they are not very intuitive and are rather outdated. The user experience could be vastly improved with usage of the Usability Heuristics to communicate to users better how to perform certain actions and explain some processes to them.

Usability test

In order to see what elements a regular user may struggle with and what works well, I decided to perform usability tests. As a result the main problems of existing solutions are:

  • confusing labels and names
  • forming and managing relationships between users
  • moving users to different groups
  • time spend on creating new users
  • navigating groups and subgroups when there are many of them (for the big admins)
  • outdated visuals

On the other hand basic features such as creating and editing both users and groups seemed to be intuitive. Similarly, was searching for a particular person in the system.

Some notable ideas were to put “add users” button inside a group as well as to enable planners to plan for a group instead of only individuals.

Target audience

The target group turned out to be very niche and hard the generalise. Those users usually are either the Mobilize Me employees or administrator chosen by the given institution (e.g. special school), who according to my client could be somebody young and more tech-savvy or somebody in a boss position and older, who may struggle more with technology. Therefore, during the design stage of my solution I will keep in mind the extreme users, who may struggle with technology and ensure that the new system will support them with clear naming and in-app explanation of the features as well as prevent them from making fatal mistakes.

What I knew about my target audience is that they are most likely to be Danish adults, working with individuals with cognitive disabilities.

Define

Value Proposition Canvas

To understand the user problems, their relationship between with the system and ensure the solution covers all user tasks, I created a VPC based on interviews and company meetings. I mapped it from a school employee's perspective to better identify customer jobs. This helped me understand user problems and focus on creating solutions for them.

The biggest pain points identified were:

  • time-consuming process of adding multiple new users
  • keeping track of relations between users
  • navigating through long lists of users and groups

As a result of this mapping I gathered feature ideas such as:

  • excel sheet importing for bulk user creation
  • displaying relations in user profile
  • displaying subgroups as drop-downs
  • search bar for both groups and users

User flow

I created a user flow to plan the order of steps that would be the most natural and to later refer to it while sketching and creating wireframes.

Develop

Low-fi Wireframes

Based on the user flow I’ve sketched different layouts of the administration panel screens to generate ideas. Then I’ve recreated the best ones as the low fidelity wireframes in Figma.

To address the issue of users getting lost in the big amount of subgroups I decided to create 3 limited types of groups: institution, subgroup and task group, where subgroups can exist only under institutions and task groups are only in subgroups. Which minimises the longest possible chain of groups to institution → subgroup → task group. Task groups (on pic subgroups) were created to allow planners to assign activities to a group of people instead of just individuals, thus make their work quicker.

At this point I discarded the feature of bulk user creation due to logistics. Importing the excel sheet would only provide general user information - the admins would still need to assign them roles, put them in groups and create relations - so in fact the creation process would not be much quicker.

Design system

I created a design system in order to ensure consistency throughout the solution as well as to make the design easy to use and expand by the company.

High-fi Wireframes

For the high-fidelity wireframes I implemented the feedback from testing, replaced placeholder text with content and focused more on the UI of the solution. I decided to work with a mostly monochromatic color palette, to create a cohesive look and ensure that the solution does not seem too overwhelming.

Testing

I tested the usability of the project in 2 testing sessions (low-fi and high-fi), by observing how users interact with it, while performing the previously prepared testing tasks. I gathered the results of each session in a feedback capture grid to have a clear direction of what needs to be improved and what worked well. Based on it I implemented the feedback accordingly.

Examples of implemented changes are:

UX writing

One of the crucial parts of making the administration panel easy to navigate for users (especially new ones) is good UX writing. To ensure clear communication between users and the system I focused on the microcopy.

Good examples of it are the options in the hamburger menu for groups, where every feature starts with a different, actionable verb. Moreover, the scope of the feature behind the buttons is clear based on the name (e.g. export list of users)

Another place where UX writing was important are the delete pop-ups. The title shows what is being deleted to clearly communicate to the user what is happening and the description tells the consequences of continuing the admin. The buttons cancel give an option to exit, while delete group further confirms what will happen after clicking it.

Onboarding

Developing a comprehensive onboarding was essential to help new users quickly familiarize themselves with the system, reducing the learning curve and improving overall user satisfaction.

Before jumping into creating a guided tour for the administration panel, first I ensured that other types of onboarding are available to the users. I focused on empty states, onboarding on-demand and only then planned guided tour for the extreme users that would need it.

Illustrations used are from Storyset by Freepik.

On-demand onboarding
Empty states
Guided tour

Final Figma Prototype

Click the button to view the final Figma prototype including the design system and onboarding tour.

Reflection