Mobile Health Care Solutions
The names, treatments and problems used in these screens are fictional.
Any similarity to real people living or not is purely a coincidence.
While working as a UX/UI designer at Cerner, I worked on several Mobile Solutions helping clinicians treat patients
remotely as well as a patient registration solution for their onsite clinic.
This was a prototype for future B2C solution.
Click on images for details on each project
A Diverse UX/UI Graphic Design Portfolio 469
.732.6383
I provide value to any organization who needs a full service
UX/UI, Visual or Graphic Designer
John Chiarello
Developing a Component Library as
part of a Design System
Desktop Solutions
Member Search Functional Uplift
As a diverse designer, I have worked on many graphic design and illustration projects creating print and multi-media graphic
design for companies such as Farm Journal, AgPro, Hitachi Semi-Equipment Group, Nokia, Overhead Door and Lennox. Here are a
few of my favorites in both print and digital output.
Graphic & Visual Design
Patient Engagement Smart TV interface designed to be viewed from bed using hospital remote
E-Learning and Device Interface Designs
Creative Digital Design for Smart TV, Device Interface, and Presentations
Interactive Animated E-Learning Interface
Early in my UX Design career, as a Visual Designer and Illustrator, I was asked to design user interfaces incorporating illustrative graphics. I have also been asked on
many occassions to create PowerPoint Presentations using illustrative graphics Here are some of those projects.
Machine Learning Energy Company Website
Agra-Business Landing Page Design
Delaware River Toll Bridge Landing Page Idea
Agra-Business Landing Page Design
Agra-Business Landing Page Design
Agra-Business Email Newsletter Design
Mortgage Lender Landing Page Design
Web Landing Page & Email Visual Design
Examples of initial web landing page designs.
Emergency System Administration Tool
The names, treatments and problems used in these screens are fictional. Any similarity to real people living or not is purely a coincidence.
Cerner Internal Style Guide Landing Page
Click on each image for larger view
An example of how I was able to
eliminate user pain points with a
simple User Interface redesign.
See how this product design helped
improve functionality on this back-
end emergency network
management tool.
A modern search engine simplified
this interface and made it easier for
the user.
I was part of a group helping to build
an asset library as part of a design
system helping the hand-off process.
Self Promotional
Econet Trade Show Graphic
Cerner Style Guide Landing Page Illustration
Declaration of Independence Illustration
E-Learning Messaging Illustraion
This Early Prototype demonstrates how a clinician can observe
a patient directly from an app on their phone.
•
View and order medications
•
See status of room devices
•
Check vitals
•
View the patients Chart
Initial User Workflow
Mock-ups created in collaboration with lead
Solution Designer using a mix of screenshots
and Microsoft Word and Visio.
Click on image to enlarge
Android CareLink Mobile App:
This was an early patient visit solution designed for Cerner’s on-site clinic. Although these are now very common in Physician’s
offices, at the time, this was the first proposed application to sign in, scan or view your insurance documents/card, view certain
medical records and history, and medical information.
Click on images to enlarge
Electronic Patient Registration
The names, treatments and problems used in these screens are fictional.
Any similarity to real people living or not is purely a coincidence.
CareLink Mobile Orders Optimized for Newer iPhones
Requirement
Create a modern network tool that is:
•
Easy to use
•
Easy to navigate through hundreds of computers
•
Not have to manually load data at each location
•
Give feedback as to the status of each machine
Solution
7/24 Access Admin tool puts everything into an
easy to navigate, modern interface:
•
It has a clear hierarchy
•
Adds alerts for problems with connections and loading
•
has a device tree which you can quickly navigate to edit
the device or
•
Add a device using a wizard style interface.
User Story
As a user, I need the ability to:
•
Edit or add a device
•
Assign a device to any location
•
Connect any device to receive data from any parent device
•
To see immediate feedback as to the status of each device
•
Be alerted immediately when there is a problem with any
device or if there is a network issue
Network Administration Tool
High Fidelity Wireframes
Low Fidelity Wireframes
Problem:
When a user has to search to find a member, the search
requires the user to know at least part of the member number, part of
the name and/or the policy number.
Requirement:
Create a text search where the user can search any
letter, word or number, not have to set filters, and end up with a single
result.
Solution:
A simple, industry standard predictive text search that starts
searching immediately as you are typing anything. Eventually you can
narrow your search to one result. Results display in the form of an
accordion that will expand to show details of the member and their
policies.
Search for a Member
Requirement:
Create a modern, visually engaging interface with a
clear Hierarchy. Give the user the ability to Filter or sort
the audits. Use the company “Netra Design System”
components to match the updated brand identity.
User Story:
As a user, when I look at the audit history in the context
of a case, ––I need to be able to:
•
Easily read and distinguish between each audit
•
Have the ability to sort by major data points
•
Be able to filter by who created, date, time, or
change type
Solution
Using Design System components to modernize the user
interface, I was able to update the look and feel, create space
with a more organized hierarchy, as well as propose new sorting
and filtering options.
Screenshot of existing Audit application.
Audit History Solution
Problem
Being a good designer won’t be enough if the development
team is not able to reproduce your design accurately. The
problem is traditional call out methods to communicate your
design effectively are very time consuming, tedious, and can
be difficult to decipher.
Requirement
Create a design system described as a common repository of
common components already coded into a style guide or
library that can be standardized and re-implemented in the
design of a User Interface.
Solution
I was a part of a team that created a style guide with a design
component library while at Cerner that initiated the creation of
a Design System. I was also a key contributor to UHG’s Netra
Design System making recommendations and adding
new design elements.
Style Guide Screen w/Callouts
Initial Design Phase
Figma Design
Library Created
Library of coded
components is developed
Designers Use Figma
Components to Design Interface
Final Interface Design is
Developed for Final Release
Design System Process
Design System/Hand-Off Solutions
