Close up of mock up on Burpple Beyond's bar tab feature.
Contents
OverviewFinal ExperienceProblemResearchGoalTarget UserInitial ExplorationDesign Solution | 1Design Solution | 2ImpactReflection

Burpple Beyond: Conveniently browsing partner restaurants

Redesigning the listing layout of Burpple Beyond’s partner restaurants for a more straight forward approach of browsing and gathering restaurant details.
Overview

Burpple, a food discovery and review platform, includes a dining subscription called Burpple Beyond. The subscription offers exclusive 1-for-1 deals and percentage discounts at selected partner restaurants on the Burpple app.

Responsibility

I partnered with my product manager and product intern to conduct comprehensive UX research focused on improving the experience of the Beyond subscription on the app. I was also responsible for drafting wireframes, conducting usability testings, and finalizing the design files with the updated design solution for developers.

Team
Ally Tan
Sean Teo
Timeline
Mar - Sept 2023
Role
Product Designer
UX Research

Final Experience

A tab bar for sorting and an improved preview card replaced the current layout of partner restaurants on the app to provide a more convenient way for users to find deals and restaurants.

Impact

The team noticed two impacts upon releasing these updates.
Number one icon.
5% increase in retention rates within 5 months
Within five months, following the updates' release, Burpple Beyond retention rates experienced a 5% increase.
Number two icon.
30% conversion on deal redemptions
It was observed that users accessed deal redemptions more quickly following the updated preview cards. This contributed to a 30% conversion rate for deal redemptions.
How did we get to this solution?
Problem

A not so great search and lack of details.

With the app’s not-so-great search, users are often stuck with finding the best way to browse for options. Additionally, because restaurant details and deals aren't shown directly, users have to spend time searching for them. This can make subscribers feel frustrated and unsatisfied with the subscription’s experience and offerings.
Pinpointing the issues
User journey pin pointing the current pain points on browsing on Burpple Beyond.
Research

We looked into the problem.

We worked with our data analyst, sent out user surveys, and conducted user interviews to understand the problem.
Our objectives when conducting research.
  1. Difference in behavior on users who renew or churn → Can we identify key behavior points from loyal subscribers?
  2. Correlation on app usage and renewals → Does an increase in app usage lead to subscription renewals?
  3. Talking to cancelled users → Why did they cancel their subscription?
We realized our objectives were not the priority and discovered new insights.
Number one icon.
Restaurants don't satisfy user needs.
Users mention they feel like there is a lack of restaurant options or the options don't fit their needs.
Number two icon.
Takes time to find a considerable restaurant.
A lot of consideration is done to find a suitable place: gathering details on restaurants & limitations on a deal.
Design Goal

Browse and gather details

Showcase the range of Burpple Beyond's partner restaurants, providing essential details per restaurant for a browsing-focused experience rather than information gathering.
Exploration

We had a concept in mind.

Our team explored an initial concept before landing upon the current design solution. This initial exploration aided us a lot in terms of really understanding what users look for
Key solution elements
Personalization
Providing suggestions based on the user’s preferences and past browsing experiences (like a ‘for you’ feed).
Browsing options
Pulling different habits of users and introduce them all onto a feed.
Phone mockups on initial exploration.
This wasn’t the solution users were looking for but...
Number one icon.
Personalization is nice but not a must have.
“It’s not like what it being recommended to me is what I want to eat at that moment.”
Number two icon.
Visuals, details, and deals are good to see.
“I like how I’m able to see everything about the restaurant without needing to click in.”
Number three icon.
Preferences are based on restaurants not deals.
“Even if a good deal is being offered, I won’t go if the restaurant doesn’t look nice.”
Layout

Keeping it simple and direct.

Once we got to the root of the problem, I explored how can we translate our user’s needs into a design solution. There were a lot of consideration to keep in mind like engineering limitations and search functionality.
Taking a look at the current design.
Burpple Beyond's previous listing layout.
Number one icon.
Un-functional filters
Users couldn’t depend on using filters since it wasn’t very functional to pull all possible restaurants under a certain category/location to display to users.
Number two icon.
One (small) sort
There is only one component for users to sort the current listing of 600+ partner restaurants...and it’s small to notice.
Number three icon.
Users need to scroll (and scroll) to view options
“Even if a good deal is being offered, I won’t go if the restaurant doesn’t look nice.”
Number four icon.
Vague restaurant details
Very vague details are presented on a restaurant resulting in users having to go in and out of screens to learn more, adding to their browsing time.
The problem in action.
Iterating through sketch.
I thought it was best to explore layout options through sketching before moving on to the final visual design stage on Figma. Multiple ideas were considered and discussed with the team. I am fully aware my sketches are very messy— I’m more of a scribble-anything-down kind of girl.
Sketches of wireframes on possible solutions.
An ah-ha moment during free time.
I’m not afraid to admit I was reaching a dead end for ideas. However, it was through my free-time using a traveling app where I was hit with the ah-ha moment to utilize a tab bar.
Final sketch of design solution.
Translating to screen— adjusting the overall page to incorporate the tabs.
A wireframe was created to depict the overall design changes required to implement the new feature.
Lo-fi wireframes of current and proposed solution.
Number one icon.
Membership details
Reduce membership detail to provide more space. Currently takes up unnecessary space.
Number two icon.
A more universal search placement
Move search and filters into a more universal position. Als meant provide more space for tab bars.
Number three icon.
Tabs bar
Gather partner list to fall within different tabs based on sorting preferences.
Number four icon.
Updated preview cards
Details about partner restaurants and their latest deals seen on an improved card.
Visual Design

Making a user’s browsing time worthwhile.

Preview cards— The essential details.
It was obvious when looking at the current cards it was very vague on providing the desired details users were looking for.Additionally, as much as it was important to include details, it was important to include the deals the restaurant was offering. A dining deal subscription not presenting the deals upfront made no sense. This was the reason users were coming onto the app— it was essential to include it.
Hero image of preview cards.
Iterating— Including all the deals.
During usability testing, users expressed positive sentiments about the updated card design. However, almost all of them mentioned that it seemed pointless to only include one deal when they expected to see all four deals. They felt that if all four deals weren’t displayed, it wouldn’t address the issues of putting in extra effort to learn about a restaurant.
Screenshots of iterations on preview cards.
Down to the details.
The card component was an important (and new) form of organizing information and offerings. I made sure to include specific details within the document design for ease of development.
Design spec of preview cards.
Final Design

Quickly browse and gather details on partner restaurants.

Check out restaurants to eat with all the details and deals in one spot.
Directly switch between your sort preference.
Quickly switch between how you want partner restaurants to be sorted for an efficient viewing of restaurants based on your need.
Hero image of final tab bar.Hi-fi screens of previous and updated design solution in phone mock ups.
Learn about partner restaurants and uncover their latest deals in one listing.
Check out restaurants to eat with all the details and deals right in one spot.
Hero image of final preview card.Hi-fi screens on previous and updated design solution in phone mock ups.
Response

Something good for the users.

A months long work coming to an end. It was quite the journey from start to finish, however, my motivation never dissipated when our users gave us words of encouragement towards the design.
In regards to the tab bar.
Number one icon.
Efficient and convenient
“I like the tabs! I don’t need to be directed a new screen.”
Number two icon.
Variety
“It’s useful to segregate the different restaurants. It helps me learn about new places, before I would have to scroll and scroll until I came upon something new.”
In regards to the cards.
Number one icon.
Encouraged to browse
“Seeing the vibe of the restaurant and the deals makes me more encouraged to check it out. It makes me want to redeem something.”
Number two icon.
Clean and organized
“A more clean and straightforward design.”
Reflection

Fin

With this being one of the biggest projects our team worked on, there were some learnings and challenges I gained and I hope to apply to my projects later on.
Challenges
Number one icon.
Limited engineering resources
There was limited engineering resources so a lot of designs had to be within the bandwidth of the engineers we were working with - but this was a fun challenge to exercise how far we can do to change the UI.
Number two icon.
Stakeholder management
Development was constantly delayed due to changes in prioritization for engineers to work on. Our team had to emphasize the long-run impact this could have on the company to send off the design solutions into development.
Learnings
Number one icon.
Getting insights from users
This was where I became more comfortable in conducting user interviews and usability testings as well as uncovering a user’s true sentiments towards the design solutions.
Number two icon.
Defending my designs
I learned the importance of fighting for design decisions not based on personal intuition but by utilizing the data and insights our team took the time to find— this made me enjoy the design process that comes with product design.
Contact
Email↗LinkedIn↗
© Orlie Suverza Baek 2024