SaaS with a Pivoting User
Shifting the product to accommodate a new user and flow.
The Project
Role | Responsibility
UI design, UX design, prototyping, design system, cross-functional collaboration with engineering and product
Tools
Figma, FigJam, Google Sheets, Google Meet, Ionicon, Google Docs, Slack, Jira
Scope
UX | UI designer, human-centered design
About Haled and myMedSpa
Haled is a full-service SaaS solution bridging the gaps in health case management through our 360-degree business portal and mobile network of certified healthcare professionals. During my time with Haled, they transitioned to myMedSpa, still connecting clients to in home provided services, but now with med spa companies and providers.
About the Product
The Portal, Haled’s SaaS product was created to help businesses to create orders and oversee and assign these orders to providers which would fulfill in-home services + tests. As Haled transitioned to myMedSpa, the business shifted from a top down to a bottom up system. During this transition, the ideal flow was for the client to create their own appointments and The Portal was there to oversee it all, taking more of a step back in the management of the user journey.
The Problem
User and Service Provided Pivoted | Although the data collected in The Portal remained relatively the same, the users and the user journey had turned upside down. No longer were the orders/appointments being requested from the businesses for the providers to clamor to pick-up and fulfill. Now appointment requests come directly from the clients, placing the control into their hands.
With this key change, the SaaS product needed to be reworked to accommodate a brand new type of user in addition to a new user journey.
How Can We Measure Success?
SaaS needs to be oversee app activity with ability to intervene as necessary.
Hierarchy and structure needs to support the bottom up user flow.
Product feels intuitive and human-centered, as the product is now closer connected with the provider and client users.
Discover + Define
In order to determine how to restructure the architecture of The Portal, I needed a clear idea of the primary goals and integrations of the three products. Below, the top flow was the user journey for Haled, of note the flow begins and ends with the SaaS product, and the apps serve as supplemental to that service.
In the bottom flow, you can clearly see that most of the user journey happens in the apps, with primarily record keeping at the end of the user’s journey. Although there was still a need for the SaaS users to be able to edit and manage all stages of the fulfillment process, the ideal appointment fulfillment flow would be that the SaaS user never does a thing.
Developing for a new flow
Bringing humanity to the language, hierarchy and organization for an optimal function and flow.
In the below image, the reconsidered Dashboard, per the new user. I retained the basic structure of the product, as much of the data collection remained the same through the transition to ensure a rapid and efficient change on the back end. In order to ease the UI rebrand, I provided a detailed Google Sheet of all the exact color code and typography changes so the engineers would be able to simply update the interface.
For our new user in the beauty industry, I wanted to build a product that created ease and familiarity, helping the flow of intuition as they move through the complex data storage and management system.
Widgets become simple and graphic, displaying only the pertinent information per company or independent shop.
I added an interactive filtering calendar. As the primary organization system is appointments, I wanted the user to be able to easily view the week and upcoming appointments without less clicks.
Clearer and cleaner presentation of data.
The Design System
Dubbed “Twiggy” for it’s fashionable color palette handed off by myMedSpa’s graphic designer, this robust and highly organized 20-page design system was the mother-load of all things UI across The Portal, but also into the Client and Provider apps for brand continuity. All fonts and color way combinations were accessibility tested by myself. This design system was the first thing I built for Haled and adjusted to fit myMedSpa, as I understood the importance of consistency across products and having a genuinely inspiring tool kit.
Robust design system has variants of default, active and disabled states for all components in addition to special instances.
Reflection
Main Challenge
Market Profile, accessible through the profile icon in the top right. From here a user can find all associated services, providers and contact information.
Moving quickly while thinking holistically | Haled/myMedSpa made the transition quickly and needed to get high-fidelity wireframes and prototypes to marketing quickly. I pride myself on being a collaborative worker with an eye on the big picture, and understanding that I can design much quicker than the engineers can develop. Simultaneously with my redesign, I updated the design system and created a spreadsheet of all color way/typography updates. This process slowed the design process down a little, but rapidly sped up the development flow and holistically made our team and process more connected and supported.
Don’t take my word for it…
“I worked with Leah at Haled, and I cannot recommend her highly enough! Her designs were always on point and she was able to solve problems with UX that confounded me as an engineer. Additionally, the speed with which she was able to work always impressed me.
Perhaps more importantly is how great of a teammate she was. She took pride in her designs, but not to the point of ego. If things needed to change, she understood where to walk the line in what could change and what was essential for the user experience. She was always professional and communicative and enjoyed working with the engineering team who was implementing her designs.”