01
Context Overview
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）.
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 & 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.
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.
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
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
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
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 helps to define the user's experience with detail and work flow for multi-roles.
Flow Chart
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.
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.
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:
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.
Ideation, The Way To Brainstorm and Prioritize Functions
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 for page layout and wireframing.
Please check the full version of the Bet-cost Matrix, Affinity Diagram and more analysis by clicking here.
Ideation Methodology
Easily evaluate the value of the features on a 2 by 2 coordination to get the win-win solution.
Bet-cost Matrix
Helping to organize the features, content and actions to build the frame of the feature and the layout of the design.
Information Architecture
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 user focus on the apply, I categorized and reorganize 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.
Internal entraces
-
Subtitle under "My appointment".
-
CTA : Create new appointment button.
-
New appointment Card shortcut.
Typical appointment booking process
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.
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.
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.
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.
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.
Payment
-
Considering different business scenarios by providing 3 different type of payment methods.
-
Saving the credit card and billing information for further convenience.
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.
Other Entrances of appointment booking
User somethimes make appointment by searching specific service, provider or location on the marketing pages. I provided multi-entrances on the most frequent visiting pages.
07
Usability Testing
and Iterations
Evaluate with the Users
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.
Formative Goal
Validate user workflow orientation (observe users workflow, ask participant where do they think they are in the process, what the screen is about, what primary action they think they have to do here);
Validate user’s understanding of represented data visualization (provider’s profile);
Gather general feedback about the user’s interaction with the system.
Summative Goal
Measure user’s satisfaction after the performance of the tasks；
Use 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 mins.
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.
Book appintment task
Success rate: 100%
All users succeeded in booking the appointment task independently with no particular hints from the side of a researcher (Success rate: 100%).
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.
Improvements, Shapes The Final Product
After usability testing, I gianed user's comments and feedbacks about the feature. And repeated the previous steps from problem define 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.
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.
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;
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.
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.
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.