Web application design for medical practice that allows them to communicate with patients and across the staff in a way that automates steps and decreases unneeded repetition.
CASE STUDYThe Fold Medical Web Application was requisitioned as a part of a larger project to create a more engaging interface for a medical practice to streamline patient-centered tasks across the platform. The fold app takes managing the medical practice into a new era.It simplifies and automates the process for medical professionals and also adds transparency for the patient.With a simplified UI and better UX, the Fold App is poised to change the way medicine works.
Design a web-based application that created a clear user journey when performing operational tasks like creating appointments, sending along prescriptions and following up with patients.
In looking at what the Fold App needed to accomplish, it was important that it accomplished a few things. We had to address the pain points like improving on antiquated medical databases that looked like they were built in 1998 and never updated. We also needed to make the user flow obvious, improving training and usability. Plus, we needed to decrease the number of repetitive steps. Too often systems require adding information that has already been entered, or building things like prescriptions and letters from scratch.
To do these things, we looked at what tasks were being done by staff on a regular basis. In this part of the project, we focused on making appointments and creating tasks for both patients and medical tasks. We created a user flow that made the pathway to complete and follow up on tasks obvious and also focused toward the person needing to complete the tasks. We also ensured communication between staff was easy and reduced the number of forgotten tasks or setbacks due to things not being completed.
In creating the design system, we used brand colors already pre-determined by the business, as well as fonts. From there we created consistent buttons and cards to maintain a clear and cohesive UI.
A majority of colors were already chosen via prior branding. We wanted to ensure the app felt like it flowed seamlessly from the corporate website, so purple became the primary color. It also allowed for a deep contrast to the cold greys used in most antiquated medical practice systems.
To accent certain tasks or alerts, we used two colors to make items stand out. A bright red was used to ensure any task that was urgent had a strong highlight and contrast on the page. This bright red draws the user's attention to that item and decreases the likelihood the item would be missed.
A teal blue was used as an identifier for two items - staff and choosing items. When choosing items like times or doctors for appointments, changing the button from tan to blue makes it obvious an item was chosen.
Again, the typography for the Fold App was somewhat pre-determined by the branding completed earlier. There was no need to change the font, as Fold Health uses Montserrat. It was an easy to read font that would be helpful for those with a variety of visual abilities. We used bolds and italics to differentiate headlines and areas of the application, making it helpful for anyone using a screen reader.
Buttons maintained shape consistency across all pages, but colors were determined based on need. Any text box or task were a light tan color. If it was an important or urgent task, the border was highlighted in red for easy identification. Adding tasks such as appointments, alerts, or tasks were square and contained an icon to quickly find and use them on the dashboard. Photos were circular on most pages, but staff for the day were rounded squares. Most buttons used a combination of text and icons to guide the user through the journey.
Icons became an important part of designing the application, as things like arrows and search icons made it clear what some buttons would be used for and guide the flow. In the case of the menu buttons, we made it easier for screen readers and users with visual issues by adding a hover description of what that button would do.
Once the design elements were determined, designing the prototypes began. Since this was going to be an application primarily used on laptops or desktop computers, those screens would be designed first. I began with low-fidelity wireframes to show a basic framework of the user flow, and then moved onto mockups and prototypes. Each stage was tested with a combination of patients and medical professionals to ensure the user flow followed how the medical practice would operate.
The best way to experience the prototype is to watch it in action. I walk through the app in this video, explaining the design process and how it would work to facilitate the overall goals of the medical practice.
