Streamlining Appointment Booking for NYC’s Financial Empowerment Center
Streamlining Appointment Booking for NYC’s Financial Empowerment Center
MY ROLE
MY ROLE
Product designer
Product designer
TOOLS
TOOLS
Figma
Figjam
Miro
Figma
Figjam
Miro
TIMELINE
TIMELINE
Aug 2024 - Dec 2024
Aug 2024 - Dec 2024
TEAM
TEAM
4 Product Designers
2 Product Managers
2 Developers
4 Product Designers
2 Product Managers
2 Developers
The Financial Empowerment Center (FEC) at New York City’s Department of Consumer and Worker Protection (DCWP) offers free financial counseling and coaching to all NYC residents, regardless of immigration status.
The Financial Empowerment Center (FEC) at New York City’s Department of Consumer and Worker Protection (DCWP) offers free financial counseling and coaching to all NYC residents, regardless of immigration status.
“I couldn’t tell what to do next—and everything was just… loading.”
“I couldn’t tell what to do next—and everything was just… loading.”
-Appointment Portal User
-Appointment Portal User
Understanding the problem
Understanding the problem
Tripled traffic, but 70% dropped off mid-booking due to unclear flow, slow feedback and poor accessibility.
Tripled traffic, but 70% dropped off mid-booking due to unclear flow, slow feedback and poor accessibility.
Current screens
Current screens
The major problem with current appointment flow
The major problem with current appointment flow
Users must scroll through a long, unfiltered list to find their location.
Users must scroll through a long, unfiltered list to find their location.
After selecting a location, users face a delay before date options appear on the same screen.
After selecting a location, users face a delay before date options appear on the same screen.
After selecting a date, there's another delay before time options load on the same screen.
After selecting a date, there's another delay before time options load on the same screen.
Design opportunity
Design opportunity
How might we simplify the appointment onboarding experience, set clear user expectations, & improve accessibility to reduce drop-offs & drive higher booking completion rates?
How might we simplify the appointment onboarding experience, set clear user expectations, & improve accessibility to reduce drop-offs & drive higher booking completion rates?
Background on this project
Background on this project
Despite 3× traffic, bookings stayed low. We redesigned the flow to simplify steps, clarify expectations, and improve accessibility.
Despite 3× traffic, bookings stayed low. We redesigned the flow to simplify steps, clarify expectations, and improve accessibility.
The NYC Department of Consumer and Worker Protection asked us to redesign the Financial Empowerment Center's appointment portal to improve booking completion rate, user experience and reduce user drop offs.
The NYC Department of Consumer and Worker Protection asked us to redesign the Financial Empowerment Center's appointment portal to improve booking completion rate, user experience and reduce user drop offs.
Our project goal to achieve user needs
Our project goal to achieve user needs
Before
Older users had trouble scrolling all the way down
Unclear CTA
Delayed loading leading to cognitive fatigue
After
Progressive Disclosure
Microinteractions During Loading
Clear Progress Indicators
Hypothesis
Hypothesis
Redesigning the flow into a clear, supportive journey with step indicators, interactive loading, and accessibility for older adults will reduce cognitive load and increase completion rates.
Redesigning the flow into a clear, supportive journey with step indicators, interactive loading, and accessibility for older adults will reduce cognitive load and increase completion rates.
Background research
Background research
Discovering the Why behind the drop offs
Discovering the Why behind the drop offs
8 Stakeholder interviews, workshop & live poll
Need intuitive and simple design that reduces drop offs
Collected User surveys thorugh Googleforms
75% users make appointment through their mobile phones
Benchmarking on Accessible Design based on research
Implementation of accessible design to support a wide range of users
Key findings from the research
Key findings from the research
User feedback revealed three recurring pain points. These insights underscored the need for a more guided, responsive, and accessible experience across all user groups.
User feedback revealed three recurring pain points. These insights underscored the need for a more guided, responsive, and accessible experience across all user groups.
Unclear CTA
Unclear CTA
“I didn’t know what to click to move forward"
“I didn’t know what to click to move forward"
Older users had trouble scrolling all the way down
Older users had trouble scrolling all the way down
“I didn’t even realize I had to scroll—I thought the list just wasn’t loading”
“I didn’t even realize I had to scroll—I thought the list just wasn’t loading”
Delayed loading leading to cognitive fatigue
Delayed loading leading to cognitive fatigue
“It was so slow that I thought the site was broken”
“It was so slow that I thought the site was broken”
First iteration
First iteration
Moderated User Testing
Moderated User Testing
We conducted moderated usability tests with 8+ users, including 50% aged 55+, to gather valuable insights. These insights informed thoughtful design iterations, ensuring the process was more intuitive, accessible, and user-centered.
We conducted moderated usability tests with 8+ users, including 50% aged 55+, to gather valuable insights. These insights informed thoughtful design iterations, ensuring the process was more intuitive, accessible, and user-centered.
Users were able to understand clear progress indication
Users wanted more clear visuals
Simplify ux writing to reduce confusion for non-english speakers
Accessible for elder users instead of endless scrolling
Users feels visually cluttered
Users are confused with “Map View” and “List View”
Users now understand that the page is loading
Users wanted more interactive elements that indicates loading.
Users were confused and impatient due to the lack of loading time indicators.
Final design based on the feedback!
Final design based on the feedback!
Solution for drop-off, delay, and accessibility
Solution for drop-off, delay, and accessibility
Solution 1
Clear progress indicator
Displays which step the user is on and how many steps remain, helping users stay oriented and reducing uncertainty during the booking flow.
Solution 2
Interactive loading page
Designed an engaging loading screen that highlights the benefits of counseling while users wait, turning idle time into a moment of reassurance and value.
Solution 3
Toggle “view map” & “view list”
Added a toggle feature during location selection, allowing users to easily switch between map view and list view based on their preference or accessibility needs.
Solution 1
Clear progress indicator
Displays which step the user is on and how many steps remain, helping users stay oriented and reducing uncertainty during the booking flow.
Solution 2
Interactive loading page
Designed an engaging loading screen that highlights the benefits of counseling while users wait, turning idle time into a moment of reassurance and value.
Solution 3
Toggle “view map” & “view list”
Added a toggle feature during location selection, allowing users to easily switch between map view and list view based on their preference or accessibility needs.
Solution 1
Clear progress indicator
Displays which step the user is on and how many steps remain, helping users stay oriented and reducing uncertainty during the booking flow.
Solution 2
Interactive loading page
Designed an engaging loading screen that highlights counseling benefits and shows estimated wait time, turning idle moments into reassurance and value.
Solution 3
Toggle “view map” & “view list”
Added a toggle feature during location selection, allowing users to easily switch between map view and list view based on their preference or accessibility needs.
Design system & accessibility
Design system & accessibility
As part of our design system and accessibility efforts, we followed the Bootstrap framework to ensure smooth developer handoff and maintain consistent UI patterns. We ensured WCAG 2.1 AA compliance across all screens to support accessible interactions for users of varying abilities. Typography and button sizes were refined for better legibility, particularly on mobile devices and for older adults. Additionally, we optimized UX writing to deliver clear, concise messaging that resonates with diverse user groups, including non-native English speakers.
As part of our design system and accessibility efforts, we followed the Bootstrap framework to ensure smooth developer handoff and maintain consistent UI patterns. We ensured WCAG 2.1 AA compliance across all screens to support accessible interactions for users of varying abilities. Typography and button sizes were refined for better legibility, particularly on mobile devices and for older adults. Additionally, we optimized UX writing to deliver clear, concise messaging that resonates with diverse user groups, including non-native English speakers.
Impact
Impact
Positive Client Feedback!
Positive Client Feedback!
We received enthusiastic and positive feedback during the final presentation, which highlighted the design’s intuitive navigation, simplicity, and effectiveness in addressing previously overlooked challenges. The client was particularly impressed with our detail-oriented approach and efficient execution, expressing excitement about implementing the design. Our clients not only plan to implement our design solutions to the financial counseling scheduler but also intend to apply this approach to other scheduling processes across their entire services.
We received enthusiastic and positive feedback during the final presentation, which highlighted the design’s intuitive navigation, simplicity, and effectiveness in addressing previously overlooked challenges. The client was particularly impressed with our detail-oriented approach and efficient execution, expressing excitement about implementing the design. Our clients not only plan to implement our design solutions to the financial counseling scheduler but also intend to apply this approach to other scheduling processes across their entire services.
“Excellent work! Very thoughtful approach to every aspect of the portal ”
-Vilda Vera, Commissioner
“We’re definitely applying this design to all our other appointment tools”
-Elina Tatis, Assistant Director at FEC
Lessons learnt
Lessons learnt
Reflection & Takeaways
Reflection & Takeaways
Designing for public-facing services requires more than clean UI—it demands trust, clarity, and cultural inclusivity. By reframing the booking flow as an onboarding experience, we helped reduce uncertainty and empowered diverse users to take action confidently.
Designing for public-facing services requires more than clean UI—it demands trust, clarity, and cultural inclusivity. By reframing the booking flow as an onboarding experience, we helped reduce uncertainty and empowered diverse users to take action confidently.
More Projects
