Admin Hub

An internal ecosystem of sharing confidential user healthcare information.

Overview

Team: Designer (me), Project manager, 2 engineers
My role: User Research, Interaction, Visual design, Prototyping & Testing
‍Duration: 2 months

Problem Space

Providing secure and compliant access to confidential user data that could improve business decisions is a common challenge faced by most corporations.

This especially apply to the highly regulated industries such as healthcare industry where violation of personal data affects on consumer trust and worse could potentially determine business survival.

Background

Wellinks, Inc. is a medical technology company headquartered in Connecticut, USA. I was tasked to design a data accessing system to ensure customer support and better informed business decisions. I worked closely with a project manager / the company's PCO, Ellen, two engineers, and multiple stakeholders.

Solution

Admin Portal
Web App

A web based application that promotes accountability among employee through visible records of data access and moderations.

Key Features

Admin Portal
Web App

A web based application that promotes accountability among employee through visible records of data access and moderations.

Admin Portal
Web App

A web based application that promotes accountability among employee through visible records of data access and moderations.

Admin Portal
Web App

A web based application that promotes accountability among employee through visible records of data access and moderations.

Admin Portal
Web App

A web based application that promotes accountability among employee through visible records of data access and moderations.

Research

The Challenge

Designing a SSP from scratch requires a deep understanding of our users and their behaviors. Furthermore, some of our challenges were 1) defining UX fundamentals, 2) designing the experiences from the ground up, 3) optimizing the experiences, and 4) creating a scalable design system.

Here's how I tackle those challenges:

Process

Stakeholder interviews // Role play // Personal observation // User interviews // Personas
‍

Stakeholder Interviews & Roleplay

First thing I did after the kickoff meeting was to conduct stakeholder interviews to gain a more holistic view and to understand business challenges.

The company is developing their first mobile application that connects to their anchor product - Flyp Nebulizer, and they plan to start off launching a closed beta to test out with a limited number of customers. At this stage, they needed a system where the company employee can manually onboard users, update information, and extract statistics for better decision making.
‍

Identifying users

The portal users for this system can be categorized into three user groups—customer support, data analysts, and engineers.

User interview

Conducted user interviews to understand motivations,painpoints etc.. to
‍
Here are personas

Key findings:

To protect users
Senior students are looking for any school activities that can be on their CV but there aren't many programs for such on campus.
User wants quickly find patient user information
Main considerations for students becoming mentors are time commitment and setting growth goal - they want younger talents to be successful but don't want to babysit.
Mentors want their mentee to become mentors in future.
Those who are not willing or hesitant to become mentors often think they need to be a high achiever and don't realize some students look for personal advice from mentors.

Design goals:

My goal is to design an experience where prospective mentors and mentees can find their “perfect match”, based on similar interests, location preferences, and availability.

These are the problems I plan to focus on:

Collect all necessary user information that is crucial to providing accurate matching suggestions while keeping on-boarding processes short
Provide an environment where users can openly reach out to potential mentors, making the interactions more personable, eliminating any sense of intimidation
Build an intuitive interface where mentee users can seamlessly request an in-person meeting with potential mentors

Journey Mapping

To identifying use case, I mapped out user ... here is a customer service registering new patient users.

Story board:

Sesign

Sketches

I started sketching out the main user flow and several other ideas for various screens based on the requirements, and user story. My goal here was to visualize the user interface, interactions, and flow of the app.

Blockframe

Using Whimsical
and conducted an initial user testing session

Information architecture:

Mi-fidelity Prototype

Validate

Usability Study

What were our users able to do successfully?

bla bla bla A semi-moderated remote usability sessions with 5 potential users Although this was a quick and dirty usability test, I was able to draw material insights.

Patient user profile

bla bla bla A semi-moderated remote usability sessions with 5 potential users Although this was a quick and dirty usability test, I was able to draw material insights.

Global Navigation /Structure

bla bla bla A semi-moderated remote usability sessions with 5 potential users Although this was a quick and dirty usability test, I was able to draw material insights.

Admin user profile

bla bla bla A semi-moderated remote usability sessions with 5 potential users Although this was a quick and dirty usability test, I was able to draw material insights.

User ID System

bla bla bla A semi-moderated remote usability sessions with 5 potential users Although this was a quick and dirty usability test, I was able to draw material insights.

Add a new user

bla bla bla A semi-moderated remote usability sessions with 5 potential users Although this was a quick and dirty usability test, I was able to draw material insights.

FInal Design

Visual system

Accessibility:
As designers, we have the important responsibility of ensuring our designs are accessible as we move to high-fidelity. Using the New School’s color palette - red color and different shades of grays, color contrast, readable typography settings with accessible visual interfaces were essential, especially for college campuses.

Login screens:

Favicon:

Through observation (zoom call when I attend company meetings) I realized the company employee tend to open many browser tabs... so I designed

High Fidelity Prototype

Hand off prototype using Anima
As designers, we have the important responsibility of ensuring our designs are accessible as we move to high-fidelity. Using the New School’s color palette - red color and different shades of grays, color contrast, readable typography settings with accessible visual interfaces were essential, especially for college campuses.

Next Steps

Out of scope but steps I’d like to take next.

A/B usability testing the two information architecture ideas and conduct second online survey to see percentage of each choices (mentor, mentee, both)
Do another round of usability testing with the high-fidelity design to confirm some of my interface design assumptions
Explore the way to integrate with the New School’s desktop student online portal and on campus announcement board
Expand the scope not only current students but also include alumni - additionally explore the option to meet remotely for alumni mentors who relocated outside of the city

Previous