/
Beautiful + Configurable Login Page

Beautiful + Configurable Login Page

4 Must-Do’s

1. Problem Description: Have you clearly defined the user problem(s) you intend to solve, and what value this creates? Write down a story, user insight, or quote about this problem (this is important because (1) this will motivate your team, and (2) without this your problem might not actually be a big problem for the users themselves).
2. User Stories: Have you clearly written at least 3 user stories and use cases? 
3. Market Analysis: Have you surveyed what the market is doing here (e.g. comparison to other EMRs, or paper approaches; and don’t forget about learning from historic/existing OMRS instances)? Have you written down any possible gaps in your understanding of your users or their workflows? Have you reviewed the topic in FHIR to see what requirements or fields the global community references? (Eg if working on insurance, should look here)
4. Technical Considerations & Dependencies: Have you outlined what you need from cross-functional areas for success of the feature? E.g. do you need the platform to support a new API call? Have you explained how you’ve addressed dev concerns, such as designs that may not be feasible, or will be extra time-intensive to implement? 

Optional/Encouraged

Sketches: Have you added a drawing or description of how the feature could work to solve the problem at hand? (Pictures of sketches are ok!) 
Project Management: Have you created the Epic and JIRA tasks so you can share work clearly? Roll-out plan: Do you have an idea whether this will be an experiment, gradual roll out, and when? Have you added this to the timeline view? Have you planned how you will promote and/or work with communications folks in order to help this feature reach the widest audience and have the biggest impact it can?

Later but should do

QA Plan: Have you mentioned the plan for QA, such as how you will discover and address edge cases? Does your team/squad have a plan for automated tests to be added to new components (unit tests) or workflows (e2e tests)?
Safety & Tech Risks: Is there any reason you could regret rolling out this feature? (e.g. possible patient harm, heavy tech debt like introducing an unsupported library) Have you thought through the risks for this particular solution? And, how to reduce/address those? 

This checklist was inspired by this article. Additional Business Analyst Resources here.

Status: In Progress

Technical Complexity: Easy

Summary:

  • The current O3 Login page is nice and clean, but very simple.

  • Numerous implementers are manually customizing their login page to show an image on the left or right.

  • We should make the O3 EMR Login page easy to configure with beautiful images and/or announcements.

Examples:

image-20250915-060320.png

 

1. Problem

Currently, we make it easy for Implementers to change the look/feel of their OpenMRS system because the Logo and colors can be changed with simple configuration. However, we have noticed a trend: many Implementers customize their OpenMRS distribution’s login screen beyond the basic white labelling:

image-20250915-064843.png
The current simple O3 EMR login screen on the left, compared to TaifaCare/KenyaEMR and UgandaEMR on the right. Similar vertical-split-designs have been noticed in previous NigeriaMRS and EGPAF distributions.

In order to make these changes, Implementers have to make hard-coded changes. Let’s make it easier for Implementers to have a beautiful login page they can be proud of!

User Stories

As an OpenMRS Implementer:

  • Images: I want the login page to look exciting and have the kinds of images or branding that my stakeholders (e.g. end-users, Ministry of Health) get excited about, so that they are more supportive of the system. For example: A regional image can make a county/provincial office feel more bought-in/ownership of a system (such as the Kenya EMR example, where the use of a Lake/Boat picture for the Kisumu County Government’s distribution makes sense because that area is famous for it’s big lake).

  • “Powered by”/Supported by: I need it to be easy to add or change the names/brands that are supporting us.

  • Announcements: I want an easy way to share recent news/announcements that people will notice. For example: We noticed that some implementers will have a rotating images; some are plain / inspiring, while some have simple text announcing expected downtimes or exciting feature additions.

  • Changes: I want it to be easy for me to change the image(s) on our login screen, since partner branding or announcements could change regularly.

  • Tablet / Responsive: Vertical split screens should default their focus only on the login box when on tablet, so that it does not become hard to see or enter login information while using tablets.

Technical Considerations & Dependencies

Should be configuration-driven, ideally in same place that the login Logo is currently configurable.

 

  • Should have a simple way to configure things like:

    • Whether or not you want to use vertical split screen.

      • Ideally it would be possible to have a fade-in setting so that implementers can achieve either the obvious split screen (like the KenyaEMR example) or the less obvious right/left difference (like the UgandaEMR example).

    • Whether it’s 1 image or multiple that rotate through something like a “carousel-indicator”

    • Show messages like planned downtime (It would be good to have a note in the code where the config happens that cautions devs to “be thoughtful about messages here, since anyone can see these messages without logging in.”)

    • Responsiveness: Please remember - Vertical split screens should default their focus only on the login box when on tablet, so that it does not become hard to see or enter login information while using tablets.

    • Time Expiration: Nice-to-Have / Bonus: Images or announcements with a time expiration (e.g. a text note or image that says “Planned downtime for Nov 23, 2024”) should ideally have an encoded expiration, so that the image or announcement stops showing up automatically when the image/announcement is no longer relevant. This matters because so many sites don’t update automatically through a live internet connection, so some messages or images could be super old, which makes the system look less reliable.