UX/UI, Product Design

Mochi Health Portals

Health portal websites that are to be used by patients, doctors, and company staff. These portals are used primarily for managing and scheduling provider visits, viewing patient informatio and messaging/customer service


Roles: UX/UI, Product Design, User Research

✍️  PROJECT OVERVIEW

Mochi Health is a start-up company I worked for back in the fall of 2022. They are a healthcare company focused on obesity medicine and virtual doctor visits.

The core user-groups involved were the patients, doctors, and company admins. All three of these groups had to be interconnected digitally to deliver seamless functionality and usability.

In order to make that happen, my team and I had to create a web-based health portal system that was composed of three different versions - each tailored to fit it’s respected user-group.

I was the sole and lead UX/UI designer, and took on roles in product design and user-research as well. 



👨‍💻 ‍‍‍THE TEAM

The start-up being composed of a small team of 11-30 employees meant I had to take on multiple roles in this project. Some came easy and natural to me, and some more challenging and uncomfortable. Ultimately, I was able to deliver on all departments, and with the help and support of my team, we were able to succeed on developing this enormous project in under three months.

PROJECT TIMELINE: 3 Months (Oct - Dec)

JERICO MORALES

Branding Designer
UX Designer
UI Designer
User Researcher
Product Designer

ENGINEERING

Lead Front End Developer
Front End Developer
Lead Back End Engineer 1
Lead Back End Engineer 2
Back End Engineer 1
Back End Engineer 2

COMPANY STAFF

CTO - Lead Product Designer
CEO - Project Designer
Provider User Tester
Admin User Tester

Discover Mochi Health Portals

Below I go over each of the 3 portals and their features. Each portal is unique in their own way, but all follow the same design language to stay consistent and true to it’s brand identity. I go over what features sets them apart, and you'll be quick to see what features they share as well.  

Patient Portal

Let me start by describing what the company does first and foremost. Mochi is a weight loss company that specializes in obesity care. We have a team of docotors from all around the US that do online video visits with patients and provide professional weight-loss treatment. Mochi also sells a variety of weight loss medication that the patient can then purchase and have shipped to their local pharmacy.

The patient portal is the favorite child of the three. Acting as the main hub for patients to login and view their next appointments, speak with their doctor/customer service, pay their bills and so much more. Our team was only given less than three months to create these portals, and we wanted to make sure that the patient portal got the most attention when it comes to its UX/UI (since this would be what the general public would be using).

PROJECT GOALS_

What will this be used for? 

The primary goal for designing the patient portal was to allow them to view all of their upcoming visits with the ability to cancel/reschedule, pay their subscription and also purchase medication, and also be able to message Mochi doctors and staff. This along with a variety of other features like track their weigh loss, edit their profile and upload documents. Think of it like a much better version of MyChart.

Schedule doctor visits

View your upcoming visits right on your home page with the ability to reschule/cancel at any time.

Purchase medication /pay subscription

Link your card and pay your Mochi subscription. This is also used to purchase medication directly from the portal

Message doctor and staff

Message customer service and get connected directly to your doctor for any questions/concerns.

Patient portal key features_

Swipe to check out a a list of features built specifically for the patient portal

FEATURE 1

Login Page

Designed to be a simple login page where you enter the email and password associated with your account. Also have the ability to change your password if forgotten

FEATURE 2

Onboarding Procedure

On your first time setting up your account, you have to enter some important information such as insurance info, nearest local pharmacy, choosing your provider, and fill out a mandatory intake form to connect you with the best doctor for your situation.

FEATURE 3

Home Dashboard

The home dashboard houses where you would see and join your first visit, action center for completing urgent tasks from your doctor, and even to view our online community nourish circle program where you can join the video call with just a click of a button.

FEATURE 4

Progress Tracker

The progress tracker was designed to track your weight loss journey and have a visual chart that represents that. You enter your weight-loss goal and update your weight over-time.

FEATURE 5

Calendar

The calendar page is an overview of all of your appointments. You can use this page to cancel/reschedule future appointments and also view your most recent visits below.

FEATURE 6

User Profile

The user profile was designed for patients to edit their personal information if they needed changes to anything. Changing insurance information, emergency conctacts, etc. This was also a place to upload documents for both mochi staff and doctors to see.

FEATURE 7

Subscription and Billing

This page was designed for patients to view their subscription payments and to make any changes if necessary. This was one of the most essential features to get right as we were dealing the source of our company's revenue, so the the user experience and ease of use had to be extremely fluid and easy to understand

FEATURE 8

Messaging

This feature was made for patients to message Mochi staff and doctors in a chat/email-like system. The messaging feature was a whole beast of its own to design. We made a messaging app from scratch. And being the only UX/UI designer on the team, a lot of blue-printing/user-flow planning was a lot on my shoulders. But I believe we did well.

There is a whole project in my portfolio dedicated to just in-portal Messaging, and you can check it out here.

Provider Portal

Similar to the patient portal, the provider portal was made to view and reschedule upcoming video visits with patients and be able to message patients and staff directly. But the highlight of this portal was to also create a system where doctors can view all necessary patient information at a glance, to make patient visits as productive as possible.

PROJECT GOALS_

What will this be used for? 

The provider portal was made for doctors, to be used by doctors. It had the same functionality as the patient portal to view and schedule visits, and also made viewing patient information a lot more streamlined. A lot of the doctors we interviewed all had the same issues with their current set up, being that there were too many different tabs, notes, and documents to look over during the visit that it was hard to focus on the patient. Our portal made it so that all of the information you need would be right in front of you, all at a glance. This along with many other features made the provider portal a groundbreaking tool for any and all doctors seeing patients virtually.

Access patient information

Patient information is laid out and presented efficiently for doctors to view during their video visits.

View and reschedule patient visits

Access to their calendar to view/reschedule patient visits.

Upload Encounters

The provider portal makes it so that all visits are kept track of. At the end of each visit, doctors upload encounters and add notes into it.

Provider portal key features_

Swipe to check out a a list of features built specifically for the provider portal

FEATURE 1

Home Dashboard

The dashboard serves as a calendar view for the doctors to see all of their appointments at a glance. Doctors get a lot of appointments, and so designing a calendar that could encompass all of their visits in a way where it is easy to navigate around was a top priority in its design.

FEATURE 2

Patient Page

The patient page is what gets pulled up every time a doctor is live with a patient. This information could also be seen at anytime. On the left is a PDF/file viewer where they can see necessary paperwork, and on the right is other vital patient information like their BMI, weight, and even a tagging system for doctors to easily identify mild to extreme symptom cases.

FEATURE 3

New Encounter Pop Up

This encounter pop-up can be pulled up an any point. This is so that doctors can take notes and write down any immediate information for record keeping. This was designed to be a pop-up that can be toggled at any-point to be as accessible as possible.

FEATURE 4

Messages

Similar to the patient profile, doctors have a messaging feature where they can message patients and mochi staff directly.

There is a whole project in my portfolio dedicated to just in-portal Messaging, and you can check it out here.

FEATURE 5

Encounters

This encounter page is where providers can view all their uploaded encounters. They can also view notes from admins about that patient as well. This is very essential when keeping track of patients progress and history

FEATURE 6

Refill Requests

Before patients can purchase refills for their medication, the providers must approve of this first. This page was designed for that, and their decision will be sent directly to an admin and will be taken from there. But it must always start from the provider's approval.

FEATURE 7

Profile Page

This is the provider's profile page. It keeps track of how many new patients they have, current patients, cancelled patients, etc. This also houses their state licenses as each doctor must have an active license to be working in that area.

Admin Portal

The admin portal is the brains behind everything. All communication and interaction between the patient and provider is all overseen by our admins. Admins may also override information such as rescheduling visits and changing patient infomation. The admin portal was definitely the heaviest in terms of features designed.

PROJECT GOALS_

What will this be used for? 

This was used my mochi Admin staff to oversee all company activity and to make changes when necessary. Admins were also in charge of customer service so anytime a patient must chat with a doctor or staff, it must go through admins first.

Manage all patient and provider information

Admins can oversee and edit necessary information for patients and providers if changes had to be made

Purchase, track and send patient medication

When patients purchase medication, this portal allows them to keep track of it's tracking status, update the patient on it, as well as purchase for them if necessary

Message patients and doctors

Messaging on the admin portal uses a very different process than provider and patient and is the connection point behind all patient-provider messaging

Admin portal key features_

Swipe to check out a a list of features built specifically for the admin portal

FEATURE 1

Calendar

Similar to the provider and patient portal, the admin portal gets a calendar that oversees all company virtual visits. They have the ability to also cancel and reschedule when necessary.

FEATURE 2

Inbox

The inbox feature was where all patient and provider messaging filters through. A message is received from a patient, and that message must be picked up by an admin to start chatting.

There is a whole project in my portfolio dedicated to just in-portal Messaging, and you can check it out here.

FEATURE 1

Messaging

After taking a case from the inbox the admins can then chat to their patient, or forward the message to their primary provider if necessary

There is a whole project in my portfolio dedicated to just in-portal Messaging, and you can check it out here.

FEATURE 1

Patient Page

The admins also get to view all patient information and make changes if necessary. They also have the capability of switching a patients provider for them after a request to switch has been made.

FEATURE 1

Providers Page

The providers page allows admins to search up any provider working with the company and view their information when needed.

FEATURE 1

Medication Page

The medication page is admins can purchase medication for the patient if a request has been made. This page lists all the necessary details including the patient and the provider who prescribed the medication.

FEATURE 1

Advanced Search

With thousands of patients and hudenreds of doctors within the company, we needed to design a search bar that could search at a more convenient and specific way to make the experience as productive as possible

FEATURE 1

Clock In/Clock Out

Your classic clock in and clock out UI made for our admins. This was designed with ease of use and friendliness in mind. Using lighter colors of green and red to make the UI as clear and concise as possible.

CASE STUDY_

The Problem

The problem to solve for this project was that we needed 3 different user portals to all interconnect and have each one to serve it’s own unique purpose for the target audience at hand. The patient portal especially served as the branding face out of the three. It would be what our patients would use, meaning it would need to contain the cleanest and most intuitive UI. That's not to say that the other two portals weren't intuitive and thought out in its design, but with our limited time and deadline, the patient portal definitely got the proiority.

A problem we noticed was that a lot of similar patient portal websites like MyChart, FollowMyHealth and others, were not a good basis on how to design our own portal. The ux was clunky, the designs were not pleasing to see or use, and overall felt very "low-budget". Our portal also shares those same baseline features as those said apps, but ours contained that and more. We were implementing visit rescheduling, messaging, weight tracking, paying bills etc - and all that was just for the patient portal.

The provider and admin portal were just as much work or even more for this project. We didn't have any other apps to refer from and had to start from scratch. Admins to oversee all patient-provider activity, make necessary changes and override certain patient information at will, as well as take care of medication tracking and billing for all patients that have signed up for our company. There's no doubt it was going to take a lot of work and brainstorming to make it it all work.

Our provider portal was made to be taylored for doctors, but the problem was there wasn't an app or website out there that did that. So we had to create one on our own. Our doctors mentioned that they would have to open multiple tabs to view patient information, the webcam call, their notes, and other vital information that had to be seen at a glance. Our job was to fix that, and make it as intuitive as it can be.

The Solution

Our team's solution was to tackle this project from a big picture ux framework that served as the foundation upon what we would build upon. This meant that since all three portals are so interconnected, it was important that we established the blue print upon what our portals' limits and permissions were before we started designing on a smaller scale.

For example, when it comes to booking a visit, patients can book visits and can also cancel. After canceling, they are prompted to reschedule. For providers however, they cannot book visits and cannot reschedule, as they do not know their patients availability. It's the other way around. So when a provider cancels, the patient is then prompted to reschedule even if it was the provider that had done it. Admins can oversee everything and can book visits upon the patients behalf and can communicate with the patient/provider directly behind the scenes to make it all happen. This is just one example of how these portals are very much integrated but have strict boundaries around them, and defining these before anything else was an absolute first priority.

After going over the big picture design, we can now focus on the individual portals and how we can take these big ideas and refine them into tangible concepts. Let's use the provider portal for example. One of the biggest goals we had was to make the provider portal FOR doctors. This meant that we needed help by real doctors. One of our doctors on staff volunteered to have a 1-1 zoom call with me, and it was my task to take all of is requests and create concepts to present to my team. This doctor presented to me his real set-up for when he has appointments with patients. They consisted of multiple tabs on this computer, notecards that he would have to hand write, and also printed out forms of official documents. I took all of that and designed a concept in which all of those references were seen all in one page. Hence my design, which houses a section for viewing pdfs and files, a section for patient information, and a collapsable side bar for notes/encounters.

That is just one example for our solutions in creating our portal systems. All of these also ran multiple user tests with test audiences. The patient portal prototype was sent to friends and family of our boss, the provider portal was sent to some of our doctor staff, and the admin portal was sent to our admins.

Being the only designer in the company, my job was incredibly difficult. I had to take on the role of user researcher, product designer and ux/ui designer. And that was only for this project. Outside of that I was still responsible for being our web developer, brand designer, packaging designer, and blog illustrator. Our mochi portal systems team consisted of roughly 3-5 software engineers, and one designer - myself. All lead by our CTO and then replaced by our CEO. The project had to be designed from scratch, coded, tested, and ready to go live in only 3 months. Our team worked incredibly hard and we ended up making a groundbreaking 3 way portal design that was ultimately the foundation of the entire company's business.

CASE STUDY_

The Process

my programs_

This project was mainly created in Figma. I would create blueprints/drafts on Procreate, finalize the designs on Figma, then my designs would be sent to our software engineering team to make it come to life. Sometimes the final result wouldn't look quite like how I designed it. I would then vocalize some small adjustments to the team to really make it appear/function how it was designed initially. Being in charge of the UX and UI, every aspect of my designs had to be intentional. Having something look "pretty" or "clean" wasn't the focus. It had to serve a purpose above all else and be functional to its existence. That being said, working as the lead UX/UI designer for 3 separate portals, all of which with it's own list of many features that all interconnect, there were /a lot/ of drafts and files that came a long with it.

Illustrator was used for creating the icons and buttons. Very essential to the consistency and identity of the 3 portals. A lot of these icons also had to be in a specific format for our software engineers to use.

User testing was also integral to the process of creating these portals. We used the Figma prototyping feature and sent that as a link to all our user testers.

actual Procreate drafts used for this project*

actual Figma drafts used for this project*