Icons in O3 RefApp epic

Development
,
1

Just a friendly announcement in case you missed me sharing this in recent O3 squad calls: It’s painfully obvious that we need some beautification of the O3 RefApp, and the simplest way to do that is via Icons. We are already seeing that many implementers of O3 are adding their own icons, and O2 organizations report that the icons have been a key part of their user training.

So: Our goal for the O3 RefApp and the O3 development community is:

  • Goal: Clear UI patterns in Zeroheight (om.rs/o3ui) for which icons to use for different common navigation areas (both themes, like Appointments, Billing; and, Clinical Program areas, like MCH, NCD, etc).
  • Epic: [O3-2803] - OpenMRS Issues
  • Sources of Icons: Ideas and requirements from existing useage like in PIH O2 and KEMR and UgEMR O3 instances. Specifically we’re sourcing icons from:
    • Primary Source: Carbon Design icons
    • Secondary Source: Health Icons.org (where we can’t find an appropriate icon on Carbon’s existing library. Note that Paul will need to invest time in adjusting these ones to be “Carbonized” so we do strongly prefer Carbon icons as much as possible.)

Plenty of user testing and feedback seeking to come in future weeks!

Example of our progress thus far (this is just brainstorming):

image
image1920×623 73.5 KB

1 Like
2

I wonder if we’ll want to proactively put these icons in esm-styleguide, perhaps with some kind of bundle-splitting? Or if we should put our custom icons in a new library that isn’t part of esm-framework, but rather allows adding icons as build-time dependencies? @ibacher @dennis

3

I’d probably see how far we can get adding them to the existing SVG sprite setup in the styleguide, maybe with a React component wrapper or something…

2 Likes
4

I would propose that as part of this work stream, we look to release our first CarbonMRS icon pack, with the Carbon Design Icons being a fallback for implementors who cannot find what they need. We may also wish to consider having a method of requesting an icon for future releases of the CarbonMRS icon pack in the Zero Height page we would create to support this.

Here’s a first pass at the categorisation to make it easier for an implementor, developer or designer to find the most appropriate icon:

Patient Management

  • Patient profile: Icon for personal information, medical history.
  • Admissions and discharges: Bed, door icons.
  • Appointments: Calendar, clock icons.

Clinical

  • Triage: Icons for different urgency levels, such as colored alerts.
  • Diagnostic tests: Laboratory flask, X-ray, MRI icons.
  • Treatment plans: Prescription pill, IV drip, surgical tools icons.

Branches and conditions

  • Branches of medicine: Icons for oncology, neurology, cardiology for example.
  • Conditions: HIV, TB, Dementia for example.

Monitoring and alerts

  • Vital Signs Monitoring: Heart rate, blood pressure cuff, thermometer icons.
  • Alerts: Bell for general alerts, exclamation mark for critical alerts.
  • Health trends: Graph or chart icons for tracking patient progress over time.

Medication management

  • Prescription: Pill, prescription pad icons.
  • Pharmacy: Mortar and pestle, pharmacy cross icons.
  • Drug interactions: Warning, handshake (interaction) icons.

Records and documentation

  • Medical records: File, folder icons.
  • Lab results: Test tube, report icons.
  • Consent forms: Signature, document icons.

Communication

  • Internal messaging: Envelope, chat bubble icons.
  • Notifications: Megaphone, bell icons.
  • Video consultations: Video camera, screen icons.

Navigation and tools

  • Dashboard: Home, dashboard panel icons.
  • Settings: Gear, wrench icons.
  • Help and support: Question mark, information (‘i’) icons for tooltips.

Financial and billing

  • Billing: Invoice, credit card icons, cash.
  • Insurance: Shield, briefcase icons.
  • Payments: Cash, wallet, online payment (e.g., mobile) icons - specific icons to cover services such as mPesa

Security

  • Privacy: Lock, eye (visibility) icons.
  • Compliance: Badge, certificate icons.
  • Data security: Firewall, encryption (padlock) icons.

Accessibility and user preferences

  • Text Size: Small ‘A’, large ‘A’ icons.
  • Language: Globe, speech bubble with different language symbols icons.
1 Like
5

I’m going to move forward with the first CarbonMRS Icon pack. I’ll post a link here once it’s released and detail out how we can collaborate together to include new icons for future releases.

CC @grace

1 Like
6

Happy to announce that our new CarbonMRS Icon library is live on Zero Height.

On there you’ll find all the details of past and upcoming releases, how to request or submit a new icon for the library as well as, of course, all the currently released CarbonMRS icons for O3!

As things stand, the icon name is currently the name in the Carbon Design System. We intend to switch the emphasis in the coming weeks to its O3 name with the Carbon name (for those using developer tools) underneath for clearer direction about its intended purpose.

What’s next?

Well, you’ll see in the planned releases at the top of the page what to expect and it includes custom icons for CarbonMRS that are not available in the existing Carbon Design set.

Please let us know what you think. Contributors to this project are of course welcome, so if you have an icon, an idea or a need, let’s chat!

CC @grace

2 Likes