OSF Care-A-Van
Timeline
Goal
Role
January 2023 – May 2023
Create a prototype UI for OSF’s Care-A-Van
UI/UX Designer and Researcher
Overview
This project was the at the center of my advanced web design class at Bradley University. This project was initially intended as a high fidelity, functional iteration for OSF’s Care-A-Van website, but had to be cut short due to time limitations. A compromise was for my team’s Figma prototype to be our end goal, and further development would be conducted by OSF themselves. My job on the team was UX Research and providing minor assistance in UI and UX design. I collaborated extensively with my team to provide OSF with an interactable Figma prototype that could be built off of to fully flesh out their Care-A-Van interface.
The Problem and Solution
OSF’s intention with Care-A-Van was to provide urban areas with limited access to medical services a mobile, medical work station of sorts in a Van. OSF’s vision for accessibility of the service Van was letting users request an appointment to be pulled up to their home, or readily see where the Van is stopping by. To tackle these criteria, my team and I prioritized both a UI that was sleek and simple, and UX that immediately presented the user with what they needed and clearly told them were to go, with as little navigation as possible. Multiple avenues to the same location throughout the website was something my team prioritized heavily.
Timeline
Brainstorming
Journey Mapping
UI Sketching
and Ideating
UX Design
Prototype
Development
UI/UX Finalization
Presentation to
Clients
The Design Process
The Design Process
Journey Map
The Care-A-Van’s target userbase were people with dental health issues who lived too far away from hospitals to seek them out for help. We planned this map out to get a better feeling for their emotional state throughout the process.
User Flow
Using our Journey Map we created a flow meant to encompass every screen we needed for a Figma Prototype. It also doubled as a checklist for when we each completed our respective screens.
Branding Guidelines
During work we noticed that the OSF Healthcare website was very old-fashioned, so for our Figma Prototype we modernized the visual design using a moodboard fashioned from the Website itself thanks to OSF’s Branding Guidelines.
Moodboard
These were the colors, fonts, and style for our UI which was based on the visual style from the branding guidelines
Wireframing
These are some examples of the progression in the UI. We first got a solid idea for the layout of the screens then fleshed it out according to our moodboard.
Final UX Design
Education
This section was what I was in charge of designing when working on the high fidelity prototype. Also featured on this screen are the intended accessibility tools to help users with visual disabilities more effectively navigate the website.
About
This screen is the central page for learning about the OSF Staff, the Care-A-Van, and contacting OSF. It was included to help create a stronger interaction between OSF and users of the website.
Map
This screen immediately shows users the exact location of a Care-A-Van. A map was chosen because the team believed it the most legible and accessible way to convey information
Services
This screen serves as a hub for all of the services that the Care-A-Van provides, and we included multiple interactable elements that linked to the same service form to make finding specific services easier for the user.
OSF Care-A-Van
Timeline
January 2023 – May 2023
Goal
Create a prototype UI for OSF’s Care-A-Van
Role
UI/UX Designer and Researcher
Overview
This project was the at the center of my advanced web design class at Bradley University. This project was initially intended as a high fidelity, functional iteration for OSF’s Care-A-Van website, but had to be cut short due to time limitations. A compromise was for my team’s Figma prototype to be our end goal, and further development would be conducted by OSF themselves. My job on the team was UX Research and providing minor assistance in UI and UX design. I collaborated extensively with my team to provide OSF with an interactable Figma prototype that could be built off of to fully flesh out their Care-A-Van interface.
The Problem and Solution
OSF’s intention with Care-A-Van was to provide urban areas with limited access to medical services a mobile, medical work station of sorts in a Van. OSF’s vision for accessibility of the service Van was letting users request an appointment to be pulled up to their home, or readily see where the Van is stopping by. To tackle these criteria, my team and I prioritized both a UI that was sleek and simple, and UX that immediately presented the user with what they needed and clearly told them were to go, with as little navigation as possible. Multiple avenues to the same location throughout the website was something my team prioritized heavily.
Timeline
1. Brainstorming
2. Journey Mapping
3. UI Sketching and Wireframing
4. UX Design
5. Prototype Development
6. UI/UX Finalization
7. Presentation to Clients
The Design Process
Journey Map
The Care-A-Van’s target userbase were people with dental health issues who lived too far away from hospitals to seek them out for help. We planned this map out to get a better feeling for their emotional state throughout the process.
User Flow
Using our Journey Map we created a flow meant to encompass every screen we needed for a Figma Prototype. It also doubled as a checklist for when we each completed our respective screens.
Branding Guidelines
During work we noticed that the OSF Healthcare website was very old-fashioned, so for our Figma Prototype we modernized the visual design using a moodboard fashioned from the Website itself thanks to OSF’s Branding Guidelines.
Moodboard
These were the colors, fonts, and style for our UI which was based on the visual style from the branding guidelines
Wireframing
These are some examples of the progression in the UI. We first got a solid idea for the layout of the screens then fleshed it out according to our moodboard.
Final UX Design
Education
This section was what I was in charge of designing when working on the high fidelity prototype. Also featured on this screen are the intended accessibility tools to help users with visual disabilities more effectively navigate the website.
About
This screen is the central page for learning about the OSF Staff, the Care-A-Van, and contacting OSF. It was included to help create a stronger interaction between OSF and users of the website.
Map
This screen immediately shows users the exact location of a Care-A-Van. A map was chosen because the team believed it the most legible and accessible way to convey information
Services
This screen serves as a hub for all of the services that the Care-A-Van provides, and we included multiple interactable elements that linked to the same service form to make finding specific services easier for the user.