Case Study - Master Template

Master Template for Personal Practice Assessment Programs

Project

Desktop and mobile responsive platform

Timeline

February 2020 - July 2021

Internal Project

This project arises from the need to optimize and accelerate the production process of web-based medical education programs that share a similar structure.

Team

Director Business Technologies

Project Manager

UX Designer

Analyst Developer
Programmer

My Role

Research, Information Architecture, User Experience, Visual Design

About

Personal practice assessment (PPA) programs are an opportunity for physicians to reflect on their practice and identify opportunities for improved patient care. These programs often have complex structures, requiring participants to complete different sequential steps before completing the program. Once completed, participants are provided an individualized report, comparing their results to the national aggregated data from their peers.

My Contribution

As the sole person on the team responsible for the production of program interfaces, this personal initiative stemmed from my desire to streamline the workflow process and optimize our procedures.
I developed a master template comprising each type of page and section typically developed in PPA programs to help organize the structure of these websites. Doing so would allow me to focus on the visual design of the program's brand.

Design Challenges

This project had two major challenges:
1) applying the user-centered design process and, 2) understanding the user's needs. As a first step, I had to collect all user information, analyze the data, and present the results in the form of user profiles to the stakeholders. I then created two site structures, in order to define the design.

Research

Using database information from participants who completed past programs, I was able to effectively establish who our users are.

Persona

Through accurate date and targeted questions to stakeholders, I sought to gain a deeper understanding of the users by defining two personas. In addition to defining gender, population or age data, it was also key to identify  the technology used to interact with the interface. In conclusion, the data shows that our users have an intermediate level of technology usage and that less than 6% use tablets, which led me to focus on the desktop and mobile versions.

User Flowchart

Tools: Miro

My intention is to define the path users must follow to complete the program to the end.

To achieve this goal, a new help window with a live chat was implemented to assist users at the time of registration. 

This change in the first program implemented allowed us to help 22 participants who otherwise would have to ask for help by e-mail or would not have been able to continue to the next stage of the program, which is one of the main reasons why participants lose interest or drop out of the program.

Site Architecture

Tools: Cacoo

Since a structure was already established from previous projects, the components or sections to be created for future projects were easier to define using this model.

UI Kit

I developed many of the elements of the UI Kit at the same time as the template.
The idea was to have a starting point, without having to design each element and detail from scratch. Doing so would also allow me to easily edit and adapt these elements to the particularities of each program.

Master Template Main Pages

These are some of the inside pages that are common in most of the projects. 

OAB CARE Program

The example below illustrates a customized version of the template, which has been adapted to the colors and branding of the program.

Other Template Applications

Below are some additional applications of the template across other programs.