Joan Viteri Memorial Clinic
Providing care for underserved populations in Oak Park
My Role
UX Designer & Graphic Designer
Team
8 UX Designers, 11 Developers
Duration
October 2024 -
March 2025
Tools
Figma, Figjam, Adobe Illustrator
CONTEXT: JVMC
What is JVMC?
Joan Viteri Memorial Clinic (JVMC) is a UC Davis School of Medicine Student-Run Clinic that provides free unbiased healthcare services to individuals in the Oak Park area of Sacramento, CA who use intravenous drugs, work in the sex trade, or identify as transgender, as well as to their families. JVMC is serviced by UC Davis undergraduates, medical, PA, NP students and the generosity of physicians.
OUR GOALS
Four Major Pain Points
more accessible website design
improved navigation for user flow
more descriptive text & headers
more cohesive design system
REDESIGN
A Sneak Peak On Our Solution
Focusing on descriptiveness, cohesiveness, organization, and friendliness, we made the appropriate changes to help optimize the user's experience.
Home Page
Original
Redesign
Community Partners Page
Original
Redesign
USABILITY AUDIT
Assessing the current website
We took time to digest the current website and uncover any issues that we can focus on fixing.
Accessibility:
- Some color contrast is not WCAG compliant
- "Get Connected" primary action buttons can be hard to see
Navigation:
- The navigation to get from page to page are three tiny button on the bottom of the page. This could be highlighted more for user ease
Descriptiveness:
- "Get Connected" button could be more descriptive on where it is navigating the user to.
- Some partners don't have subtext explaining what they do
Cohesiveness:
- Some images have a color overlay while others do not
- Color choices could be more cohesive throughout the website,
COMPETITIVE ANALYSIS
Competitors like the American Red Cross effectively tackled JVMC’s key issues.
We conducted competitive analysis with other clinic websites. We focused on comparing them on how well they executed the four pain points we identified earlier to draw inspiration on how they tackled these problems.
USER PERSONAS & USER FLOWS
Empathizing with both Patient and Volunteers for need of improved Descriptiveness and Navigation
User Personas
User Flows
LO-FI & MID-FI WIREFRAMES
Major Changes In The Ideation Process
Taking into consideration of the user personas, I organized the community partner pages in a card layout so that information was easy to find and read. Vital information was organized with easily-identifiable icons and big call-to-action buttons were placed in each card for user ease. I used a carousel at the bottom of the page to include photos that expressed JVMC's widespread impact to express their mission.
USER TESTING
Uncovering More Pain Points
I conducted usability testing with four target users to gain insights about both my individual page and the flow of the website as a whole. I asked them general questions about how the felt about the website and then gave them tasks to do such as “find the mission statement” to help me gain insights on how users moved throughout the website and how they felt about it.
Positive Feedback
generally looks clean
the drop down shadow on the card looks nice
liked how the card alternated photos and text
information was easy to locate
icons were effective for scalability
enjoyed the textual hierarchy, made it scannable
Negative Feedback
unclear about the services offered by each partner
felt that the website looked “oversized” and claustrophobic with how large the was and how small the margins were
website was too 'sterile' and not visually appealing enough
LO-FI & MID-FI WIREFRAMES
Major Changes In The Ideation Process
Using the user feedback, I focused on three ways to improve my design:
Creating subheadings on each card to improve descriptiveness
Increasing margins and text size to reduce feelings of claustrophobia
incorporating colors with rainbow gradient (by client request) to convey missions of creating a safe space for LGBTGQ+ communities and to improve visual appeal
DESIGN SYSTEM
Our Design System Improved The Website's Cohesiveness
This design system was created based on our client's requests for the website's look, with adjustments made by my design team and I.
CUSTOM GRAPHICS
My Graphics improved the website’s welcoming mood
I created vector graphics of a teddy bear with Adobe Illustrator. The stethoscope reinforces the medical theme, and the rainbow heart helps incorporate the design system for cohesiveness and reinforces that the clinic’s target users are underrepresents groups such as LGBTQ groups. This teddy bear was added to the hero image of the landing page.
FINAL DESIGNS
See For Yourself!
Clicking through the pages
Scrolling through Community Partners Page
Carosoul Photo Auto Scroll
REFLECTION
Journey in Review
What to do better next time:
Earlier User Testing: My user testers had a lot of feedback regarding the overall website’s information organization. If I were to do this again, I would have conducted user testing earlier to allow myself enough time ot speak with JVMC and present the user testing feedback to them to ask them if we can make these changes to their original website.
Better Team Communication: Because each of my design team members were responsible for their own individual pages, we had a lot of differing ideas on how to present the information on the page. Even though our pages were cohesive with in and of itself, we had to make later changes to make them cohesive with each other. Proper communication about design decisions could have made our progress more efficient
Accomplishments
This was the very first cross-functional client project I've ever done. I'm extremely proud of my team and I for getting everything done, that being from late night iterations to last minute client requests, we pulled through! I can't thank my team leads enough for teaching and supporting us throughout the whole process and ensuring that we were confident in what we were doing.
