Redesigning Banfield’s
digital client dashboard
experience app.
View prototype
Overview
The redesign of Banfield’s petware solved many problems that had manifested over the years. It aimed to modernize and streamline the user interface by implementing Banfield’s first design system, Panacea, built with progressive web applications.
MyDash was one of the first products to adopt the new framework and helped influence Banfield’s products’ future direction.
My Role
Lead designer
UX/UI designer
Interaction designer
Prototype
Product
Desktop
Tablet
Mobile
Team
Suha Ardahan
Prasad Yeluru
Nicole Wyatt
Year
2021-2022
Problem
Our team identified 3 primary problems with the old applications.
1. Dated
Petware lacked modern design principles and visually looked dated and out of touch with modern software.
2. Complex
People mentioned the app being very complex and cumbersome to understand making it difficult to search and find information easy.
3. Cluttered
People felt the app was cluttered and overwhelming. This impeded on doctors to check vital information in an easy and intuitive way.
Opportunity
How might we make
Petware modern, easy,
and efficient?
Goal
We converted key problems into opportunities to solve during the redesign.
Dated
Modern
The user interface of the app should be visually refreshed and use the new Banfield design system, built on modern progressive web applications.
Complex
Easy
The app should be easy to use and navigate. Providing informative copy and digestable content to inform users.
Cluttered
Efficient
The redesign should make key features easier to find and use, remove underperforming features, and ensure we show the right content to users across Banfield’s products’.
Design System Integration
The backbone of the redesign was based on Banfield’s new design system, Panacea. The new design system was developed as part of a larger vision to ensure visual consistency, legibility, and scalability across all platforms.
Design Iterations
The redesign went through many rounds of iterations through feedback loops with domain teams before we had a shippable MVP.
Modern Flow
During the design process, we had to take a step back. As we started to build out more screens, we were overwhelmed by how many applications the doctors had to utilize on a daily basis. The existing wireframes we received were not satisfactory to base our designs on. To move forward we had to understand the functionality of the application, I took it upon myself to modernize the user flow to be easy, intuitive, and efficient.
A snapshot of the user flow diagram that became a key piece of documentation going forward
Concept Generation
Sketching our concepts from our flow diagram generated many different ideas. Our goal was to create a visually modern user interface with an informative interaction behavior to bring delight and value to the user experience.
Low-fidelity Wires
We wanted to test the overall layout and feel of the dashboard and test our assumptions based on user testing. We used a low-fidelity prototype to quickly gain feedback of the problem areas that needed improvements. This enabled me and the team to eliminate many usability issues that otherwise would only surface in the UI and development stage and therefore, saved alot of design and engineering time.
Usability Testing
We created a scorecard to visualize where people got stuck or had issues within the dashboard experience.
Key outcomes from tests
1. Users need the ability to quickly understand the information and proceed to the next task
2. The users wanted the ability to personalize and control notifications as needed
3. The ability to quickly scan content and understand task, less reading
Feedback Incorporation
We resolved key areas of validation by incorportationg feedback guided interactions to further inform the users of their next tasks and enhanced user interface components that are clear and easy to read.
Card Style Layout Patterns
Cards work well with responsive design. Since each card is self-sufficient, their placement can be rearranged to fit any screen size or accomodate any layout. We developed some standard layout guidelines to help designers implement designs effectively.
Tile + Content
Do align Tile cards and Content cards vertically and continue standard spacing along horizontal alignment.
Flex Column
Do align Profile cards vertically for an intuitive scroll experience to see more cards beyond the fold of the page. Profile cards should adhere to the standard spacing from Design system specifications.
2 x 4 Layout
Do center the content cards for a more user focused experience. Use two side columns to use as support for center content information and navigation.
Profile Grid
Do use Profile Cards to align with timeslot displayed on the grid and use standard spacing from Design system specifications.
Final Design
We modernized the user interface to be easy, informative, and efficient.
Modern Components
As the sole designer on this effort, I audited the usage of the card component internally, across Banfield’s domain, and externally to understand the components industry standard usage. Taking those insights & considerations I applied usability methods and interactive logic for the use of cards within the application.
Modern UX meets Modern IX
We developed our interactions with considerations of the Five Dimensions, (1D Words, 2D Visual representation, 3D Physical objects/space, 4D Time, and 5D Behavior). The transition between screens was designed to suggest hierarchy of layout and create a sense of progression from a successful state and retrogression from an error state.
A Unified Experience
We created a unified design language that interfaced patient’s and doctor’s with an intuitive UI pattern experience across desktop, tablet, and mobile devices.
What’s new?
MyDash is a new dashboard experience that surfaces all relevant information in a way that is easy to digest and visualize with live detailed information so Doctors’ can access information they need at their fingertips.
Dashboard Overview
Information from a quick glance for the task at hand. The dashboard highlights relevant information for quick decision making and access.
Guided Experience
Introducing informative copy as a form of guided narration to inform users of their tasks and eliminate confusion and errors as much as possible.
Visual Perception
A refreshed visual information processing approach to aid visual connections between information and patients.
Intuitive Patterns
Objectively easier to use and navigate. Modern UX patterns that are consistent, easily understandable, and easily recognizable.
Results
100+
Mockups and
Screens
3
Months to
ship MVP
Reflection
Trial & Error
Throughout the design process we encountered many trial and error situations that resulted to an idea that solves the problem in a more effective, more desirable, more elegant way than we ever thought possible.
Overcommunicate
Before user research and creating pixels, we fostered strong communication with the team to initialize a thorough design communication and collaboration among the organisation at an individual level, team level and also product level. Keeping everyone on the same page.
The power of why
Thinking critically is often overlooked. Throughout the project, I learned to think about the “why” behind every decision throughout the design process. This allowed me to frame my deliverables with a clear context to present to stakeholders.
Accessibility
I learned to be critical in addressing accessibility standards throughout the redesign. In the future, I would like to expand my knowledge more on accessibility.
View prototype
Previous project
Arrow down
Arrow down