VCA - DR. DASHBOARD
the
PROJECT
Creative Director / Product Designer / Visual Designer
VCA (Animal Hospitals) is a publicly traded, national veterinary company that operates over 800 branded clinics and 60 diagnostic laboratories. Their commercial operations link a network of over 27,000 doctors, technicians, pharmacists, administrators and specialists interacting through a variety of proprietary communications applications and schedule planners. However, with a growing patient load, the increased time doctors and technicians spent tracking their schedules through the various tools significantly impeded their daily tasks.
Conflicts, double-bookings and lost time became a regular occurrence. Productivity dropped as doctors had to constantly sync their schedules and quickly identify their daily tasks.
Research & Discovery
Brand Development
Product Development
Interaction Design
Visual Design
Communications
my
ROLE
My team worked closely with the doctors, technicians and hospital administrators at VCA headquarters in California. We listened to their issues, and collaborated with them to create a solid understanding of their needs. I helped devise workflows, and create mental models of the entire system, and outlined a plan of action to designing a feasible, viable and desirable product.
Adobe XD CC
Adobe Photoshop CC
Adobe Illustrator CC
Microsoft Office 365
Zeplin
Responsibilities: Creative direction for live product support and UX, interface design, wireframing, prototyping and visual design.
?
user
SCENARIOS
We had regular weekly meetings with our stakeholders to discuss their goals at length. However, access to their users was limited due to tight schedules and the in-progress transition to new ownership under the Mars Inc. umbrella. Despite the constraints, our client wanted us to help create the best possible experience for his users, thus providing us with detailed pictures of who we would be serving.
Pete Finchley, 34
Hospital Practice/Operations Manager
Pete prepares scheduling templates to ensure there are enough slots in the week for physicals, surgeries, patient communications and walk-ins. He also ensures that each patient's billing is correct.
Needs an app to oversee day-to-day operations and communicate schedules/tasks of clinic staff and doctors.
“How do I sort and set my schedule for the day?”
Dr. Shelldon, DVM, 41
General Practice Veterinarian
Dr. Shelldon diagnoses health problems, performs diagnostic tests and treats medical illnesses. In addition he communicates/advises patient's owners about the well-being of their pet.
Needs an app to triage his day-to-day operations and sync up his schedule with the clinic manager, staff and other doctors.
“What needs my immediate attention today?”
Jenny Calico, 25
Veterinary Assistant
Jenny is the first line of entry to the whole checkup experience. She meets with patients and their pets and sets the tone for the visit. She also takes vital signs and a medical history.
Needs an app to sync her day-to-day activities to the doctors' schedules and set up follow-up/extended care visits.
“How do I store and revisit open cases?”
user
JOURNEY
After our discovery sessions, we had sufficient information to begin laying out the simple structure of the application in a series of white-board diagrams, work-flows, and, later, Adobe XD wireframes. This allowed us to effortlessly share our thoughts with the client to quickly and frequently elicit feedback - resulting in an undifferentiated iterative process.
scenario
WORKFLOWS
Together with the personas and our whiteboard discovery & strategy session, we devised specific workflow scenarios for the characters to play out. The following 3 scenarios are a compilation of the top wants in a scheduling dashboard.
scenario #1
How do I sort and set my schedule for the day?
The doctor/resource (here after referred to as “user”) needs to identify and address the critical matters of the day – these can be active patient cases, reports, or communications that require an immediate response.
scenario #2
What needs my immediate attention today?
Many patient cases cannot be completed in one visit, so the user needs the capability to navigate and manipulate “unfinished” cases and/or monitor patients that require prolonged care.
scenario #3
How do I store and revisit open cases?
This is a basic triage scenario, where the user accesses all the top level elements of the app – schedule, communications hub, patient tile grid and filters, and watchlist – to arrange their to-dos to their discretion.
detailed
WIREFRAME
Using the workflow scenarios, we refined the application's functionality, optimizing the information architecture layout. From there, we moved on to developing more detailed wireframes to better understand the available space in relation to content. Working in Adobe XD allowed us to iterate rather quickly.
visual
DESIGN
VCA's Woofware had recently received a major OS update and with it a style refresh which I used this as a starting point to branding the application. The style guide was being developed in tandem with our application, thus the client could only provide screenshots along with a small asset library containing a few core elements (font families and color themes). Using these as a foundation, we interpolated much of the app's visual design to what you see in this case study.
base
ELEMENTS
palette
#cccccc
#939393
#495661
#2b333a
#252525
#438cca
#f15c3f
#009a4a
fonts
nav. items
menu item
filter item
Selection Item
Normal
##
Selection Item
Hover
##
Selection Item
Select
##
counter
white backdrop
3
color backdrop
3
*square is at 75% opacity
The application proved very intuitive during user testing in the field and our client was happy with the work our team did. Even though the project encountered a few hurdles in our pipeline related to iterations between the local design and off-site development teams. We used this opportunity to initiate a series of conversations to improve the process. We are looking forward to the next phase of this project and implementing the final style guide from VCA.
key
TAKE-AWAYS
The project was fairly complex with a tight timeline, so quick iterations and twice a week coordination with the client on wireframes were helpful in staying on track.
Transparency between design and development is very important. Regular coordination throughout the life-cycle of the project is necessary to ensure the highest quality product.
The users of our application lived very hectic work lives with packed schedules and are invested in established ways of doing things and change needs to be introduced carefully.
