Case Study

Arrow
Client Work

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. When a client asks for an appointment time that interrupts another client, a time-consuming, energy-draining, reputation-risking game of telephone may ensue with the professional in the middle. 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

Tailored Tutoring is my friend's math tutoring company. She came to me with a business problem to solve: her student's surprise scheduling conflicts with other students.

Part 1

The Problem

Students reschedule to times that conflict with other student appointments.

The price of accommodation

My client's company name proudly proclaims that she tailors her schedule 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 long contacting, waiting, and often messy shuffling around multiple appointments.

Those 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 would like it.

Other client frustrations

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

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, she then has to reach out to S1 again, which will mean more waiting for my client.

All this back and forth cost my client's business about 30 minutes.

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 conclude that they no longer need her services and then tell their friends.

No sign
3. Limited 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 my client's 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.
This is one of the biggest challenges of this business, and I never expected it.
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

Students must 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 for my client and her students, both of whom are PC users with occasional tablet use. A web-based app would give access to 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 provide a product to optimize her experience there.

Part 2

The Research

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

Competitive Analysis

I knew I wanted to build an appointment-tracking app of some kind for my client. I wanted to see how other appointment apps perhaps dealt with this problem. I studied the products below.

Competitors

I discovered that I needed to build a narrow product focused on simplifying communication between my client and her students when scheduling conflict. Since my client liked Google Calendar, I can make a product that talks to it via an integrated plugin rather than making another Google Calendar. This solution seemed more straightforward.

Some patterns began to emerge

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

System Flows of My Competitors
Competitor's system flows

Once the business owner is alerted on the app that a customer wants to change an appointment time that interferes with another customer's time, they may choose to reach out to other customers to ask for an appointment change. 

The business owner is the unfortunate middleman who has to play a telephone game between their two customers. The business owner is notified of the problem first and has to inform the second customer.

What I discovered

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?

The Solution

TT's new system flow

Through my new appointment-scheduling product, any request to change an appointment that conflicts with another student will now be sent to S2 to be approved first, saving my client the telephone game. 

With S2 as the first decider, my client is only alerted if S2 can't make the appointment change. This will cut down the amount of time this problem takes by a third, if not more.

She also is no longer the one reaching out to S2. 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. This saves my client from having to inconvenience her students by reframing the request helpfully.

Our Persona

Claudia Rodriguez

Santa Cruz, CA
16 Yrs
Sophomore in High School

Her busy, unpredictable life

She has an unpredictable and hectic schedule due to her extra-curricular activities and a massive amount of homework. Unfortunately, this causes her to have to reschedule with my client about twice a month, and she feels terrible every time she has to do it.

"I feel bad for having to ask to reschedule with my tutor; I know it makes things difficult for her."
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 confirm her appointment.

  2. She was feeling wrong 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 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. She typically has 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 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.

How does a student asking another student to change their schedule effect them.

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

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

User Stories

I wrote some user stories to gain more empathy for what all parties are going through, understand the problem more profound, 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 understand further the specific actions that Tailored Tutoring and its students would 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 Tailored Tutoring students, 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 username and password.

Let's see how 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 were approved, S1 would then receive a confirmation that S1 accepted their request. If it weren't, the product would prompt them to try again with some recommended times that should work based on TT's settings on her side.

S2 receiving a request to change an appointment

S2's user flow is simple since they are now the first decider 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 is either a scheduling conflict with another student or not.

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 can either approve or decline both proposals.

If TT approves

The product sends a notification to both students with their new appointment times.

If TT declines

The product will write S2, thanking them for the change not being needed with confirmation that their previous appointment still stands.

The product will send available appointment times to S1 to avoid another conflict entirely. My client can also manually tell the student a couple of times to work for her directly if she likes.

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 to understand all the moving pieces.

User Journeys

I like my highs and lows of my journey maps to be my empathy map which gives my user quotes the dimension of time, which helps me understand where my user experiences the most friction.

Current client journey

Currently, my client needs to go through quite a bit to be the Tailored Tutor. 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 times to propose to both students
  3. Reaching out to two students
  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.
Check out the Figma file
Part 3

The Design

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

Sketches

Crazy 8's method

I started sketching 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 me how I design the administrator version for TT.

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

I began sketching a 'Crazy 8's' exercise where I spent exactly one minute on each home screen designing and redesigning the students' homepage.

Client's main screen sketches

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

I sketched my clients' homepage (left), which contains all of her students' requests.

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

Client sketches

Students' main screen sketches

Students' homepage
Student changing an appointment

I remembered my client telling me that the vast majority of appointments students change their very next one. This means that the student's next appointment should be prominent on the page as that will most likely be the appointment they will be hoping to change. 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 choose their own, they will be greeted with a confirmation page (right) to finalize their request.

Student sketches

Wireframes

Tailored Tutoring

My client needs 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 disputes are on the right.

Students

I decided to nest the alternate appointment times in an 'Edit' button to simplify the homepage and quickly notice their next appointment for the students.

Admin wireframesStudent wireframes

Auto-Approve

A game-changing feature

Some weeks, my client's life can get as unpredictable as her students' wants to reserve the final say for appointment changes because of her. However, some weeks are more predictable and can afford a much simpler user experience for everyone, as long as it obeys my client's cancellation policy and scheduling parameters. 

In response, I added an auto-approve toggle for these slower, more short weeks. With it on, the product automatically approves requests that obey my client's schedule.

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.

User Flows

I presented three branding directions to my client, and we decided that the direction I called 'In-Progress' was the most appropriate choice.

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

Tailored Tutoring Moodboard

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

The design has a human-hand feel combined with straightforward typography and colors to help users use this product quickly to make this connection. 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 primary brand color provides a balance of serenity and playfulness. These colors paired well with some attractive 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. For this, I usually choose a primary button I know the product will need.

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

I chose colors that were not too bright to reduce eye strain but were still exciting and inviting.

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

Part 4

The Prototype

Making this real

The final prototypes

Tailored Tutoring

Students

TT's prototypeStudent's prototype

User Testing

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 was and its purpose
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, "canceling 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.

Receiving a request to help
Making a choice to help

When my client has auto-approve off, an essential piece of information to convey to S2 when they accept another appointment time will still need to be approved by TT. To clarify, I added 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 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.

request overview
request confirmation
Check out S2's experience
The purpose —
  1. To test if they understood that there would be a wait time before their appointment is set in stone.
  2. To test if they intuitively understood why they were being asked to change their appointment.
  3. To test if their experience was simple and straightforward.
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 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 straightforward.

Student 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.”
Part 5

The Benefits

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

Before the product, by client would spend

30 minutes

on this problem.

But with the product...

My client will only spend about

10 minutes

with auto-approve off. That is a

66.6% work reduction.

Better yet, with auto-approve on, my client spends no time at all.

That is a 100% work reduction.

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. I will be doing the frontend work for the website in HTML, CSS, and JavaScript. Due to the nature of my client's clients, mobile will be second.

  2. Work with a backend developer to finalize site and make sure it is secure.

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

  4. Introduce other tutors to the product.

  5. Look beyond tutoring. Any professional who would like to accommodate their client's scheduling needs can be used this product which needs to remain anonymous amongst each other. These professionals include doctors, lawyers, therapists, personal trainers, and a myriad of others.

[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