Case Study - Education Platform
UVA Patient Education Platform
Resources for patients, family and caregivers.
Project
Responsive website
Timeline
February 2021 - In progress
Client / Business Opportunity
HealthGoals is a pilot project that seeks to expand our service offerings beyond medical education geared towards healthcare professionals. The aim of this initiative is to transfer our expertise in instructional design and medical education to develop patient resources that are relevant, practical and visually effective.
Team
Account Director
Project Manager
Medical Writer
UX Designer
Programmer
My Role
Research, Information Architecture, User Experience, Visual Design
Site Architecture
Tool: Cacoo
Here is the evolution of the site architecture from the first idea and as the components of each section were defined.
This scheme helps the team to visualize the information that users are looking for and to make the planned call to action.
To tackle this task, I divided the entire site into chunks to figure out the relationship between all the sections, starting from Diseases and Conditions to Ask a Doctor, where the user can consult a doctor through the Virtual Visit link.
It is very important to create a solid structure from the beginning, as new content about other diseases and their treatments will be gradually added to the platform without changing its structure.
User Flowchart
Tool: Miro
The flow traces the entry point, exit point and each step the user takes along the HealthGoals platform.
The website proposes different sections in which the user can obtain valuable information about diseases, treatments, and vaccines. By completing the General Health Assessment section, the user is also provided tailored health results and is prompted to consult a doctor, through the Virtual Visit link.
Persona
Tool: Adobe XD
Allow me to introduce Julie Charles. Her user Persona is built on information gathered from various user profiles, and will be used as a reference to reflect on the pain points and aspirations a HealthGoals user may encounter when navigating the interface.
User Journey Map
I have created a user journey map to show the steps our user follow during their experience on the HealthGoals website. The aim is to schematize the different phases of the user experience, from beginning to end.
With this diagram, I aim to map out, each of the steps, interactions, channels, and elements that our customer goes through from one point to another.
Wireframe
Tool: Balsamiq
In the early stages of planning, three content boxes were planned for the homepage; however, in a follow-up meeting it was later decided to opt for two boxes with the option to develop the third at a later date.
My goal with the wireframe is to provide a visual understanding of the HealthGoals website to gain stakeholder and team approval before the creative phase got underway. It is a critical part of the design and information architecture process.
Design Guidelines
The main design challenge is to adapt the content produced by the medical writers to the UVA Health brand style, not only ensuring consistency with the brand colors, typography and use of images, but also ensuring cohesion with the style guide applied across other UVA Health pages.
UI Kit
Tools: Adobe Illustrator / Adobe Photoshop / Adobe XD / Material Design / Atomic Design
I have prepared a repository of reusable symbols that I will use in our interface (buttons, icons, components, etc.) Applying the principle of atomic design, this package of elements will bring speed to my design process, by converting each of the elements into library components. As a result, changes become more streamlined, helping me focus on the solution rather than the visual construction of the elements and eliminating inconsistency as I create more elements.
High Fidelity Prototype
Tools: Adobe Illustrator / Adobe Photoshop / Adobe XD
As this is a project that will be presented as a marketing and sales demonstration tool, high fidelity prototype was used to represent more precise aspects. It serve, for example, to detail the overall interactive process of one or more specific tasks.
Interactive Prototype
Tools: Adobe Illustrator / Adobe Photoshop / Adobe XD / Material Design
I have prepared an interactive prototype to represent more accurate aspects of the user experience.
It serves to see in detail the overall interactive process of a specific task around the interface, from the moment the user logs in to get valuable information about their health until they decide to consult a doctor through the Virtual Visit at a later stage. The interactive prototype gives the perception to users, stakeholders, and team members that they are using the final version of the product.
