cover-hubmedcover-hubmed

Brief

Client requested that they want to build a web application that lets their medical staff collaborate, share, and access their patients’ medical records from one central system. The web application needed to have login access and role permissions for their medical staff. Finally, the web application needed to be accessible through a mobile device to allow remote connection into the system outside of the office.

Solution

Do user research on how their office operated. Look for ways to optimize their workflow. Then, design and build a web application that has these features: inbox, messaging, patient management, and file storage management. Inbox and messaging will allow the staff to send files and messages to each other. Patient and file storage management allow their staff to keep records of their patients as well as converting their offices into a paperless system.

Role

Worked with the client to create their brand identity which included the Hubmed App Icon and Hubmed logo. Did user research to study how their office operated and their workflow. Did visual concepting and prototyped their entire user-interface. Designed their back-end user-interface. Worked along side with developers to code the back-end system. Also made it responsive.

Feedback from Client

Just wanted to say thank you for all the hard work. We don’t want you to think it goes unnoticed. Andy, the design of Hubmed is awesome. It is so user-friendly and almost everyone that gets a chance to work with it comments on how well designed it is. Thank you.
— Ron Bryant, MD

Brand Identity

Establish a recognizable and effective visual presentation of the Hubmed brand.

hubmed-iconhubmed-icon
hubmed-fonthubmed-font
hubmed-font-iconhubmed-font-icon

Personas

Describe ways in which certain types of people will use your application.

persona01persona01
persona02persona02
persona03persona03

Ethnography Study

Observe and gain insights on how people interact in their work environment.

ethnography-studyethnography-study
ethnography-study02ethnography-study02

Wireframes

Visually communicate abstract concepts with users and team members to generate feedback.

hubmed-wireframehubmed-wireframe

High-Fidelity Mockups

Apply product branding, grid structure, typography, color scheme, and icons.