Case Study

UX Design (UXD)

Tailored Tutoring

Work

UI & UX
Branding
Product
Design
Web Dev
UX Writer
Research

Client

Tailored Tutoring

Role

Jason DeCruz
UX Designer & Researcher

Any professional who has clients knows that one of the most annoying things about the job is scheduling. Clients love to reschedule and you like to accommodate them, but this often means having to play a game of telephone with you in the middle costing your company time, energy, and reputation. But, what if this didn't have to be your responsibility? What if clients could figure out their schedule conflicts on their own?

Tailored Tutoring Logo

My client

My client is a math tutor who owns a business called Tailored Tutoring. Through it, she tutors all sorts of math to anyone but mostly high school students. She loves to tutor, but is often annoyed by her student's periodic scheduling conflicts.

The problem

My client's students call to reschedule to times that conflict with other students.

The price of accomodation

My client's company name is based in the fact that she prides herself as a tutor who tailors herself to her student's needs. When a student asks to reschedule to a time that conflicts with another, she likes to accommodate.

Unfortunately, this entails a long process of contacting, waiting, and an often messy shuffling around of multiple appointments.

The problem illustrated

Problem Statement Illustrated

Users involved

  1. Student #1 (S1) who is asking to reschedule their appointment.

  2. Tailored Tutoring (TT) who is the tutor being asked and my client.

  3. Student #2 (S2) who is the student being asked by TT to change their appointment since S1 is asking to take their appointment time.

Once S1 requests a schedule change, TT then has to reach out to S2 and wait for a response. Since my client and her students communicate over text, this can take some time. Once TT happens to hear back from S2, TT then has to reach out to S1 again which will mean more waiting for my client.

All this back and forth costs my client about 40 minutes, all of which is time costing her business.

Other client frustrations

Beyond the main problem of wasted time, there are other reasons my client wants this problem solved.

Hand holding bomb
1. Her reputation

My client worries about how she appears professionally to her students and their parents when she reschedules with them.

Spider web
2. Client drop-off

There is a domino effect where, if one student goes, they all seem to go. Once one misses an appointment, they may come to the conclusion that they no longer need her services and then tell their friends.

No sign
3. Limits success

Due to the time-consuming and unpredictable nature of this problem and her limited free-time, my client can currently only take so many students at a time.

But, in her own words...

“I'm afraid that my students don't feel free to ask for an appointment change due to the hassle they know it causes me.”
“I wasn’t expecting to have to do this today!”
“How long are they going to take to get back to me?”
“I wonder how appear to my students when I ask them to change their schedule.”
“Once one student misses an appointment because I can't accommodate their needs, they all seem to go.”
“If I didn't have this problem to deal with, I would have the time to grow my business.”

Business requirements

1. Anonymous

It is imperative that students remain anonymous amongst each other. Her business runs best when her students don't know each other by name.

2. Web-based app

This product needs to be designed for both my client and her students, both of whom are PC users with occasional tablet use. A web-based app would give access on all of these evenly.

3. No scheduling

My client loves Google Calendar and I'm not going to take that away from her. Rather than giving her another Google Calendar, I wanted to give her a product that will optimize her experience there.

Research

My first steps were to gain some understanding and empathy for both my client and her students.

Competitive analysis

Competitors

Some of the apps I studied allow clients to interact with them and some are just for the business owner themselves. These were all built to contain schedules, but what I want to build is a product that's narrowly focused on client scheduling conflicts.

What I discovered was that I needed to build a product that's narrowly focused on simplifying communication between my client and her students when there is a scheduling conflict. Since my client liked Google Calendar, I can make a product that simply talks to it in some some way rather than making another Google Calendar. So I started looking at some products that contain scheduling features for business owners.

Some patterns began to emerge

I took some time to understand the system flows of these competitors to see how their solutions could pertain to my client's problems, if at all.

The basic system flows of these competitors
Competitor's system flows

Once the business owners are alerted on the app that a customer (C1) wants to change an appointment time that interferes with the time of another customer (C2), they may choose to reach out to C2.

The business owner is the unfortunate middleman who has to play a game of telephone between two customers. This is because the business owner is the one being notified of the problem first and the one who has to notify C2 last. There is no reason for the business owner to be at both ends of this chain of events.

What if I made a product that took that middleman spot instead of my client?

My solution

TT's new system flow
With S2 being the first decider, the business owner is only alerted if S2 can't make the appointment change

Any request to change an appointment that conflicts with another student will now be sent to S2 to be approved first rather than to TT. This saves TT from having to reach out to S2 herself.

Now, rather than being asked by TT if they would mind moving things around for the sake of their business, S2 is now being asked if they would mind helping out an anonymous fellow student.

Our persona

Claudia Rodriguez
Santa Cruz, CA
16 Yrs
Sophomore in High School

"I feel bad for having to ask to reschedule with my tutor; I know it makes things difficult for her."
Her daily life
  1. Unpredictable

  2. Hectic

  3. Lots of extra-curricular activities

  4. Has next to no free time

Product touchpoints
  1. When she needs to change an appointment time

  2. Checking to see if her schedule change request was approved.

  3. When she needs to check her tutoring schedule.

Her core needs
  1. Know her next appointment.

  2. Being able to change appointment times.

  3. Being able to cancel an appointment.

Her frustrations
  1. Having to wait for her tutor to get back to her.

  2. Feeling bad about inconveniencing her tutor.

Student surveys

I ran a survey using Google Forms and found participants on Facebook, LinkedIn, Reddit, and SurveySwap. I screened out people who have either never hired a business owner before or were not business owners themselves.

Purpose

  1. To learn how often business owners can expect this problem to occur.

  2. To validate my assumption that students are less annoyed when they are asked to change their appointment from a fellow student rather than directly from their tutor.

Results

How often can we expect this problem to occur?

About once per two weeks per student. For a client like mine who has about six students at a time, that is about once every other day.

How much do students mind moving their schedule around for their tutor?

They were a bit annoyed.

On average, they rated their annoyance as a 5/7.

How much do students mind moving their schedule around for fellow students?

Less!

On average, they rated their annoyance as a 3/7.

Student interviews

I took advantage of the fact that my client had real students for me to interview. I interviewed four of them over the phone.

Purpose

  1. To determine how welcome students feel to ask for an appointment change.

  2. To validate my assumption that students are less annoyed when they are asked to change their appointment from a fellow student rather than directly from their tutor.

Results

How bad do students feel when they reach out to change their schedule?

They feel guilty and rated their comfort level 2/7.

They feel irresponsible for asking.

Are they less annoyed when they are asked to change their schedule by a fellow student?

They felt helpful in this case and rated their comfort level 4/7.

"I don't mind helping out other students."

User Stories

From there, I wrote some user stories to gain more empathy for what all parties are going through, understand the problem deeper, and make sure I was considering all possible user needs.

Tailored Tutoring

As an admin, I want to —
  1. Update my business hours

  2. Add a student

  3. Change a student's appointment

  4. Request an appointment

  5. Approve/Deny a student request

  6. Propose new time to student

  7. Request a specific appointment time

As a regular admin, I need to be able to tell the product—
  1. My business days

  2. My business hours

  3. Which business days I would prefer to work if I have open days

  4. An 'overflow day' where student appointments may overflow from those preferred business days

  5. My cancellation policy

  6. My default appointment length

Students

As a student, I want to —
  1. Change an appointment

  2. Cancel an appointment

  3. Request a new appointment

  4. See my upcoming appointments

As a regular student, I want to —
  1. See my appointment history

  2. Quickly choose a time that will work for my tutor without having to think about a time myself

  3. Edit my login information

  4. Edit my notification settings

  5. Edit my email

  6. Edit my phone nymber

User flows

My goal with the user flows was to further understand the specific actions that Tailored Tutoring and its students would both need to take. Just like with everything else, I separated TT's side from the students' side.

Student onboarding

Since the only users of this product will be students of Tailored Tutoring, it makes the most sense for TT to set up their students' accounts. TT would then email each student a secure link to their profile. Once students entered their account, they could then set up their own username and password.

Let's see how the the user flow changes between students.

S1 asking to change an appointment

S1 is the one requesting to change their appointment. Their experience depends on whether their request was approved first by S2 and then by TT.

If it was approved, S1 will then receive a confirmation that their request was accepted. If it wasn't, then they would be prompted to try again with some recommended times that should work based on the settings TT had set up on her side.

S2 receiving a request to change an appointment

S2's user flow is simple since they are now Decider #1 in the chain of command. As such, when they receive a request to change their appointment, they either say yes to a new appointment or say no to keep their old one.

TT responding to requests

When a student asks to change their schedule, there are two scenarios: with a scheduling conflict or without.

With a conflict

The product reaches out to S2 with options if they want to help out. If S2 says yes, they choose a new time and a notification is sent to TT letting them know about the changes.

Without a conflict

The request will go directly to TT as it currently does.

If there is a conflict, my client will have a 'pending' request in her 'requests' section. Once she receives this request, she has a choice: approve or decline both proposals.

If TT approves

A notification is sent to both students with their new appointment times.

If TT declines

The product will write S2 thanking them about the change not being needed with confirmation that their previous appointment still stands. The product will then send a couple of new open appointment times to S1 to avoid another conflict entirely. My client can also manually tell the student a couple of times that will work for her directly if she likes.

Building a system flow

As you may see by now, this is a bit of a complex problem. As such, I decided to create a system flow of my proposed product in order to understand all the moving pieces.

User journeys

I like my highs and lows of my journey maps to be my empathy map. This gives my empathic user quotes the dimension of time which helps me understand where on my user's journey they are having the most issues and in what specific ways.

Current client journey

Currently, my client needs to go through quite a bit in order to be the Tailored Tutor. The majority of the beginning of her journey is a lot of frustration due to wait time and awkward conversations. She only feels better when this chaos begins to be over.

Let's take a look at how I can help.

Optimized client journey

Client Solution

By letting the product take the middleman position for my client, I have eliminated her time-consuming game of telephone. She now only receives requests after both S1 and S2 have agreed to new times.

The product I am making will save my client from having to:

  1. Look up her schedule
  2. Figure out some time to propose to both students
  3. Reaching out to S2
  4. Having to wait for either student to get back to her
  5. Worry about her reputation since the app is reframing the request as an opportunity to help a fellow student.

Student user journeys

The interactions the students would have with the product are:

  1. When they want to change an appointment
  2. When they receive a request to change their appointment
  3. To check to see if their request or acceptance to help was approved
  4. To check their tutoring schedule

Current Student #1 journey

S1 Current UJ

Optimized Student #1 journey

S1 Solution

The product is now the one communicating to both students and rearranging their appointments making for a much faster experience for S1.

Current Student #2 journey

S2 Current UJ

New Student #2 journey

S2 Solution

There is now a bit of a wait time for S2. I argue that this potentially more annoying user journey for S2 is worth the simplification for TT. It would enable her to better accommodate her student's hectic and unpredictable schedules. Plus, based on my interviews and surveys, students would love nothing more than to help their tutor.

This issue is still worth keeping an eye on as we roll out this app with whatever user research platform we decide to use.

Check out the Figma file

Design

What is this product going to look like?
How should content be organized?

Sketches

Crazy 8's method

I started with the student's side first since their functionality is going to be the one that will need the user testing. I will let the student's homepage inform how I design the administrator version for TT.

To dive in sketching, I did a Crazy 8's exercise where I spent exactly one minute on each rectangle designing and redesigning the students' homepage.

In order to choose among them, I remembered my client telling me that the vast majority of appointments students change is their very next one. This told me that the students' very next appointment should be the first thing in the visual hierarchy on the student's homepage.

This led me to the following homepage sketches.

Client's main screen sketches

Client's requests (homepage)
Client's scheduling settings

My client's requests (left) are the homepage because it's the main functionality of the app.

For the scheduling settings (right), she mainly needs to tell the product when she wants to work and when she doesn't, along with her cancellation policy so students can't request changes last-minute.

Client sketches

Students' main screen sketches

Students' homepage
Student changing an appointment

The student's homepage (left) prioritizes their next appointment since that is the appointment they request to change the most. They can tap arrows to the right to see future appointments. These times are optimized for my client based on her schedule.

Once they choose a time in the 'Change to' section, or select 'other' to select their own, they will be greeted with a confirmation page (right) to finalize their request.

Student sketches

Wireframes

Tailored Tutoring

My client needs to be able to see how long her students have been waiting to hear from her. The longest-waiting student will be ordered first and turn red to show my client that there is an urgent matter to which she needs to attend.

Request conflicts are on the left and requests with no conflicts are on the right.

Students

For the students, I decided to nest the alternate appointment times in an 'Edit' button. This was done to simplify the homepage and allow students to quickly notice their very next appointment.

Admin wireframesStudent wireframes

Auto-approve

A game-changing feature

The reason my client wants to reserve final say for appointment changes is because, some weeks, her life can get as unpredictable as her students'. However, some weeks are more predictable and can afford a much simpler user-experience for everyone.

During slower weeks, my client doesn't mind letting her students decide their own schedules as long as it obeys with her cancellation policy and scheduling parameters.

The product can automatically approve requests by relying on my client's scheduling settings with an auto-approve toggle.

Auto-approve off

Auto-approve on

With auto-approve off, my client still needs to give final approval of any schedule changes.

With auto-approve on, my client has nothing to do. When a student requests to change their appointment to another time that doesn't interrupt my client's schedule, it will be approved automatically.

Auto-approve toggle

Design & Branding

The design direction my client chose out of the three I presented was one I called 'Planning for the future'.

Since students felt uncomfortable asking for schedule changes from my client, I felt it important that the branding feel welcome to change.

Tailored Tutoring Moodboard

With this in mind, we landed on a brand personality that has an 'in-progress' kind of feel to remind users to not stress about moving plans around. Things change! Embrace it! Traditional planners have a certain form of child-like creativity to them where you never stress if things don't come out perfect.

To make this connection, the design has a human-hand feel combined with straight-forward typography and colors to help all users use this product quickly. And, if possible, to not stress about it in the process.

Logo & design assets

My client deserves a logo that champions her ability be tailor herself exactly to her student's needs. I felt a bull's-eye was appropriate to symbolize that perfect appointment slot she is always trying to find for her students.

The muted blue-green main brand color provides a balance of serenity and playfulness. This paired well with some inviting secondary colors that can bring some colorful interest to the experience. Many studies show that bright colors help keep teenagers on the page.

Accessibility

One of the first things I do when creating a design system is to do a contrast check with the most challenging-to-read element. This is usually a button.

My buttons use the blue-green brand color background with white type on top that never reduces any further than 22pt on screen or 18pt on mobile.

Color contrast check

Muted colors

To reduce eye strain, I chose colors that were not too bright but were still interesting and inviting.

I also chose an 'almost' black. Pure black is hard on the eyes so I chose a very dark grey that is just short for my copy.

The Prototype

Making this real

The final prototypes

Tailored Tutoring

Students

Admin's prototypeStudent's prototype

User testing with students

Request a change

History & Profile

I got back on ZOOM calls with three of her students I had previously interviewed in order to test the product.

Test scope —
  1. Being able to change an appointment
  2. Being able to cancel an appointment
  3. Being able to see their appointment history
  4. Intuitively understanding where their profile is and what it was for
Test results —
  1. Users understood how to change their appointments. They found it intuitive, quick, and fun.
  2. They had a bit of a hard time finding the cancel button, but that was by design at the request of my client.*
  3. They had no problem finding their appointment history.
  4. They had no problem finding their profile or understanding what it was for.

*My client rather her students reschedule than cancel. I answered this ask by nesting the cancel option in the 'Change' button pop-up window. As my client put it, "cancelling an appointment now seemed to be an appropriate amount of difficult for my students".

S2's experience

What's it like to receive a request to change your appointment?

Receiving a request from another student to change their appointment is a bit of a unique experience. For this reason, I added a section to the user testing that included a prototype of a PC desktop where a notification pops up asking them if they would mind helping out a fellow student by accepting a new appointment time.

Auto-approve toggle
Receiving a request to help out another student

When my client has auto-approve off, an important piece of information to convey to S2 when they accept another appointment time is that that time will still need to be approved by TT. To make it clear, I adding a prominent red, warning box telling S2 that there will be a short waiting for her tutor to confirm.

With it auto-approve on, the change would simply go through as long as the request doesn't violate my client's cancellation policy. S1, S2, and TT will then get final confirmations of new appointments.

Appointment change overview
Appointment change confirmation
Check out S2's experience
The purpose —
  1. Test if they understood that there would be a wait time before their appointment is set in stone.
  2. Test if they intuitively understood why they were being asked to change their appointment.
  3. Test if their experience was simple and clear.
The results —
  1. 3/3 students understood that there was going to be a waiting period for a confirmation notification.
  2. 3/3 students understood that other, anonymous students were asking them for their appointment time and that they could help by choosing another. They were often delighted to help someone out but did appreciate the option to decline if they wanted to keep their appointment.
  3. 3/3 students found this experience clear, quick, and simple.

Qualitative feedback

“It was super easy!”

Ease of Use

6.5/7

“It was really self-explanatory!”
“I like how simple the design was.”

Design

6.5/7

“The design is simple, neat, nice, and pretty.”
“I like the fact that it helps [my tutor].”

Overall experience

6/7

“I think it would be super helpful to have this”

The Benefits

Why should anyone use this product?
How have I helped my client?

Before the product, by client would spend

40 minutes

on this problem.

But with the product...

My client will only spend about

6 minutes

with auto-approve off. That is a

85% work reduction.

Better yet, with auto-approve on, my client spends

no time at all.

Next steps

My client and I are currently embarking on a journey to make this product real and functional. We need to think about background security and app integrations.

  1. Integrate user feedback into product (add 'next appointment' hint text under arrows)

  2. Introduce other tutors to the product.

  3. Use Firebase for background security and Usability Hub to maintain UX user feedback after product launches.

[This app made me feel] relieved because I know that there is a way for me to contact other students easily and quickly if I'm feeling stressed out and I can't do a certain time.

—Tailored Tutoring testing participant

Other Projects