Mizaru
An inclusive online platform that connects people with disabilities with providers who offer personalized support services
Role
Timeline
Tools
Methods
UX Designer along with 2 other Designers
5 weeks
Figma, G Suite, Miro
Research, User Interviews
Usability Testing, Site Mapping
Sketching, Wireframes,
High Fidelity Mockups, Prototyping
Overview
61 Million adults in the US live with a disability. Without access to reliable support, living independently is challenging for them. Enter Mizaru, an inclusive online platform matching people with disabilities with freelance support providers based on qualifications and personalized needs.
Problem
Mizaru is looking to make the leap to version two of their product, specifically for their admin and group management dashboard. Through user interviews, we discovered that the current admin and group management dashboard is not very intuitive and difficult to use.
Goals
More intuitive and easy user flow for both admins and group managers using the dashboard
Access to edit, add, and create for group managers on the group management dashboard
Want to be able to find client information in a faster way
Prioritize accessibility and inclusivity in design so that all users can have a comfortable experience using the product
Solution
Narrow down choices, browsing, and pages for users using the dashboard
Ability to easily filter a vast amount of information to get specific information on clients
Make information easy to find
Utilize design choices that benefit users who live with a disability
Discovery Phase
How do we reduce mental load?
How does the human brain extract or process pertinent information?
How can we design for inclusivity and accessibility so that users feel confident and autonomous in using a digital product
Intrinsic
Extraneous
Germane
Intrinsic: Complexity of new information
Extraneous: Distractions that diverts working memory from processing new information
Germane: Deep processing of new information by integrating it with previous memory/learning
Intrinsic and Germane components of cognitive load are entirely dependent on each individual and so hard to control. People have varying degrees of how information is processed and trying to predict people’s level of what they do and don’t understand can be insensitive and exclusionary. Therefore, we must focus on the extraneous aspect of reducing cognitive load.
Question 1: How do we reduce mental load?
Mental Load is the cognitive effort involved in managing work and everyday things. It can cause a great deal of stress to an individual especially when mental load is coupled with added responsibilities and multi-tasking.
To better understand mental load we must first look at the cognitive load theory. In psychology, cognitive load theory refers to how humans have a limited capacity to handle new information.
There are three key factors that make up total cognitive load
Question 2: How does the human brain extract
or process pertinent information?
To answer this question, we delved into what it means to multi-task. Many people claim that they are good at multitasking but we wanted to see if the human brain is programmed in favor of multi-tasking as opposed to performing one task at a time. The national library of medicine defines multi-tasking as “performing two or more tasks concurrently, which typically leads to repeatedly switching between tasks (i.e., task switching) or leaving one task unfinished in order to do another.”
However, scientific research supports that the human brain cannot perform two or more tasks. Humans are therefore just switching from one task to another. Switching from one task to another also affects productivity in a negative way. The more the human brain has to multi-task the more productivity goes down, which in turn can cause more errors and be costly from a business standpoint.
Questions 3: How can we design for inclusivity and accessibility
so that users feel confident and autonomous in using a
digital product
Accessibility in UX is making sure that design optimizes access to all users. Inclusivity is giving equal access and opportunities to everyone. Accessibility and inclusivity are at the forefront of UX design, however both can often fall short. Even though there are industry standards for accessibility in the field of UX, designers must always be conscious of their design choices so that the product will be useful for all users.
So how can we make sure that designers are inclusive in their design throughout the design process? It’s important to adhere to industry best practices and to frequently check for accessibility barriers.
Industry best practice in UX is known as the web content accessibility guidelines (WCAG). UX designers should always refer to these standards and advocate their design choices based on these guidelines.
Prioritizing and periodically testing design choices for accessibility will help keep the focus on inclusive design and in turn help with usability and retention for all users.
Research Key Findings
Minimize extraneous cognitive load Make it easier for the user to complete a task by minimizing or removing unneeded elements
Limit multi-tasking Be aware of how too many tasks for the user can negatively impact productivity, performance, error and time.
Prioritize inclusive design In every phase of the design process so that all users can use the product
Ideation Phase
Minimize extraneous elements that contribute to the user’s mental load when using the dashboard?
Limit barriers to tasks so the user can focus on one task at a time and can move through the dashboard with ease
Prioritize inclusive design so that users can feel in control and confident while using the the app
How Might We…?
Minimum Viable Product
Mizaru had a few features that they wanted us to improve on for version 2.0 of their admin and group manager dashboards.
Creating a new user
Edit a current user’s information
Archive a user
Create a new group
Edit a current group’s information
Archive a group
View activity logs
Design Phase
Sketching
The main goals we had in mind with the design of the app was that we wanted it to look familiar, easy to use and straight forward to minimize mental burden and decision fatigue. We decided to use the previous design of the Mizaru dashboard and work off of that so that the product will look familiar and comfortable to current users.
Admin Dashboard
The original dashboard does not have clear calls to action, pagination, and other UI features that make it accessible and intuitive to use.
Admin Dashboard Iteration
User Details
The 1.0 version of the user dashboard featured a side panel flyout that increased the cognitive load upon users. In the 2.0 our team used our secondary research and inspiration from other dashboards and created a new and improved version that allowed a user to focus on the details of the contact information they need to enter.
User Details Iteration
By making the user details page its own page, it allows the user to see better, since filling up a whole page will visually make the font bigger, and lets the user focus on the task at hand, which is filling out the contact information.
Success Page
A big component missing from the original dashboard were success messages. Our team thought this feature would help users recognize that they successfully completed the task that they intended to.
Group Manager Dashboard
The original design is similar to the design of the admin dashboard. There are no clear call to action buttons, some elements are hard to read due to visibility, and there is a large amount of negative space not being utilized.
Group Manager Dashboard Iteration
Usability Testing
High Fidelity Admin Dashboard
The objective of the usability test was to see if users can intuitively and seamlessly move through 4 main tasks
Create new user
Edit information of current user
Archive user
View activity log
Usability Issues by Priority
Accessibility in Color
In the snapshot shown, this color red (company’s logo color) fails the color contrast as per WCAG guidelines.
This color green also fails WCAG guidelines for color contrast.
We decided to switch the white font for black and checked it against all of Mizaru’s main colors. Switching the font from white to black allowed all the UI design elements, particularly the buttons, to pass the WCAG guidelines for color contrast.
Call to Action
Admin vs Group Manager Dashboard
Admin Dashboard
Group Manager Dashboard
As you can see, the admin dashboard and the group manager dashboard look very similar, yet different. Each dashboard performs different functions because the users are different. It’s important to keep in mind that these two dashboards should look similar so that it looks like it belongs to the same company, but that the UI elements and functions should reflect what the admin user needs are and what the group manager user needs are.
Usability Testing
High Fidelity Group Manager Dashboard
The objective of the usability test was to see if users can intuitively and seamlessly move through 4 main tasks
Submit a request to add new user
Submit a new request
Delete a request
Look for pending requests
Task 1: Submit a request to add new user
Summary: User was able to get through the task, but asked about adding another client. The user had a hard time finding the option to add another client
Recommendation: Shortened the contact information card so that the +add another user is more in the visual frame of the webpage, and changed the font color to black so that it’s more legible.
Task 2: Submit a new request
Summary: User was able to get through the task but there were some technicalities that were concerning for the user.
Recommendation: Added a protactile option for all of the services and got rid of the hyphen as per user.
The user mentioned that the “have you worked with a provider before” question was unnecessary, and so that question was removed.
The toggle for gender preference was also confusing for the user, so we got rid of the toggle and used more gender inclusive language by switching male and female for man and woman, adding a non-binary option, and a no preference option as well.
Task 3: Delete a request
Summary: User was able to get through the whole user flow. However, the user felt like the process of deleting a user by going into the user profile didn’t make sense and was too cumbersome. He noted that he wanted this process to be easier.
Recommendation: Instead of the group manager having to click on the edit icon and going through multiple screens to delete a request, we added a trash icon so that they can delete requests from the dashboard directly. We also added double pagination symbols to the page navigation so that the group manager can have an easier time going through pages.
Task 4: Look for pending requests
Summary: The user had no problem going through this task flow. User said that the flow was very easy, and liked the filter option so that it’ll be easier to find what he is looking for in a faster way. All in all the user had no complaints or concerns with this task flow.
Prototype
Reflection
Iteration is important in the design process and had my team and I had more time we would’ve wanted to perform more usability tests and user interviews to fine tune design choices. I believe that there is always more room for improvement so that a product is easy to use and intuitive to all users. Conducting another round of usability testing and user interviews would’ve helped to pinpoint certain pain points and specific areas for improvements.
I really enjoyed the industry design project. This was my first project working with other springboard designers and it was really cool to collaborate with a company that puts accessibility in the forefront. Since I am coming from a healthcare background, it was really nice combining my interest in healthcare, accessibility, and design all into one project. As I transition into a designer, I hope to advocate for all users making design accessible and inclusive.