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
Tools: Google Analytics
Using database information from participants who completed past programs, I was able to effectively establish who our users are.
Persona
Tools: Google Analytics / Adobe Illustrator
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
Tools: Adobe Illustrator / Adobe XD / Material Design
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
Tools: Adobe Illustrator / Adobe XD / Material Design
These are some of the inside pages that are common in most of the projects.
OAB CARE Program
Tools: Adobe Illustrator / Adobe Photoshop / Adobe XD / Material Design
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
Tools: Adobe Illustrator / Adobe Photoshop / Adobe XD / Material Design
Below are some additional applications of the template across other programs.
