hospitalrun / design Goto Github PK

View Code? Open in Web Editor NEW

32.0 14.0 41.0 187.76 MB

All things design related or HospitalRun

Home Page: http://hospitalrun.io/

SCSS 100.00%

design ui-design design-assets color-palette logo-files psd hospitalrun

design's Introduction

HospitalRun design

Structure

What you can find in this repo:

Social media avatar and covers
Logo files
- .png, .jpg, .svg
- Native logo artwork files
Common images
UI
- color palette (scss, png, svg)
All assets of v1.0.0-beta
- avatar
- beta
- email
- images
Marketing
- Stickers (157mmx30 mm and 47mmx50mm) print with stickerrmule
- Slides
UI design files (Sketch file, mocks of various screens)

What we plan to add:

New frontend mockups
New HR marketing photos
Brand guide
HospitalRun frontend CSS styleguide
HospitalRun frontend pattern library

Contributing

Contributions are always welcome. If you’re serious about contributing, we also encourage you to join our Slack, where the majority of the project communication happens.

Read carefully before committing!

This repo use Git Large File Storage (LFS) that replaces large files with text pointers inside Git, while storing the file contents on a remote server like GitHub.com.

Currently, the associated files are:

psd
ai
sketch

If you add a new file format, you need to associate it with a large file in this repository. You need Git LFS, if you don't have it, follow this guide. To associate a file type in your repository with Git LFS, enter git lfs track followed by the name of the file extension you want to automatically upload to Git LFS.

For example, to associate a .psd file, enter the following command:

$ git lfs track "*.psd"
> Adding path *.psd

Every file type you want to associate with Git LFS will need to be added with git lfs track. This command amends your repository's .gitattributes file and associates large files with Git LFS.

Branding

Default logo:

Logo on navy bg:

Logo with transparent bg:

Color palette

Here you can find an initial reference of the official HospitalRun colours.

Hexadecimal

#1abc9c
#009b9e
#273647
#011627
#fdfffc

SCSS

/* HSL */
$color1: hsla(168%, 76%, 42%, 1);
$color2: hsla(181%, 100%, 31%, 1);
$color3: hsla(212%, 29%, 22%, 1);
$color4: hsla(207%, 95%, 8%, 1);
$color5: hsla(100%, 100%, 99%, 1);

/* RGB */
$color1: rgba(26, 188, 156, 1);
$color2: rgba(0, 155, 158, 1);
$color3: rgba(39, 54, 71, 1);
$color4: rgba(1, 22, 39, 1);
$color5: rgba(253, 255, 252, 1);

Typefaces

Titles: Kanit
Body text: Montserrat

design's People

Contributors

Stargazers

Watchers

design's Issues

Refreshing logo

Migrate design assets from marketing site repo to this repo

Now that we have plans to host a styleguide, a pattern library, and other design related things, it makes sense to house all things HospitalRun design related it it's own repo.

First step is to migrate the design assets to this repo from the marketing repo.

Work Flow Audit

The goal of this audit is to help design the user interface of the HospitalRun in order to optimize the work flow. To be effective, the app must minimize the number of time a user must click before the information appears. For example there should be 2-3 click for a given information to display.

I fork the design repo - as I make changes I will commit and update this issue

Dashboard

The dashboard is the most important UI for most EMR systems. I have some suggestion as to how we can populate it with most useful information.

1. Search:

Search only appears on certain pages but I think we can make it more universal by using the top bar. By doing this we lower the number of click to information time. The amount of clicks needed before a given information is display. I have created a prototype of how a simple design can greatly improve work flow, and allow uses to get quick access to information.

2. Top Bar:

The top bar should contain buttons to important pages, for starter I think the appointment and dashboard link are crucial. when a person login, whether they are a doctor or nurse, they will need quick access to these pages.

3. Main Menu:

The main menu button should be order in according to important. Below are orders Which I think are crucial.

Patient
Medication
Labs
Images
Appointments
Billing
Inventory

2. Dashboard Display:

HospitalRun current landing dashboard is blank - this component of the app perhaps is the center point for users. For now I think, having the list of patients, a section for notification and a section for calendar/appointments.

The plus at the top fades into the background too much even though it's an important function.

The color of the plus sign does not stand out enough; additionally the plus sign alone is a little less meaningful in a domain where a plus sign is a common symbol.

Initial design mocks for Notifications

These mocks can serve as a guide for implementors at the Lisbon hackathon working on the Notification work.

Notification icon in sidebar

This comp shows where the notification icon will go, and how it should be styled. Notice it replaces the Gear dropdown, which I've moved to a sidebar nav item at the bottom called "Settings".

Notification icon with unread notifications

This comp shows the styling for the notification icon when there are unread notifications for the user to view.

Notification alert

This comp shows the notification alert that should appear if the user has turned on live notification updates. It should animate in from it's left edge. Clicking the alert will take you to the alert destination, and clicking the notification icon will still take you to the Notification view.

Notification index view

This comp shows the Notification view. In this comp, the light yellow items are new unread notifications, and should immediately begin slowly fading to white once the user arrives at the screen to indicate that they are now in a read state (since the user has viewed them). For context on styling, refer to the live updated comments on a GitHub thread, and how comments appear in a light yellow state, but slowly fade to white once shown on screen.

cc @jkleinsc @tangollama

Beta Image for Application

Hey @jglovier! Can you help me out with a image for the application with the logo? Im pretty sure you will agree that you dislike what this is doing...

https://docs.google.com/forms/u/0/d/1SlTWWoGEc99qYOIwNN_-1TRCrvpeA0uu2cWWpjWE-vA/edit

P.S. questions are VERY rough so don't look at those!!

Update Readme and reorganize the repo

Update the readme by adding

new structure
new logos

UX Scorecard: Onboarding experiences

As a potential user, exploring HospitalRun as a potential tool, I want to see what the main features and benefits are for my team/role so that I can determine if it's viable for my hospital/practice.

As a potential contributor, considering Hospital Run, I want to learn about HospitalRun and see if it's a project I want to contribute to and learn about ways to get involved so that I can gain experience in the field, contribute towards a project that gives impact/value/meaning.

Need:

baseline experience map of v1
identify areas of opportunity
Record and document their experience as a person who is new to this process

Emotional Grading Scale

Positive: The user’s experience included a pleasant surprise—something they were not expecting to see. The user enjoyed the experience on the screen and could complete the task, effortlessly moving forward without having to stop and reassess their workflow. Emotion(s): Happy, Motivated, Possibly Surprised
Neutral: The user’s expectations were met. Each action provided the basic expected response from the UI, so that the user could complete the task and move forward. Emotion(s): Indifferent
Negative: The user did not receive the results they were expecting. There may be bugs, roadblocks, or confusion about what to click on that prevents the user from completing the task. Maybe they even needed to find an alternative method to achieve their goal. Emotion(s): Angry, Frustrated, Confused, Annoyed

Create a color scheme

We need to create a color scheme that is simple and quick to reach.
I found this tool coolors.co.

@StefanoMiC what do you think?

Contributor Thank You PostCards

I would like a branded Post Card that says...

Options:
A... "Thank you for giving of your time to help make this software great. We couldn't do this alone. ~From your friends at HospitalRun."

B... "Thank you for your brain. We couldn't have gotten this far without you. ❤️ HospitalRun"

C... "We know time is important to you. Thanks for giving some to us on this open source project. We couldn't have gotten this far without your help. From all of us @ HospitalRun, THANK YOU!"

@jglovier @tangollama -Opinions or weigh ins here?

@tangollama Do we have some budget to have these printed??

Running list:
Cerner
Epic
AdvancedMD
OpenEMR