Web app for a health institution’s internal system

UX/UI Design

Overview

The client is a health institution that oversees hygiene and health standards in educational institutions (unfortunately, due to NDA, I cannot reveal the name of the institution).

The primary aim of developing the web application is to digitize daily work processes, eliminating the reliance on paper documents for tasks such as hygiene and food inspections. Additionally, the goal is to enhance information accessibility for all relevant employees, enabling them to perform their duties more effectively by preparing yearly plans, conducting various inspections, and efficiently organizing, storing, and reviewing information.

Problem

Agenda needs to provide specialists with a list of scheduled tasks so that they can perform their job correctly and by due date. Tasks should display name of the activity, type of inspection, target group, and scheduled submission date.

User interviews

Specialists constitute the primary user group for the "Agenda" page. Hence, I conducted interviews with them to gain insights into their workflow, tasks, and preferences. I queried them about their current workflow, pain points, challenges, task management preferences, dependencies, and agenda feature preferences.

Highlights from user interviews:

  • Clients currently conduct inspections using paper documents, which they then scan and save in the internal system, "Avilys."
  • Clients expressed a desire to review completed tasks.
  • They emphasised the importance of clearly seeing task deadlines within the system to avoid missing deadlines.

User stories

I crafted user stories to delve into users' perspectives, motivations, and pain points, enhancing our understanding. They facilitated the capture of precise functional and non-functional requirements from the user's viewpoint, effectively communicating them to developer. These user stories significantly aided UX design research by providing a clear roadmap and ensuring alignment between user needs and development efforts.

Harnessing creativity through brainstorming

How might we questions helped transform problems into opportunities and served as a good starting point for brainstorming:

  • How might we enable a specialist to keep track of their tasks?
  • How might we enable a specialist to prioritise their tasks?
  • How might we enable a specialist to review completed tasks?
  • How might we enable a specialist to perform inspections without paper documents?

MVP approach to agenda creation

As the web app is developed as an MVP, the emphasis was on creating an agenda with only the essential features, such as a task list and activity history. I discussed potential features with the developer, considering both effort and impact. Once it was clear what was feasible for the agenda page, I sketched out ideas on paper to explore different design variations.

Design limitations - existing design system elements had to be adapted to enable the developer to code the design as quickly and inexpensively as possible.

Enhancing usability

Specialists reviewed wireframes and provided the following feedback: They would like to have labels next to each piece of information. They also expressed a desire to filter through activity history.

Agenda

Main points:

  • Functionality: When a user submits a task, it disappears from the home page and appears in the activity history with the corresponding status.
  • Based on client's feedback, I added titles to the main text to make it clearer for the user what each piece of information means.
  • Urgent tasks: A task falls under the "Urgent" section if its planned date is this week.

Activity history

Main points:

  • Completed tasks have the following statuses: A task is "On time" if it is completed by the planned date.
  • A task is "Late" if it is submitted after the planned date has passed. A task is marked as "Not submitted" if it was not submitted at all.
  • The client expressed the need to have filters on the "Activity History" page and completed tasks to be non-editable.

Mobile

Main points:

  • Design is responsive and works well in mobile environment
  • Although application is desktop first because system is used primarily at work, it can be adapted to mobile as well.

Lessons learned

  1. The quality of design hinges on the content it presents. When aiming to enhance clarity, content and, in this case, labels are important.
  2. I found out that when I take time to listen and understand, I can come up with better solutions faster.
  3. It's important to consider different ideas because the first one probably won't be the best one.

Ready for another project?

Click the button below to go back.

Go back to home page