Health Portal,
California College of Arts
.png)
My Role
Interaction Design, Building Visual Design System.
Tools
Figma, Procreate
Duration
Duration
Duration
3 weeks
Team size
Me along with Prof. Shawn Sprockett
Course Project
Form Design Class
Client
California College of Arts
Design Challenge
How might we make Internal Health Portal more intuitive and approachable for students?
The goal of this project was to successfully solve the UX issues on current CCA Health Portal and create design that is more sensitive to user needs.
My intent was to identify the pain - points that students experience while using health portal and building upon them to create a lucid experience.
My personal motivation to work for my CCA community inspired me to take this challenge and improve the experience.
Current health portal @ California college of arts
Feature Highlights
Discover and Schedule Therapy: Users can easily access all the important information on homepage
Schedule Therapy : Users can now schedule the therapy in 3 simple steps, which could save their time.
Manage appointments : Users can manage their appointments in appointment tab. Users can also get the details of all the upcoming and completed sessions
Practice mindfulness: Users can make use of mindfulness resources in mindfulness tab to maintain their healthy lifestyle.
New MENTAL health portal
40%of students
in college experience a significant mental health issue.
67% of people 18 - 24
with anxiety or depression don't seek treatment
Design Process
I made use of IDEO Design process to understand and build upon primary user needs. Since it was just a 3 week project, I divided each week into each stage for Inspiration, Ideation and Implementation.
3 week design Process
Inspiration / Week 1
Ideation / Week 2
Implementation / Week 3
Heuristic analysis,
Think aloud Testing,
Observation,
Conceptualize
Conceptualization,
Paper Prototyping,
User Flows,
Wireframing
Brand Identity,
Illustrations,
High Fidelity Mockup,
Prototyping
Inspiration
What challenges do students face while interacting with the Health Portal and why do they face them.
Lack of visual context
Homepage looks cluttered, thereby maximizing the user's memory load by making elements, actions, and options less visible.
Poor Affordance
Less metaphorical affordance. Therefore, adding more visual cues like icons, could have eased the information retention in users.
Broken navigation
There is lack of call to action on appointment page for users to complete the pre-requisites like filling up the form.
Marking affordance and heuristics
RECOGNITION RATHER THAN RECALL
FLEXIBILITY & EFFICIENCY OF USE
AESTHETIC AND MINIMALISM
Lacks minimalism
Broken navigation
Observation
From usability testing we gained valuable observation about pain points students experience when using the portal.
Students have sometimes struggled with finding therapist of their choice.
New students took around 8 -12 mins to book quick therapy sessions on portal.
Students feel that they lack enough information on portal to make quick decision on seeking college therapist.
Health Portal doesn't bring the same confidence as the institute.
Insight
students seek mental health services at college because they trust the institute's credibility and confidentiality. To integrate the confidence in users we must the visual strategy of digital portal that could evoke positive and pleasant emotions along with ease and comfort.
.png)
.png)
Lacks minimalism
Broken navigation
Ideation
Based on several touch points, I brainstormed over couple of low fidelity wireframes which later I prototyped and tested as well. This re-iterative process helped me build upon the primary needs of the users. Followed by feature building
Information Architecture
While iterating design our final designs, I structured the user journey into a flow chart. Focusing on three main actions, allowing users to schedule appointment with therapist, practice mindfulness habits using portal, and instant emergency support.
View zoomed in version
Initial Design
As a part of re-iterative process I built multiple of visual design layouts, to evaluate the emotions they evoke in terms of each element. This stage helped me understand the visual language and hierarchy. In terms of visual language illustrations and organic style stood out the most, and in terms of visual hierarchy light theme turned out to be most suited.
Visual Iterations
Brand Identity
The brand identity started by setting mood boards, designing layout, finding the right typeface that could incorporate the credibility and easiness at the same time.
Moodboard (Colors)
Designing moodboard that could invoke the feeling of comfort and mindfulness in users retaining CCA's identity.
(Colors)
Using "Z Layout " on homepage to create the order in which a reader is likely to view the page content. And also create an ease of reading.
Typography
Using "Z Layout " on homepage to create the order in which a reader is likely to view the page content. And also create an ease of reading.
Layout
Using "Z Layout " on homepage to create the order in which a reader is likely to view the page content. I designed the layout with uniform gutter.
Final Design Solution
Implementation part started by building brand identity, that retains institute's current identity as student's identity as well. The main features of page included Booking therapy, Seeking mindfulness resources and Maintaining appointment record.
Discover Therapy
.png)
Using Home page
Easing out the process of booking therapy by providing primary CTA on page.
Using Appointment page
Users can also book appointments in appointment page
Schedule Therapy
Fill Dynamic Consent form
This section only appears for new users and auto-fills generic information to enable quick scan.
.png)
Choose the right doctor
Users get to choose their date and time slots to book therapy
.png)
Choose right doctor
Next step is to find the right doctor, system presents the ui cards of all the available doctors.
Select date and time
Get confirmation
Once submitted they get confirmation feedback. This is to ensure users that they have successfully booked the appointment.
Manage Therapy
Manage your appointments
Next step is to find the right doctor, system presents the ui cards of all the available doctors.
Practice mindfulness
Once users submit their request, they get the confirmation feedback. This is to ensure users that they have successfully booked the appointment.
Testing
9/10 users were able to book therapy in less than 3 mins where they used to spend 5 - 10 mins
Users were easily able to navigate through the Health Portal features.
Therapist selection stood out the most to all the users.
Reflections
Reflections
We found that these features were really useful to the user base we tested with. It gave them a sense of trust and assurance at every step of booking appointments with therapist.
Impact
Towards the end of this project — new designs were selected and would be soon incorporated on a portal.