At Yelp we are always striving to optimize our user experience so we can help guide our customers to success. We aim to streamline the onboarding process for business owners by centralizing customer products into a single page.

The Challenge

Yelp offers an array of free and paid products that help local businesses connect with consumers. To set up these products on their Yelp page, business owners previously had to navigate through multiple tabs, which negatively impacted product setup rates (roughly 55%) and lowered overall user engagement.

The Setup Flow

To make it easier for business owners to set up their business page and run their advertising campaigns on Yelp, we built a new unified setup flow dedicated to ushering them through the setup process.

So, how was it built?

Ideally, we could’ve just imported all of the setup components into a new single page application. However, all of these components were built differently and lacked consensus among their architecture. So, rather than rebuild all the components the same way, we designed a new system that could accept these different components despite their varying structures.

MVP Component Architecture

When designing the setup flow we wanted to focus on scalability while also maintaining a reasonable project scope. To balance these two priorities we created a plug-and-play schema that each setup component was required to follow in order to be imported into our page. The component for each step must:

1. Read and write all its own data.
2. Require only basic properties such as business ID, CSRF tokens, or the locale of the request.
3. Accept a couple of callback functions that would communicate with our single page application to denote when to save or skip over the current step in the flow.

Once the setup step abides by our requirements we can plug it into our page skeleton. By conforming to this layout, we can easily add new steps to our setup flow as other product teams build new features or update existing ones.

Data Fetching

At Yelp, we have historically used AJAX to fetch data in our frontend components. However, for this project we relied heavily on GraphQL to fetch all the data we needed. GraphQL is a query language that gives clients the power to ask for the exact data they need and nothing more. It also provides a high level of data stewardship that helps developers build robust data models and avoid having to write manual parsing code on the frontend. The smooth developer experience of building with GraphQL and the scope creep that comes from having many AJAX endpoints, made this an easy decision when designing the data fetching for this new system.

Not only did this save us from hooking up our lightweight single page application to clunky frontend services, it also resulted in substantial performance gains. Upon rendering, GraphQL is able to batch together multiple data fetches to make only one request to the server.

Additionally, we cache all the GraphQL calls and the data they return. This increases performance because any re-requested data can be found in the cache and doesn’t have to hit the backend server.

V2 Component Architecture

In order for a setup step component to communicate with the page skeleton, our MVP component architecture relied on callback functions.

For example, when a user saved their newly updated business hours, the setup step component used a callback function called onSuccessfulSave() to inform the page skeleton. When called, the page skeleton marked the current step as complete and moved on to the next step. However, using callbacks was limiting because we had to add a new function for every additional piece of information the page wanted to know about the plugged in component. We quickly realized that this system was not scalable.

To solve this problem, we have begun working on a V2 of the setup flow that shares a context provider between the plugged-in component and the page skeleton. This provides efficient & clean communication between the setup flow and the state of each step e.g. if it’s saving, loading or ran into any network errors. This new version allows the flow to communicate more information to the user about each plugged-in component which will greatly improve the user experience.

Results

After launching our MVP and getting early feedback from A/B testing, we rolled out this new flow to 100% of the businesses that go through our claim process. The setup flow has increased product setup rates by an average of 8% across all the steps with some products seeing a significant boost. For example, our Yelp Connect product saw a 35% increase in its set up rate!

As we continue to improve this system, our focus is on making the setup process efficient in order to help businesses grow and thrive on our platform.

Acknowledgements

This project was a group effort so shoutout to everyone on the Biz Guidance Team: Zoher Zoomkawalla, Arun Bharadwaj, Taras Anatsko, Brenda Kaing, Abdul Lateef Haamid, Heidi Makein, Sophia Chen, Dorothy Cruz Perdomo, and Leon Rudyak. We also had a lot of cross team support so big thank you to everyone else who helped build this new flow!

Back to blog