Expanding Pagoda's SaaS feature set to close a prospective client
Expanding Pagoda's SaaS feature set to close a prospective client
Expanding Pagoda's feature set to close a
new client
Role
Product Designer
Skills
Mobile App Design
Design System Audit
Developer Handoff
Duration
2 months
Role
Product Designer
Duration
2 months
Skills
Mobile App Design
Design System Audit
Developer Handoff
Context
Context
Pagoda is a SaaS salon management startup for owners with no technical expertise. One of the founders was inspired by his mother, a nail salon owner, who ran her business on pen, paper, and phone calls, as existing software didn't match her needs.
Pagoda was talking to a prospective barbershop client about moving onto the platform, but they wanted to keep the functionality of their existing customer-facing booking application.
Pagoda is a SaaS salon management startup for owners with no technical expertise. One of the founders was inspired by his mother, a nail salon owner, who ran her business on pen, paper, and phone calls, as existing software didn't match her needs.
Pagoda was talking to a prospective barbershop client about moving onto the platform, but they wanted to keep the functionality of their existing customer-facing booking application.
Impact
Impact
Early in design, I pitched building it as a white-label app so Pagoda could offer this to all of their clients, and the founders adopted it.
I delivered a full prototype plus appointment lookup and cancellation, which was mentioned as a nice-to-have. I provided three branding versions for the founders to choose how much customization they wanted to allow clients.
The app is currently in development, and the barbershop is already featured as a Pagoda client awaiting migration.
Early in design, I pitched building it as a white-label app so Pagoda could offer this to all of their clients, and the founders adopted it.
I delivered a full prototype plus appointment lookup and cancellation, which was mentioned as a nice-to-have. I provided three branding versions for the founders to choose how much customization they wanted to allow clients.
The app is currently in development, and the barbershop is already featured as a Pagoda client awaiting migration.
For small-business owners that mainstream software failed to consider.
For small-business owners that mainstream software failed to consider.
Problem
Problem
A barbershop would only switch to Pagoda if they offered a customer booking app.
A barbershop would only switch to Pagoda if they offered a customer booking app.
Pagoda only had a manager-facing mobile application and nothing for those clients' customers. Additionally, this particular client ran a barbering school at the same location, which Pagoda saw as a path to future business, since its students would eventually open shops of their own.
Audit
Audit
The old app was quick, only if you knew exactly what you wanted.
The old app was quick, only if you knew exactly what you wanted.
As my first step, I tested the booking flow twice, once as a new user booking an appointment, and once again to explore every option and state.
As my first step, I tested the booking flow twice, once as a new user booking an appointment, and once again to explore every option and state.
Hard to scan services
Hard to scan services
Service lists were organized using drop-down menu selections that you could only pick one of before being able to see what was included.
Service lists were organized using drop-down menu selections that you could only pick one of before being able to see what was included.
Frustrating back buttons
Frustrating back buttons
I expected "back" to take me one screen back but if you used it, it would also clear any selections you'd made.
I expected "back" to take me one screen back but if you used it, it would also clear any selections you'd made.
Excessive taps
Excessive taps
A "Your Order" screen popped up at three separate instances throughout the checkout process, adding multiple, unnecessary steps for review.
A "Your Order" screen popped up at three separate instances throughout the checkout process, adding multiple, unnecessary steps for review.
Design
Design
Building for speed, consistency, and reusability.
Building for speed, consistency, and reusability.
The founders already had speed and consistency in mind. I added a third, reusability, by pitching the app as a white-label template instead of a one-off, and they adopted it. Every design decision below works toward one of these three priorities.
The founders already had speed and consistency in mind. I added a third, reusability, by pitching the app as a white-label template instead of a one-off, and they adopted it. Every design decision below works toward one of these three priorities.
Pills for services
Pills for services
This fixed cluttered service lists and supported multi-select.
The tradeoff was that category title lengths would ideally stay short enough with a character limit.
This fixed cluttered service lists and supported multi-select.
The tradeoff was that category title lengths would ideally stay short enough with a character limit.
Breadcrumbs for navigation
Breadcrumbs for navigation
This fixed both the back button and excessive tap issues by allowing users to make changes at any section quickly.
This reduced taps from 16 in the old app to 7 when going from checkout to making edits across sections.
This fixed both the back button and excessive tap issues by allowing users to make changes at any section quickly.
This reduced taps from 16 in the old app to 7 when going from checkout to making edits across sections.
Lookup and cancellation
Lookup and cancellation
The founders mentioned a "nice-to-have" was letting customers look up and cancel an appointment.
I believed this feature was necessary for customers in case they needed to re-book or made an error. I built this around a 6-digit code that all customers received after booking.
The founders mentioned a "nice-to-have" was letting customers look up and cancel an appointment.
I believed this feature was necessary for customers in case they needed to re-book or made an error. I built this around a 6-digit code that all customers received after booking.
Three branding versions
Three branding versions
I built three prototype versions with: full Pagoda branding, Pagoda fonts with the client's colors, and full client branding.
A decision here would set a precedent for how much customization Pagoda would offer their clients, which mattered now that we were building a white-label template.
I built three prototype versions with: full Pagoda branding, Pagoda fonts with the client's colors, and full client branding.
A decision here would set a precedent for how much customization Pagoda would offer their clients, which mattered now that we were building a white-label template.
Outcome
Outcome
What was initially a one-off app grew to be part of Pagoda's larger SaaS package.
What was initially a one-off app grew to be part of Pagoda's larger SaaS package.
During handoff, I walked the founders through a working Figma prototype using the Pagoda branded version.
The founders approved the full set of designs and chose the mixed-branding version, which I recommended because it keeps standard fonts for accessibility while combining with client colors for identity alignment.
During handoff, I walked the founders through a working Figma prototype using the Pagoda branded version.
The founders approved the full set of designs and chose the mixed-branding version, which I recommended because it keeps standard fonts for accessibility while combining with client colors for identity alignment.
Reflection
Reflection
What I learned
What I learned
New experiences
New experiences
I got two new experiences out of this project: designing for a developer handoff, and working inside an existing design system. I was accountable to Pagoda's requirements and kept in mind the founder/developer who was going to code my designs. I was thoughtful about constraints and clarified up front instead of waiting to discover issues mid-project. When I had to face ambiguity or make assumptions, I kept track of those points so that I could ask later and have ideas prepared.
I got two new experiences out of this project: designing for a developer handoff, and working inside an existing design system. I was accountable to Pagoda's requirements and kept in mind the founder/developer who was going to code my designs. I was thoughtful about constraints and clarified up front instead of waiting to discover issues mid-project. When I had to face ambiguity or make assumptions, I kept track of those points so that I could ask later and have ideas prepared.
Simplicity in design
Simplicity in design
I kept the design simple which left some screens, like the home screen, to potentially feel under-built. The founders were happy and excited about the results, since simplicity was a priority, but I'd want to explore how I could make the designs more inviting while still working as a white-label app.
I kept the design simple which left some screens, like the home screen, to potentially feel under-built. The founders were happy and excited about the results, since simplicity was a priority, but I'd want to explore how I could make the designs more inviting while still working as a white-label app.