Designer Onboarding to OpenMRS

Designer Onboarding to OpenMRS

For some context:

  • See "A Visual History of OpenMRS" to better understand our design history. 

  • OpenMRS 3 (aka 3.0, or 3.x) is a large project that:

    • Substantially modernized OpenMRS' frontend technology;

    • redesigned our UX/UI by leveraging Carbon Design; and,

    • brought together many organizations to use both this technology and the shared design framework to share the burden of work and benefit from collaborative processes.

Self-Onboarding Steps

First: Review OpenMRS' key design conventions and assets

  1. Design Patterns:

    1. Read this page on Design Patterns for OpenMRS 3. This will also explain our chosen Design System (Carbon) and show you where and how to access our Style Guide tool (Zeplin). Be sure to review this full page of Design Pattern Documentation

  2. Zeplin Access:

    1. Get access to the OpenMRS Zeplin projects by contacting community@openmrs.org; while you wait, you can use the shared login: u: openmrszeplinreview@gmail.com p: zeplinreview123. Familiarize yourself with some of the existing features so you can see existing workflows that have already been User Tested and are being / have already been built into the Reference Application. 

  3. OpenMRS Styleguide:

    1. Find the OpenMRS styleguide in Zeplin. It's important designers are familiar with this so you can see the existing OMRS Carbon Component inventory, and to be aware of where we have intentionally created custom components. 

  4. Carbon:

    1. OpenMRS 3 uses the open-source project, Carbon Design System. If you're not already familiar with Carbon Design, check out their helpful Carbon Onboarding for Designers. You'll find things like the Carbon Design Kit, grid system, and guidance on how to use them. 

  5. Design Stack:

    1. Note: so long as you can access the patterns in Zeplin, you are welcome to use the tools you are most comfortable with or have to access to.

    2. Design Handover and Styleguide: Zeplin

    3. Designing: Figma

    4. Clickable Mockups: Protopie (but probably anything you're used to can work)

    5. Asynchronous Feedback: Loom Videos has been helpful (free Chrome extension here)

Explore the EMR Demo

  1. Play with the Reference Application! Go to https://o3.openmrs.org   u: admin  p: Admin123 

  2. Tips: Play with the sample patient chart for Agnes Testerson. Try following the steps taken in some of the OpenMRS 3.x demo videos (don't forget to look at patterns like what is used in Patient Lists and Offline Mode)

Explore Videos

Check out the videos below to get a rapid intro to the what, where, and how of OpenMRS v3 design. 

3.x Reference Application Demos:

Introduction to 3.x Design Patterns and Carbon Design

Example: Applying UX Research & Carbon Design with 3.x

Other Design Resources

Past O3 UX Research

Wondering how we did UX Research to establish some of the patterns in O3? See our existing research, process, and findings at UX Research Questions We've Worked Through.

Design Pattern Documentation

Be sure to review this full page of Design Pattern Documentation

Styleguide & Components

Explore the growing OpenMRS 3 Styleguide and Component Library.

Note: This will require an invitation to the OpenMRS Zeplin project. Contact community@openmrs.org; while you wait, you can use the shared login: u: openmrszeplinreview@gmail.com p: zeplinreview123

Design Principles of 3.x

Draft in progress here

 

How to Communicate & Connect

Online

Weekly O3 Squad Call (all-hands)

What: Our weekly 3.x initiative all-hands. Everyone shares their updates, and a short design showcase is shared to keep everyone current on the latest design thinking and user feedback. 

Timing and call link information at https://om.rs/cal

Sample Designs*

  • Note: to see detailed CSS guidance at the Detailed links, you require an invite to our OpenMRS Zeplin project. Just let us know if you require an invite. In the meantime you can review all designs with this account: 

u: openmrszeplinreview@gmail.com

p: zeplinreview123