Wireframes - Prototypes - UX Design
Connecting uninsured users to local medical professionals via real-time telemedicine
UX Designer: Digital Wireframes, Lo-Fi & Hi-Fi Prototypes
March 2021 to October 2021
Tools: Figma, Adobe Photoshop
Solace is a mobile app designed to help uninsured residents of Richardson, TX. Its goal is to provide a way for patients to consult volunteer physicians for their medical needs over text or video call.
Across the United States, over 20 million people have no form of health insurance. When they need medical attention, their options are limited to either visiting a clinician that accepts uninsured patients and paying out of pocket or ignoring the problem and hoping it goes away. Because of this, preventable illnesses and treatable diseases are often left unexamined, and Americans frequently have little to no access to sound medical advice.
Solace seeks to enable populations without health insurance or disrupted access to medical professionals the ability to consult with physicians virtually and at no cost. This is done by connecting patients to local volunteer physicians and facilitating digital conversation around the patients' concerns.
When I joined Solace, the only completed work was a few rudimentary wireframes and basic user flow mapping. My primary roles on the project were creating the design language of the app and transforming those wireframes into high-fidelity prototypes. By discussing the ideas of brand identity and user experience with the project lead and graphic designer, I was able to generate a design system of colors and typography for the app.
Once we had a color palette to work with, I was able to collaborate with the graphic designer to create a logo for Solace. Our decisions revolved around making Solace an approachable brand. We wanted to ensure that the logo seemed friendly and inviting so that users would be open to trying out the app.
With our branding guidelines established, I moved on to transforming the work left by the previous UX designer into usable mockups. While the user flow across the wireframes was mostly complete, many of the frames broke basic design principles or seemed sloppily put together. Uneven spacing, incohesive design decisions, and inconsistencies from frame to frame made it necessary to completely reconstruct the app. This process consisted of continuous iteration week after week, building and rebuilding each page based on feedback from the rest of the team during meetings.
Though my final mockups resemble the wireframes I started with, I made key changes to most pages. My goal was for patients to be able to access medical advice in as few steps as necessary. To do this, I removed certain obstacles from the experience. For example, I opted to display the patients' selected symptoms as removable chips rather than static entries in a list. This will allow the patient to easily remove symptoms added by accident with a single tap rather than having to reopen the menu. Additionally, I changed the way that patients choose their physician preference from a small drop down menu to a more intuitive button system.
Deviations between list entries and poor differentiation between types of information in each entry made it difficult to quickly skim through our symptom menu. To address this, I fixed any spacing issues I came across and implemented the design guidelines throughout the app. Though these changes are arguably minor, having uniformity and a clear information hierarchy throughout the list will help the user navigate the menu and make their selections.
I made certain changes to aid the user experience in less tangible ways. Because healthcare is such a personal topic, it is essential that patients are comfortable with our physicians even prior to starting the conversation. On this page, allowing the user to screen their assigned physician will give them a better idea of who they would be disclosing sensitive information to.
After redesigning the rest of the app with similar considerations in mind, I proceeded to construct an in depth login process at the request of the development team. I then drafted the mockups for the tutorial screens, settings, and messaging pages based on changes suggested by the project lead. Creating a prototype that encompassed the entirety of our pages marked the end of my involvement on the project for the time being.
By working on this project, I was able to see how the timelines of designers and developers can easily get out of sync. By the time I finished the prototype, the development team had just finished login functionality. Because this was a student-led project, no strict deadlines were enforced, and progress would stagnate during mid-terms or finals. That being said, I also learned how to communicate design decisions and UX goals to developers, as I worked very closely with the front-end team and showed everyone each iteration of the mockups at meetings. This was also the UX project in which I had to continue off where someone else had left off. It was a new experience having to iterate upon another designer's ideas rather than creating from scratch, and I learned how to consider solutions that would not have immediately jumped out to me.