Howard Brown Patient Portal

Important note: I designed this app entirely for fun. I saw a number of problems with Howard Brown’s current patient portal, and redesigned it on my own time.

Howard Brown Health is a great organization here in Chicago that focuses on providing healthcare, education, and so much more to the lesbian, gay, bisexual, transgender, and queer community.

Howard Brown is my primary caregiver, and they have some of the most thoughtful, kind, and caring folks available.


Some context

Because I'm a Howard Brown patient, I use their web-based patient portal to do things like schedule appointments, check lab/test results, send and receive messages from my providers, view my medical chart, and more. 

To be frank, the current experience isn’t great. I access it on my phone, in Safari, about 80% of the time I need to visit the portal. Here are some shots of how it looks currently:

Research

When I started thinking about how to redesign the app, I began by outlining what capabilities and objectives users would want and need to accomplish while using it. I also decided to design it as a native iOS application.

I made a few lists, starting with “things the app needs to do.”


Users needed to be able to:

  • Schedule an appointment
  • Send and receive messages
  • Request/view test results
  • View their medical chart/history
  • View and pay their bills
  • Update their account information

Then, I took this list and used it to help me understand and visualize the app’s navigation page by page. I compared this to the app’s current navigation and made some edits.

Navigation:

  • Home
  • Appointments
  • Inbox
  • Bills
  • Chart
  • Education
  • FAQs
  • Contact


Then, I wrote down some quick considerations based on my knowledge of Howard Brown’s existing brand and mission.

Considerations

Mobile-friendly: I knew the app needed to be designed from a mobile-first perspective. Giving the user the ability to check in on health information on-the-go is important.


Accessibility: Howard Brown serves individuals of all types, including those who may be hard of hearing or seeing. The application would need to meet certain accessibility guidelines and be easy to use for everyone.


Language support: When I visit a Howard Brown location, I always notice how they deliver all their signage, handouts, pamphlets, forms, etc. in both English and Spanish. This commitment to serving a wide range of individuals means communicating in multiple languages.


A welcoming voice & tone: Howard Brown has done an amazing job at letting their patients know they are welcome, safe, and vital to what they do. Their message of inclusivity and diversity needed to be brought to life in the app.

Wireframes

From that point, I made some initial mobile-first wireframes.

The login, home screen, and inbox wireframes

After I felt these were in a good place, I started recreating content from within the Patient Portal and applying some updated visual styles. I decided to keep things really simple, and use the color palette from Howard Brown's current logo. I also decided to use iOS system fonts, as sticking to those can help with both accessibility and language support.

Home

For the home screen, rather than give users a list of options, I wanted to highlight relevant information. Whether that's an upcoming appointment, test results, prescription refills, etc., I wanted the focal point of the home screen to be actionable. The simplified navigation is also stripped across the bottom.

Redesigned Home screen

Calendar

From the Calendar screen, I wanted users to be able to easily and quickly confirm, reschedule, or cancel their appointments. I also wanted to showcase previous appointments. The floating action buttons would allow users to be taken to a flow to schedule a new appointment.

Redesigned Calendar screen

Inbox

The Inbox screen didn't need an entire revamp, as it was already pretty straightforward. I simply updated it to match the new visual style and allowed more space for message previews.

Redesigned Inbox screen

Learn

The current Learn section of the Patient Portal either doesn't work or doesn't have any content. So, I created some placeholder content and used styles I found on their existing blog. I'd like to think this section could house relevant medical articles, blog posts, announcements, and more.

Redesigned Learn screen

← Back to the homepage