MIZARU
Streamlining the request process for clients
Overview:
The co-founders envisioned an accessible and user-friendly website where their clients (people with disabilities) could effortlessly request various provider services.
I was a part of the design team focused on creating the shared design elements for the platform and specifically crafted the client experience for the Mizaru website.
Platform:
Website
Project type:
Contract
Roles:
UX Designer, UX Researcher
Duration:
5 weeks
Tools:
Figma, Miro FigJam, Deque
My contributions
I reduced the difficulty in requesting for services and introduced features such as report an issue, and profile updates.
1
I implemented accessibility upgrades to website information architecture.
2
I gave the founders a high fidelity clickable prototype to bring Y Combinator for funding.
3
OVERVIEW
Mizaru’s ultimate goal was to make life easier for their clients.
When Mizaru founder Jason A. Corning shared an anecdote about how people with disabilities simply wanted a great user experience as everyone else, it really resonated with me. Shouldn’t design be inclusive of everyone? and how could I provide that service?
My goals:
Make a website accessible to clients with disabilities
Streamline the client first time login questionnaire
Make it easier for clients to make provider requests
The project consisted of two parts:
First-time login questionnaire
The client web portal
DESIGN PROCESS
Focus on the key milestones!
Prioritizing the milestones and focusing on the improving the overall Mizaru user experience involved:
Initial project introductions with the Mizaru founders
Data synthesis of user research
Development of a comprehensive site map for the client portal
Refinement of existing wireframes
A Final high-fidelity clickable prototype, incorporating valuable feedback from the co-founders
DESIGN PROCESS
My role involved a reversal of responsibilities.
Given Mizaru's existing design framework, I dissected their existing design, with the main goal of integrating accessibility considerations.
As my primary focus was on the client portal, it was crucial to gain a comprehensive understanding of the needs and pain points experienced by Mizaru's clients, which will serve as the design foundation.
re-Develop
Improve wireframes
Implement accessibility
Deliver
Refine wireframes
Final prototype
re-Define
Data synthesis
Affinity maps
User persona and flows
Site map
re-Discover
Review Mizaru research
Study previous design
Organize questionnaire
Accessibility research
re-DISCOVER
Ok, so what about accessibility?
One of the biggest design goals for Mizaru was accessibility. Given the short timeline to produce a viable prototype, one of the quickest ways to understand accessibility was to study the W3C Web Accessibility Initiative (WAI) strategies, standards and its impact for making websites more inclusive for people with disabilities.
What is web accessibility?
Web accessibility means websites or web tools are developed and designed so people with disabilities can use them.
Websites and web tools should be inclusive of everyone.
How does this impact people impact with disabilities?
Often people with disabilities may need to use screen readers to verbally describe the structure of a webpage and having hard to navigate sites really hinders that user experience.
How to design with accessibility in mind?
Provide clear and consistent navigation options.
Don’t always rely on color.
Use headings and s p a c i n g generously.
re-DEFINE
Supplementary user research provided insight into the issues people with disabilities had navigating websites in general.
I focused on extracting relevant data points and conducting further research specifically related to clients' interactions with the service's website.
To effectively capture the user's challenges, goals, and desires in relation to Mizaru, I employed an affinity map to gather valuable insights and gain a comprehensive understanding of the users' needs.
Questionnaire affinity map
Client portal affinity map
re-DEFINE
A typical Mizaru client wants to find a trusted provider to help them.
An user persona named Matt was created to understand the goals, characteristics, motivations, and frustrations of a typical Mizaru client, this helps me tailor the client portal and services to support his daily and business activities.
re-DEFINE
Building a website navigation improved clients’ chances of finding the services they needed.
In order to navigate the client portal, I implemented stronger Information architecture like a site map, that allowed the users to effortlessly find the information they are looking for.
For example, let’s say Matt wants to view his requests for legal assistance; he would now see his requests organized into 4 major categories.
re-DEFINE
Next, I figured out how to get the clients to their service providers.
Questionnaire workflow
When a client, like Matt, first signs up as a client, he is required to fill out an one-time questionnaire about himself. The original Mizaru questionnaire was confusing and disorganized. By sectioning questions into categories, Matt knows exactly what information is needed from him, which then allows MIzaru to provide a tailored service to him.
Request workflow
Clients making provider requests is the core service Mizaru provides. As a client, Matt will likely want to make a request through Mizaru for a provider service such as co-navigator for exploring new areas around Manhattan.
re-DEVELOP
Initial wireframe iterations improved content, design and accessibility.
Building upon the initial design, I created new wireframes to reduce cognitive overload, and introduced new accessibility considerations to improve the user experience for both the questionnaire and client portal.
Questionnaire: Before
Clients were concerned at the amount of questions.
Clients were often confused about how to answer the questions.
Clients felt it was taking a long time to complete the questionnaire.
Questionnaire: After
Implemented a clearer progress bar to monitor progress.
Questions are grouped by category, instead of having one question per page.
Questionnaire is structured and organized.
Client Profile: Before
Clients were unclear what their events are - how can they figure out what’s starting or upcoming?
Clients were confused with multiple navigations (e.g Top and Profile).
Clients found it hard to edit information on their profile.
Client Profile: After
Updated Navigation and buttons.
Created a singular Profile page to include all personal details.
Enlarged text and iconography.
Removed rating at the request of stakeholders - added Switch to Provider
Dashboard: Before
Stakeholders asked to remove the calendar.
Clients did not feel their events were organized.
Clients were confused where they could make a provider request.
There was no area to scan their QR code when a provider was present.
Dashboard: After
Increased the assignment card for readability.
Add a “Make a request” shortcut button for ease of use.
Clearly indicate to the client who is the provider.
DELIVER
The final product focused on giving clients easier access to providers and implemented accessibility.
Designing for accessibility was certainly a challenge but ultimately keeping in mind the considerations from the secondary research (such as contrast, spacing, consistency) made creating a final product for Mizaru possible. My goal was not only to design for accessibility but also to give people with disabilities (like our user persona, Matt) that same user experience that anyone would want when using a website: inclusive, efficient, and user friendly.
General questionnaire improvements
There was a significant reduction of the original screens by 50% that increased task completion by clients!
Organized questions into 6 categories.
Progress bar serves to inform users of their completion.
Questions that are required are clearly indicated.
Improved dashboard and site navigation
Designed a side navigation to eliminate the use of dropdown menus, which can’t always be recognized by screen readers.
Making a request can be done quickly from the home page.
The client’s events for the day are clearly displayed reducing cognitive overload.
Make requests easily
Clients can complete their request tasks quicker comparative to the original page.
Whether it is from the home page or the requests page, making a request in Mizaru is a piece of cake.
Service request types are accompanied with visuals so that users can easy understand what each request categories are.
Quickly access profile and account details
We focused on creating a space where the user can do exactly what they need to do in few steps as possible to reduce click fatigue.
Enabled the capability to switch to a provider account as well as the ability to delete account.
DELIVER
Try it out!
REFLECTION
Final thoughts and future improvements
While there is a lot more to learn about designing for accessibility, I hope to have built a good starting prototype for Mizaru and their clients to use. I am grateful for the opportunity to work with a company like Mizaru that is passionate about helping people with disabilities.
This project was not only a great opportunity to collaborate with a team but also a way to establish good and clear work processes and goals. Open communication involving exchanging idea and leveraging individual strengths made it possible to deliver this final result.
Things I would like to have done more of:
Create the mobile counterpart of the web portal so clients can easily make requests through their phone.
Continue learning and implementing accessibility in designs as making websites accessible, businesses and organizations can provide equal opportunities for people with disabilities to access information and services online.