top of page
Appointment Flow
3.jpg
01

Context Overview

dashboard.png

THE PROBLEM

Delayed updates and manual errors caused by phone calls to book and change appointments bring out management barriers and economic loss.

THE SOLUTION

I designed appointment management features to help users easily booking appointments with simultaneous updates to relevant parties.  Users no longer have to manually update appointment information by relying on error-prone recording methods (like paper/pencil) or utilize extra frustratingly hard-to-use 3rd party applications.

OUTCOME

This feature was released in 2020. I joined the team to build an even greater product and leverage the impact of a bigger platform and fast-growing customer base.

The product achieved a 180% growth in revenue and 0 errors in appointment booking (except for technical issues).

Design Problem
My Role
  • Product strategy, definition, and goal setting

  • Concept validation and research

  • Using Figma to design mockups, iterations, and host design critiques

  • Using Principle to create interactive prototypes for critiques, communication, and user testing

  • Usability testing and user interview sessions

  • The final presentation for MVP buy-in to VP of Design and Design Leadership Team

Collaborator: 
  • Product (PM, PO)

  • Design (Cross-team/product designers, design system designers)

  • Content strategists

  • Research (UX researchers)

  • Engineering (SWEs, IAs)

  • Legal Counsel

  • Customer Support & Experience

02

The Marketing Landscape

and The Challenge

Background

Modern Golf platform was initiated in 2017; the platform has released 3 versions. A new management module resulted in the 3rd version, which includes an online schedule, sales data management, etc. 

Business Goal

Modern Golf aims to increase the overall capacity of the sports business by 20% within 1 year by reducing appointment calls by 40%, reducing the time for 4 times to find a trainer, and call for appointment changing, etc, meanwhile enabling sports club admins and managers to manage club space effectively and eliminating the cases of phone appointment errors.

Challenges that we faced

Unlike any 2C product that is a user-driven product for personal use. On the other hand,  the users of 2B products are more rational; multi-users, such as decision-makers and key stakeholders, will be considered from multiple dimensions, such as ease of use, cost-effectiveness, efficiency improvement, and adaptation to the company's situation, and finally, choose the most suitable product to use. Therefore, more challenges that a designer faces,

multi-roles.png
Multi-Roles & Multi-Functionalities

The platform provides the functions between three parties, the sports club manager, the admin (who belongs to the sports club), and the customer

logics.png
Complex Processes/ Logic

Each party has a different process and logic according to the user's behaviour and workflows. We connected the key touchpoints during flows.

scenarios.png
Different Scenarios

We refined the scenarios into 3 key steps: before the appointment, during the appointment, and after the appointment which helps us to identify the user flows and user's needs.   

03

User's Voices and

The Design Requirement 

Starting with the users' voices of using the last version,

“ I hope a plug-in can auto convert the phone appointments and appointment changes because manually updating causes management errors.”

                                                             - Joe Shuchart, Sales Manager

“ Waiting for the appointment in a queue is a time-consuming experience. There should be an AI supporter to deal with it .”

- Jannet Muchuming, Course Participant

Primary Research

user research.png

8 User Interviews with the customers, sports club admins and managers to frame the user's behaviour and define user's needs​.

8 User Interviews

Usability testing.png

3 User testings to understand the existing problem of the platform and refine the user flow.

5 Usability Testing

23% of the users crave online appointments and self-updating features.

And the facts are the economic loss caused by the untimely information update, and the lack of protection of the appointment, as high as 2.8%.

However,

​Highly Request

not equal.png

User's Needs

What are the users' real needs in the appointment-making process?

04

Defining The End

to End Experience 

​To ensure a comprehensive and seamless product experience, I coined 3 key stages to deconstruct and understand users' needs and pain points for these three main characters: the customer, sports club admin, and manager.  Each step in the user's journey from before the appointment, during the appointment, and after the appointment breaks the whole process into segments which easier to:

  • Break down the steps into the approachable design.

  • Communicate and influence cross-functional stakeholders.

  • Plan engineering sprints.

Secondary Research

flow chart.png

Flow chart helps to define the user's experience with detail and work flow for multi-roles.

​Flow Chart

Value Proposition Canvas.png

To analysis the user's motivation, actions, pain points and pain reliever, according to the given different stages.

Value Proposition Canvas

Multi-roles' Behaviors and Needs

First thing first, figure out user needs. Multi-roles complete their tasks on this product. From the 3 key stages, I created the user flows into design critiques to explore how effective they solved user needs. I also use these flow to identify edge cases early on, to help anticipate any specific design and engineering needs that may arise later on.

Simplified user flow.png

A simplified user flow is taken from an early iteration of the three main characters' relationship

Please check the full version of the user flow by clicking here.

​Key Insights from The User Research

From the three main character's user flows, some portion of the features and tasks are linked relating to at least two roles, which causes different users' needs. We need to consider the functionality comprehensively for different scenarios and use cases. The following refined user's needs gave us insights and benchmarks for the next ideation stage.

multi-role diagram.png

B2C | Client

Customer
The Needs

1. Use the platform for scheduling appointments.
2. Choose the time, date and location of the appointment.
3. Find the specific provider or service.
4. Take payment for the appointment Online.

5. Check the appointment detail.

B2B | Partner

Admin

The Needs

1. Release the provider's availability.
2. Make an appointment for calling customers.
3. Manage appointments and sublocations.
4. Canel and change the schedule.

5. Refund if the appointment canelled.

B2B | Partner
Manager

The Needs

1. Appointment creation and management.
2. Provider and service creation and management.
3. Location and sub-location management.
4. Authorization approval.

5. Revenue management.

In a conclusion, the actions, features and tasks are linked with these three main roles. The outcomes are different from the user's requirements, but the most suitable solution for user's needs at the current stage. From the research, by simply offering an appointment online toolkit is not the answer for user's requests.

We need a linked appointment platform Collaborative and Integrated.

05

Unveil the Costomer's Online Appointment Process

After the deep deconstruction about the collaborative relationship of the customer, admin, and manager, we get the user's needs and key insights from the researches. Due to the NDA and constraints, let me unveil the design process of the customer's online appointment but setting goals and success metrics. The goal of having the new feature is simply the appointment process and eliminating muanual errors, the main success metrics need to complete the appointment booking process easily. I partnered with the PM to unpack the concept:

Simplified user flow.png
How to define a success of my design?

Then I decided to define the success and understand user context at scale before I jumping into designing. I partnered with the PM to unpack the concept of the simple appointment booking process and used this framework to investigate the success metrics. Combining the unvealed user flow with the success metric that benefits the design decisions and deciding the direction of user testing.

successmetric.png

User research revealed 21 product features make value for the users, including customers and admins, but how can we find those that support the business goals, cover their needs, pains, and gains, and enable me to start the design? I prioritized the features by using the Bet-cost Matrix and had a site map to link all the given features with screens, which helps with page layout and wireframing.

Please check the full version of the Bet-cost Matrix, Affinity Diagram and more analysis by clicking here.

Ideation, The Way To Brainstorm and Prioritize Functions

Ideation Methodology

Value Proposition Canvas.png

Easily evaluate the value of the features on a 2 by 2 coordination to get the win-win solution.

Bet-cost Matrix

Modern Golf Platform.jpg
sitemap-icon.png

Helping to organize the features, content and actions to build the frame of the feature and the layout of the design.

Information Architecture

flow chart.png

Measure how to achieve a successful feature by setting fundamental design principles as the guideline of usability testing.

Success Metric

Online Appointment

for the Customer

06

And I started crafting

​For now, I had a general idea of what information I wanted to emphasize, but I didn't have a clear picture of how to integrate them together. To get rid of the overwhelming information and let the user focus on the application, I categorized and reorganized the appointment application steps. On the multi-entry points, I created a relevant enclosure process.

Wireframes, Saving Time To Evaluate Solutions

Starting my designs from lo-fi wireframes helps me to evaluate different solutions with low effort and save time.

Entry Point Explorations

First impressions matter, and with a 2B product, the first impression was how to find the entry point and shortcuts to start their tasks. I explored a number of entry points and shortcuts on the customer's dashboard for the appointment application to attract user's attention.

Customer protal.png

Internal entraces

  • Subtitle under "My appointment".

  • CTA : Create new appointment button.

  • New appointment Card shortcut.

​Typical appointment booking process
step1.png

Sevice Type & Service Duration

  • For potential more services, all types of services are displayed on a scalable scrolling session.

  • The service price will auto-update once the user selected the service duration.

​The system filters the result after the user makes a decision or choice. The typical routine of creating an appointment brings the user several simple steps to finish the task which also serves as the minimum viable feature of an online appointment.

step2.png
stepper.png

Location & Service Provider

  • Provide a service provider's portrait and a brief introduction to assist the user's decision making.

  • An interactive stepper notifies which stage the user at.

step3.png
summarized order.png

Date & Time Picker

  • Select date and time on the calendar view, meanwhile syncing with time filling input fields and dropdown.

  • A service summary content auto-update once any decision is saved.

step4.png

Personal Information & Reminder Setting

  • Setting a timely reminder to manage the user's appointments anytime, anywhere.

  • Designed a warning session to highlight the 24hour cancelling and rescheduling policy.

step5.png

Payment 

  • Considering different business scenarios by providing 3 different type of payment methods.

  • Saving the credit card and billing information for further convenience.

step6.png

Successfully Paid

  • Offering help and support if anything goes wrong.

  • Considering different situation, the receipt can be resend, if the user doesn't receive it.

Mockups.png
Other Entrances of appointment booking

Users sometimes make an appointments by searching for specific services, providers, or locations on the marketing pages. I provided multi-entrances on the most frequent visiting pages.

07

Usability Testing

and Iterations

The best way to evaluate the concept is by watching the target users perform tasks using the prototype as they interact with the real product. The data from the Post-Study Usability questionnaire was collected via Google Forms.

Please check the PSSUQ here.

Evaluate with the Users
formative goal.png
​Formative Goal

Validate user workflow orientation (observe users' workflow, ask participants where they think they are in the process, what the screen is about, and what primary action they think they have to do here);

Validate the user’s understanding of represented data visualization (provider’s profile);

Gather general feedback about the user’s interaction with the system.

formative goal-1.png
Summative Goal

Measure user’s satisfaction after the performance of the tasks;

Use the PSSUQ(Post-study System Usability Questionaire) survey that measures users perceived satisfaction with the product or system;

Measure user success rate.
This rate defines the percentage of tasks that users complete correctly.

Track the task completion time.
Validate if the users can find the target doctor and book an appointment for about 5 minutes.

User Testing Outcomes

The data from the Post-Study Usability questionnaire was collected via Google Forms. Three users were participating in the usability study 1.0. As a single researcher in this study, the data was collected using an online video call, paper notes.

task.png
Book appointment task

Success rate: 100%

All users succeeded in booking the appointment task independently with no particular hints from a researcher (Success rate: 100%).

satisfication.png
Overall User Satisfaction

Success rate: 100%

The data collected from the Post-study usability questionnaire (PSSUQ) shows the overall user satisfaction rate as 100%, which is considered a success of the system, information structure, and interface.

After usability testing, I gained users' comments and feedback about the feature. The previous steps from the problem definition were repeated n to visualize the solutions. However, some of the user's requirements are hard to archive at this stage, the improvements may need to save as the design and tech debt for the further step.

Improvements, Shapes The Final Product
welldone.png
Worked Well

1. Summarized service card provides a good review.

2. Interactive stepper helps the user to go back easily.

3. Showing the service provider's description and the photo makes the customer decide conveniently, especially to group course attendees.

tobeimprove.png
Need to Improve

1. Lack of service description;

2. Service dropdown have not been noticed (100%);

3. Linked users’ profiles user-pics;

4. Appointment status color-coding (100%);

5. Primary search field visibility;

improvement.png
Improvements

1. The services names & prices were separated on marketing pages to improve discoverability.

2. Provider description was added.

3. The primary search field has been moved to the top of the page, as some users could see no hints that the screen is scrollable.

User’s Voices

After testing, we always welcome different users' voices, which helps us define the new synthesizes and improvements. After 3 iterations, we have a final shaped new feature both for the customer, admin and manager. I am proud of what I designed as I gained good feedbacks from the user's side.

“ It is even more convenient than calling for me, I can call and not get through for a very long time, but here, everything is fast.”

- Zeev Kadouvel, Golf Course Participant

“Everything was very easy to catch, even for such a slow-witted person like me ( laughs ).”

- Niano Kudaichi, Golf Club Admin

08

​Work Behind the Screen

​No.1 Design System

System design helps both the designer and engineer to consist of all the components and style and makes the engineer team’s work easier with linked code and APIs. This design component library is the fundamental structure of the product. We were using Material UI as the fundamental library to build our product, which saves time and improves efficiency.

designsystem.png
​No.2 Responsive Design

I set up the responsive design rules with the engineering team before starting the design, the rule contains standard of grid system, layout forms, dimensions, line-height, and spacing, etc. The rule helps the product adopt into multi-devices and multi-screen size.

Grid system.png
​No.3 Iterations

As well as Rome was not built in a day, design solutions can't be built at one time. I have done at least 4 rounds of design iterations, conducted 2 rounds of usability testings, and got feedback from the end users and internal stake holders for iterations. 

​No.4 Collabration

Once getting past " what does the solution look like?", the next big hurdle for the designers to jump through is "how to get it made exactly as it was designed."I will need to go the extra mile to clearly explain UI interactions, responsive layout and different states for use cases. Personally, I used Figma measures to reline my specs, inspect to handoff the figma file in pixel perfection, and a separate file for different form and button states. 

bottom of page