ChartLamp

Our team was approached with a vision for a product that would translate an individual's medical history (in the form of vast amounts of text-based medical codes, files and documentation) into an easy to process, visual format. Our task was to create a prototype that could be used to pitch the idea to investors. The application would be useful to anyone with a need to review medical records in a quick and efficient manner, but would initially be targeted toward Insurance adjusters.

ChartLamp

Our team was approached with a vision for a product that would translate an individual's medical history (in the form of vast amounts of text-based medical codes, files and documentation) into an easy to process, visual format. Our task was to create a prototype that could be used to pitch the idea to investors. The application would be useful to anyone with a need to review medical records in a quick and efficient manner, but would initially be targeted toward Insurance adjusters.

The Problem

Collecting, organizing, and analyzing medical records to prepare for an insurance claim settlement is time-consuming and arduous. It might take 3-6 months to compile all the necessary records and reach a settlement using today’s standard processes. Even with digital portals and electronic files, identifying relevant incident information is a cumbersome task.
Insurance Adjuster Journey
The Solution

ChartLamp creates a digital visualization of an individual's medical history that can be searched and filtered. It simplifies the entire claims process, reduces the cognitive load for both the insurance adjuster and the claimant, and reduces time to settlement from months to days.
Insurance Adjuster Journey
(With Chartlamp)
My Contributions

•   Branding and Concepting
•   Visualizing the ChartLamp Story
•   Wireframing​​​​​​​
•   Design System Development
•   UX/UI Design
•   Prototyping
Branding and Concepting
From a branding perspective, ChartLamp was a clean slate. Based on stakeholder interviews and market research, I developed a new logo and color palette for use in the application. A series of style frames were also explored as a means of defining the ChartLamp visual style. The following is a presentation package used to pitch the direction to stakeholders.
Style Frames
An initial concept design ultimately rejected in favor of a lighter, brighter interface utilizing image based map markers over alphabetic or numeric markers.
Visualizing the ChartLamp Story
A narrative about an insurance adjuster using ChartLamp to facilitate a claim settlement was drafted. This story would be used to help guide the creation of wireframes, the user interface and a final prototype.
Wireframes
The following collection of wireframes represent key frames within the ChartLamp story and application. Most views could easily be constructed from this base set.
Design System Development
In preparation for the development of the UI flows, a basic design system was established. Pulling from, and expanding upon the colors and typography outlined in the branding stage, a set of color and text styles were defined in Figma. Additional rules for tokens such as corner radius, effect styles and spacing were also incorporated and defined using Figma variables. These styles and variables were then used in the construction of prototype optimized components and patterns.
Component Library Sample
UX/UI Design
Using the ChartLamp story and wireframes as a guide, a series of high fidelity, user interface flows were created, outlining the various features of the application. Each view was carefully constructed using styles, variables, components and patterns from the design system.
Responsive Focused Design
Single date selection vs. date range
Service detail view
Filter panel + Service list panel
Prototype
From the branding through to the user interface, the prototype brings all the pieces of the process together and works to tell the ChartLamp story.
↑