Freddi Med

Design Library for EHR software

Client: Daniel Klusmann, Ideavity
Services: UI/UX Audit, UI Components Design Library
Tools: Sketch + Abstract, Figma, Jira, Confluence, Miro

About Freddie Med

Freddie Med is an electronic medical records (EMR) solution that helps medical clinics streamline processes related to billing, data security, document management, patient communication, and more on a centralized platform.

It allows staff members to automatically generate invoices and submit them for verification to corresponding insurance companies and enables team members to schedule appointments, send reminder emails, and conduct video consultations from within a unified platform.

Additionally, medical professionals can establish two-way communications with patients, send prescriptions, create consultation notes, and collaborate with team members on cases.

Why Redesign

In late 2017, Ideaivity was commissioned by Daniel Klusmann, the project since entered the daily practice of one project manager, three developers, and one designer.

For the complexity of the application, the team frequently looks short. From the designer’s perspective, it became evident to review the organic development of the project. Hence, together with another design consultant, I was invited to participate in the project as UI designer, with the objectives stated as below:

Implementation of a new working methodology

The processes used to communicate and follow through from design to implementation to testing are deficient in practice. For agile development and scalability, there is a need to implement a new methodology.

Design library to enforce consistency

The created libraries are not clean nor reduced to essential so the reuse of components is still an objective and not a true fact, they are not providing visual consistency and are only available to the designer. A proper library is compulsory.

Design Thinking, an iterative process

The roadmap is planned in Jira with Design Thinking methodology with a timeframe of seven months. My main role in this project is to build a new design library.

Discover
Define
Ideate
Prototype
Design Library

01. Typography

02. Color Palette

03. Icon

04. UI Components

05. Application

UI/UX Audit

I went through the current application and audited the flow and the user interface, spotting inconsistencies and finding opportunities for improvement.

Design Library

01. Typography

The existing software uses Montserrat, a typeface with a large width that takes up a lot of space. EHR has dense data and information, the choice of a new typeface must meet the criteria of saving space and readability on a computer screen. Inter, a font family designed for computer screens is chosen to replace Montserrat, in pair with Work Sans.

02. Color

Based on the color palette of the current app, a new color palette with the brand, neutral, and semantic color was built with accessibility in mind.

03. Icon

A new icon set was created based on a 24 x 24 px grid with a custom-made template of keylines composed in circles and squares.

04. UI Components

The first version of the design library was built using Sketch + Abstract highly recommended by the design consultant, until the realization that the need for remote collaboration overwrites the need for version control. Then every component was re-created in Figma.

05. Application

Due to the complexity of the project, it is unrealistic to develop the whole app as planned in Jira. Apart from making UI and the designer library, I have participated in the UX part with the Calendar module. Here are some examples showcasing the new design library being applied in the Onboarding and Calendar module.

Jira & Miro

Onboarding

Booking

Calendar

What I have learned

Proficient in both Sketch & Figma

Making a design library both in Sketch and remaking it again in Figma within one project has definitely made me become proficient with both tools.

I shared a story on Medium related to this project. If you are interested to know further, you can read it here.

Select the fields to be shown. Others will be hidden. Drag and drop to rearrange the order.
  • Image
  • SKU
  • Rating
  • Price
  • Stock
  • Availability
  • Add to cart
  • Description
  • Content
  • Weight
  • Dimensions
  • Additional information
  • Attributes
  • Custom attributes
  • Custom fields
Click outside to hide the compare bar
Compare
Compare ×
Let's Compare! Continue shopping