Context: Interaction Design Practice class, Indiana University
Timeline: 6 weeks
Team: Delia Lynch, Stephanie Runte, Andrew Stamm, Weijia Liu
My roles: UX designer/researcher
Challenge: Redesign the MINDBODY Appointment Widget and Widget Editor in a way that will benefit the user, specifically when thinking about accessibility.
Background
The Interaction Design Practice Course provided us the opportunity to tackle design challenges facing real companies. Designers from MINDBODY created the prompt and specified deliverables, answered our questions, and gave design critiques.
MINDBODY provides appointment scheduling software to a wide variety of businesses, including gyms, hair salons, and dance studios. When considering the needs of the user, MINDBODY must not only take into account the experience of customers scheduling appointments, but also the business owners who edit the scheduling widgets.
Video Demo
Appointment Widget - clickable prototype made in Figma
User Research
User Testing
As accessibility was central to this design challenge, we made a point to invite users with visual impairments to participate in user testing.
When interacting with some websites that used MINDBODY software, one colorblind user remarked that he was completely unable to see which dates were selected for a business that featured more monochromatic branding.
This issue inspired us to consider WCAG guidelines regarding minimum color contrast ratios, not using colors as sole indicators, as well as avoiding red/green combinations for color blindness specifically.
Some participants also remarked that they tend to remember faces over names when it comes to preferred fitness instructors or hair stylists. Therefore, including staff photos in the Appointment Scheduler would significantly reduce that painpoint.
User interviews - Small Business Staff
To better understand the business-side experience, both using the Widget Editor and interacting with customers using the Widget itself, we interviewed the receptionist from a local hair salon. Based on our conversation, we generated two main insights:
1. Making changes in the Widget Editor can be time consuming since there is no way to immediately see the widget while editing (particularly troublesome for less tech-savvy staff).
2. Customers and staff alike tend to prefer the more human-friendly experience of a phone call.
Design
Sketches
Appointment Widget, featuring bolded/circled selected dates, high color contrast, and staff profile pictures
Widget Editor with side-by-side live preview for instant feedback
Appointment Widget - Mobile Mockup
As many users are on the go or multitasking while making appointments, it's essential for the Appointment Widget to be as responsive and mobile-friendly as possible.
Appointment Widget - Clickable Prototype
This clickable prototype made in Figma provides a more dynamic visualization of our design proposal.
Selected dates are bolded and circled using high color-contrast. Available instructors include both a name and face. This feature not only provides a more personal touch, but also helps users who tend to remember faces better than names.
Widget Editor - Live Preview
The changes made in the editor on the left instantly display in the live preview on the right. This streamlines the editing processes by eliminating the need to constantly save and reload to see the changes.
Feedback and Future Considerations
After we presented our solution, the mentors at MINDBODY remarked that our designs were a bit conservative.
Since stakeholders tend to pull back on designs, they recommended we push the envelope more next time.
While we did not have time to come up with more iterations before the end of the course, some more ambitious design solutions might include introducing an interactive chatbot for a more personal scheduling experience, notifying staff if their color scheme is not WCAG compliant, and adding a black/white mode for better visibility.
