Westside Behavioral Care is a Colorado-based company that connects Behavioral Therapists with their clients. They have multiple applications that run their business and I was contacted to redesign some of them. The following case study shows my work for their appointment scheduling app, where most of their revenue comes from.
framework
I was involved in a series of stakeholder interviews in which we discussed the main Key Performance Indicators (KPI’s) of the project. The previous state of Westside Behavioral’s scheduling app was outdated and it presented both therapists and clients with numerous issues that resulted in higher bounce rates and fewer appointments scheduled than expected. I began my design journey by understanding these issues and performing a UX audit.
- Inconsistencies with Westside Behavioral's brand and website design.
- Misplaced Call to Action buttons (CTA)that were not prominent and caused confusion.
- Redundant text and information that did not add value to this particular experience.
- Links to external pages that were not congruent with this experience's design.
- As seen above, the scheduling application did not follow the website’s styling and brand guidelines which made it seem out of place and unrelated to the company’s mission.
define
Westside Behavioral Care's main source of revenue is its scheduling app. It proved to be frustrating for users that were in need of a therapy session because data showed that oftentimes they would leave the site in the middle of creating an appointment. My strategy was:
develop
The whiteboard and I are best friends when it comes to sketching. With it, I can create low fidelity layouts of my design ideas where I can iterate multiple times without spending unnecessary energy inside design software.
- These images are some examples of the multiple hand-drawn sketches that I created prior to jumping on Adobe XD to create more detailed wireframes for review.
Once I had some ideas ready on a whiteboard after conducting my audits and researching the best way to present the necessary information, I proceeded to design low fidelity wireframes on Adobe XD that I could then present to my clients for comments.
Once the wireframe ideas were approved, it was time to add color to the designs and to create high-fidelity mockups that I could then turn into clickable prototypes for review.
There are many different ways in which clients could set up appointments. Some include selecting an appointment based on therapists with a single location, others may include several locations, online appointments only, or in some cases, both online and in person. Each of these scenarios influenced the way in which the schedule needed to be presented.
- In this example, all fields appear disabled until the user completes a specific task. This directs the user’s attention to specific parts of the user flow that then become available as every necessary step is completed.
- For instance, 1. Selecting a Therapist, 2. Selecting an available date and time, 3. Clicking on the now visible “Next” CTA, etc. This helps guide the users to the desired end result, being, successfully scheduling an appointment with Westside Behavioral’s therapists.
- The patient information section is key. With this information, Westside Behavioral gathers patient information that is needed to confirm appointments such as name, payment information, insurance information, and much more. Without this information, the appointments cannot be created; thus, this page was redesigned to follow Luke W's forms bet practices and make this flow intuitive for all users.
- Errors happen, therefore it is important to inform users when an error is present, especially when it relates to their insurance and personal information. The previous design’s error message was repetitive, dispersed all throughout the page, and was not easy to understand.
- The new design includes clear error messages that are located next to the specific fields that need attention. They are also marked in a bright red color along with a ”required field” message so that all users, regardless of disability status, can view the errors and correct them.
Heat Mapping Research suggests that people’s eyes focus on specific areas of their screen while viewing a site, especially on desktop screens. Users tend to follow an F shaped pattern when reading content-heavy screens, such as these forms, and Z patterns wen viewing different layouts that include more imagery than text.
With this in mind, along with the UX audits above, I created a solution that allows for user’s natural eye movements to follow a specific path that makes it as natural as possible for them to complete the desired task of creating an appointment with their desired therapist.
- As users’ eyes move everywhere on the previous design, reading and understanding some of the presented information could unconsciously appear as forced, or unnatural. With the new design and it’s F-shaped pattern, most information follows natural eye movements that allow users to create appointments without having to think about the next steps.
deLiver
Although Adobe XD allows me to share CSS code with Developers, I still created a specific style guide that everyone could follow and use for their own records. This also helped me organize my design ideas, test colors, and create a final design that would work for all scenarios.
- With Adobe XD’s “share” feature, I was able to share entire design documents that would then serve as the blueprint for the creation of this new scheduling app.
- Responsive designs were also included for this project so that this product could be viewed on tablets and mobile devices as well.
