Platform: Responsive Website
Industry: Healthcare
Tools: Figma, Adobe Creative Suite
Explore the UX/UI journey I took to create a robust 3-user portal system from start to finish.
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 fully-virtual doctor visits.
The core user-groups involved were patients, doctors, and company admins. All three of these groups had to be firmly interconnected to deliver seamless functionality and usability.
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.
Mochi is an obesity health care company that I helped pioneer as a UX/Visual designer back when it was a start-up at Sep 2022. For the business operating side to function as intended, we were tasked to build 3 interconnected and user-specific web portals to serve as the foundation for patients, doctors, and company admins. We set out to create this website and solve the problems listed below within a tight 3 month timeline - and we did just that.
I led the team in branding, UX/UI and product design. With Mochi Health being a start-up company, I was the sole designer and took the creative lead on all projects and marketing requested by our CEO. I collaborated with an international team of software engineers and product designers to deliver this project within the short timeline given to us.
PROJECT TIMELINE: 3 months
Branding Designer
UX Designer
UI Designer
User Researcher
Product Designer
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
Lead Product Designer
Product Designer
TLDR: Sole designer for this start-up company - Responsible for all branding and design assets needed for the business and it's projects. I took the role as lead UX/UI designer and also took on the role of product designer as the project went on.
Patients apply for the weight-loss program, admins are notified, and then doctors are assigned to their patients to set up video visits with them. That entire process was done through email; from patients to admins, doctors to patients, and everything in between. Admins had to store sensitive patient information in non-secure ways, doctors couldn't access the right files in time, it was all a mess. Everything was scattered.
Our company used email as it's primary communication system. This lead to clutter, late responses, unorganized messaging, and many instances of miscommunication. It worked, but it was slowly killing us.
Doctors and patients were communicating via email, and would send sensitive data that way as well. Every time a file needs to get referenced, they're buried within layers of emails. There wasn't a safe place to store said information. When a patient or doctor would have to cancel or reschedule a visit, it would be done via email as well. - it was slow and tiresome to do such simple tasks.
Company admins had a lot of responsibility within the operations of the business. They had to be in charge of the communications, medication shipping, visit scheduling, insurance verification, and a lot more. All of these processes had to be done in their own external app, which made doing basic tasks a lot more tedious than it should be.
We had a lot of features we wanted to build within the timeline given to us for this project. All of which were extremely necessary to make this website run as it was intended. We had to build all these features within a very short amount of time.
TLDR: There isn’t a seamless way for patients, doctors and admins to communicate and interact with one another. This makes scheduling visits very difficult, requesting customer service and assistance troublesome, and storing private patient information insecure.
For patients, doctors, and company admins to all communicate and schedule visits effectively, a responsive website based portal system had to be made. This will house all the necessary features needed to allow the company to run as it was intended to, in a seamless and productive manner.
Patients, doctors and admins are constantly in back and forth with each other. From sending and receiving files, online communication, scheduling visits, tracking medication etc. We had to sure we designed with intention in intersecting all 3 user groups when designing all it's features.
Basic communication and costumer service messaging - the biggest cut of the pie of what overloads our email system on a daily basis. With an integrated communication system that lives within the portal, we can negate all clutter and keep messaging sorted accordingly.
There will be an intended flow on how the chain of tasks from each user group will be operated on. You will know what to do next, howe to go back, and what next tasks you have in front of you.
There will be no need for external apps to perform the tasks you need. It will all live in one experience within the portal.
TLDR: Create a foundation. We needed to build a web-based user portal system that served as the control center for all business operations.
When researching for this project. I looked into referencing other health apps and medical portals to see how we can take inspiration/improve upon our current competition. What is their branding style? How do they manage to fit multiple features into one product? How do our the actual users feel when they use it?
I also interviewed real doctors who worked with Mochi Health and for their input on how they would want to see their ideal online workspace come to life.
Comparing the most used and popular health apps/websites; gathering information on function, layout and navigation
Screenshot of me doing a Zoom interview with one of our Mochi Health doctors, jotting down their current workflow while inquiring input on their ideal process. Before our Mochi portal, doctors would use 3-4 different platforms to get through a typical patient visit. One for writing down important health information, one for looking up patient health data, and tons of emails to refer to for conversation reference. It was all too convoluted and wasn't a productive process for our doctors at all.
Designing three portals and countless ever-changing features meant that I had to scatter my brain and layout my user-flows on paper. These are some screenshots from Procreate to help manage my thoughts and share with the team.
Some more high fidelity use flows for the backend/user experience bones behind some of our most important features. This was the most important stage in the process to get right before layering any designs on top of it.
These are some Figma screenshots showcasing some of our low-fidelity portal feature wireframes. No color, nothing too polished, just a layout to communicate a visual demonstration of what the feature may appear to look like.
These are the high fidelity designs, also from Figma. Now with color, guided layouts, and working prototypes. There are just 6 of the many instances I designed for all of our features. I had to make close to 100 different pages especially factoring in medical document questionnaires and messaging.
Because of the large sum of features we had to build, the process in how we started from an start to finish had to be strategic and deliberate. It started with extensive user-research, then interviews, and then moving into user flows, wireframing, low-fidelity then high-fidelity designs.
We were lucky enough to have a lot of internal candidates to reach out to for our user testing process. We had to test 3 different user groups, all of which had very different methods of testing that we used based on the restrictions of our young start-up company.
We were unable to send prototypes of our patient portal to many people due to our instruction to keep it as confidential as possible. We instead created user personas and tested it within our team before releasing it out to the public.
With our user persona above, our goal was to create a persona that reflected the strengths of our product, and how we can build upon that. Our product focused on virtual visits with your doctor, highlighting that it can be more convenient for someone with a busy schedule. With this user persona in mind, we can create a product that focused on ease of use for the user, and tailoring our designs to display your essential medical information at a glance.
USER NEEDS:
She is looking to find a consistent and reliable weight-loss program that she can fit into her busy schedule
OUR SOLUTION:
Our web-portal can be accessed on any browser - desktop or mobile. So you can access all your Mochi weightloss resources anytime and anywhereOur doctor visits are fully virtual - so scheduling video visits are more flexible Essential information is displayed at a glance, eliminating any excess time digging around files and documents to find the information you are looking for.
After gathering necessary information from our doctors and designing a prototype around their input, we sent a figma prototype to our back to them and acquired the necessary changes needed to polish our final version. What we got in response were a lot of praise of getting it close to perfect on our first attempt, and then gave us constructive criticism on how we can further improve on what we had designed.
Similar to the doctor portal, we sent our prototypes to our admin staff via Figma prototype and received constructive criticism on how we can further improve on our product. This mainly included rearranging certain features, adding necessary medical information, removing unneeded information, and general feature requests to add that would help with their workflow.
We saw great impact upon launching this product. Successfully transferring all of our patients to our web-portal almost instantaneously, seeing a great increase in the amount of patients signing up, and with that then translating to more profit and attention to our company.
After 3 months of work - our final product had launched. We were able to deliver a responsive web-based user portal experience for patients, providers and admins; all working in unison and embodying the functionality built for it's respective user group.
- Very overwhelming. This being a start-up company meant that I had to wear many hats and perform different tasks that had great importance to the development of this project. Those tasks being lead UX/UI designer, branding designer, UX researcher and product designer. That was along side my other assigned tasks in our company marketing department; designing social media posts, website maintenance, and packaging design.
- Conceptually, this project was extremely convoluted. It went through a numerous amount of changes. Things we’d work on for weeks just to be scrapped the next day, designs that I would spend days designing, all for it to be an unnecessary feature that we don’t need. Being involved in that process taught me how to adapt, to stay consistent to innovate and be involved even with the prevalent emotional and mental struggle.
- This project being in the medical field meant that it was accompanied by a lot of documentation. Patients sign up and take eligibility tests for us to determine the optimal web experience for them. This meant that as the visual front-end designer for the company, I had to create hundreds of Figma pages in questionnaire documentation, while creating user flows in directing the user order of those pages. My struggle as a designer came from both constant innovation along side numbing repetitiveness.
- Although the process wasn’t entirely smooth and structured, my team and I were able to create great work chemistry and deliver the final product within the tight 3 month timeline given to us. There was a lot of learning that had to be done, both in the work itself and how to effectively work as a collective unit. We were an international team, so we had team members from Africa, Japan, California and India all working together on this project. Learning to communicate with each other effectively was as important as the work that we put out individually.
1. Optimize features for all display sizes - at the time of us creating these features, we had only focused on the desktop experience, while creating a passable mobile version for launch. I would be more intentional on scaling our features to be fully optimized in every display size to greatly improve user experience.
2. Additional features - During the time of our launch, we had to scrap any non-essential features to prioritize solidifying the performance and optimization of the priority features. Now that the dust has settled, I would love to redirect our team’s focus into innovating and developing on our secondary set of features.
3. Visual Polishes - As the visual designer behind the entire portal system, there is still definitely room for improvement. Tweaking some spacing between texts, adding/removing color choices I had made to make look more user friendly, all these little changes aren’t very demanding but go a long way for visual user experience.
4. Review user-feedback - Now that this is officially out to the public, it’s essential that our team takes the feedback and criticism from our users very seriously. Whether that be through a google sheets survey, or a written email. We should take intentional time to listen to user feedback to better enhance their experience.
- Oh so that’s how this works - This being my first large scale UX project, I now know all the little bits and pieces that come into creating a product. Especially having to be assigned in multiple positions, I have a much better understanding of how the team operates, how all the roles come into play with each other, and more importantly: Which roles I thrive at the most.
- Resiliency is a non-negotiable - I would come across a handful of hurdles when working in this product design team. My ideas would get shot down, my team-mates don’t take me seriously just because I am new to the role, I be assigned work that later just gets completely scrapped - it was challenging to say the least, both mentally and emotionally. But it did teach me how to stay resilient. Believe in my ideas and to share them with my team. To also stay humble and take feedback maturely. I was new to the role/roles after all.