May 2022 - Feb 2023
Research | UI design | UX writing | Prototyping
.png)
Backdrop is a travel discovery and social media app where people can find and share pretty, interesting and picturesque spaces from all over the world.
Let’s start from the beginning,
what is Collections?
Collections is a feature that allows users to save their favourites backdrops for later. Places uploaded to the app are referred to as backdrops.
It serves as a mood board for planning trips and outings, users can organise their favourite backdrops based on colour, themes, aesthetics, etc.
Collections can be private or made public.
OVERVIEW
In this case study, I will be taking you on a journey, recounting the redesigns and improvements I made to Collections, the impact and what I learned working on this feature.
Here is a list of everything I did on Collections:
- Enabled users to add backdrops to multiple collections.
- Designed Group Collections, a collaborative collection for users to plans trips with friends.
- Designed a section on Explore page for Curated Collections.
- Improved the visibility of public collections to draw users attention to them so they can create and share theirs.
- Designed a comment feature for Group Collections to allow users discuss their travel plans in the app.
PROCESS
To keep this case study concise, I'll explain my process for each improvement and redesign of the Collections feature.
I identified problems and opportunities and conducted user research, including usability testing and interviews.
Based on the research data, I presented my findings & solutions to stakeholders, often suggesting solutions beforehand. These meetings involved C-level executives, engineers, product manager, marketing manager, social media manager, and myself.
We discussed findings, solutions, impact, and cost, reaching conclusions on trade-offs and priorities. I then designed wireframes and hi-fi screens, incorporating team feedback before presenting the final design.
For handoff to the engineering team, I used UI library components, created prototypes, recorded explainer videos on Loom and provided notes on Figma & Notion.
Our social media manager complained that she could not save a backdrop to more than one collection.
I tried saving a backdrop and noticed the button toggles on and off to either save and unsave, which is why she couldn’t save a backdrop to one collection. See the GIF for reference.
I redesigned the flow for saving a backdrop to allow users save a backdrop to more than one collection.
- The save button triggers a popup containing a list of all the user’s collections.
- Each collection has a plus or minus button indicating whether the backdrop has been saved there or not.
- Tapping the plus or minus button on a collection saves or removes it from that particular collection.
- Tapping ‘Done’ completes the action and saves the changes, while ‘Cancel’ reverts the new changes made to the collection.
- Tapping ‘Unsave backdrop’ removes the backdrop from all the collections that it has been saved into and ‘New collection’ begins the flow for creating a new collection to save the backdrop into.
The 2nd week after the implementation of the redesign saw a 33% increase in the average time spent on the app per user.
People go on outings together and group trips as well and the plans for these outings/trips are usually a collective effort so it wasn’t long before I received complaints about users not being able to curate collections with friends.
Not only was the absence of a joint collection affecting user activity negatively, it was also denying the company new users and at worst, it may be costing us the ones we have already.
Complaint from Maya (not user’s real name)
Enable joint collections for group hangouts/trips
Allow users to mention other users in the reviews section of backdrops
Add a comment section group collections to foster collaboration
I called for a meeting with the engineers working on the feature and they let me know that the last 2 solutions could not be implemented yet due to the absence of the engineering foundation required to support them. But it was something they were working towards. I go into detail about it later in this case study.
We settled on the first solution and I designed Group Collections.
- There’s a button at the start of creating a new collection that users can toggle on to make it a group collection.
- When the button is toggled on, an ‘Add friends’ button appears. Tapping it triggers a list of the users’ friends for them to select from. Tapping ‘Done’ saves the selection.
- Next, the name of the collection and selected friends is displayed for users to see and make any final edits. Friends can be removed from the list but not added.
- Tapping ‘Save’ creates a group collection. ‘Suggested backdrops’ prompt users to add backdrops to the collection.
- The number of backdrops and members in the collection is displayed underneath the name of the collection.
- On the Collections page, a group collection is indicated by an icon next to the name of the collection.
To further increase user activity on the app and get them sharing stuff about the app publicly, Backdrop created its own public Collections to appear in users’ feed and on the Explore page.
They were broken down into two specific beats.
- Wanderlust: collections made to appeal to people regardless of their location and driven by specific aesthetics, e.g "Best minimalist spaces.
- City-specific: collections made to appeal to people in specific cities, both visitors and locals, driven by key details, e.g. "Bars that are open late in London".
We had no UI design for collections on the Explore page, so I designed Curated Collections.
We recorded a 14% increase in the average number of daily active users.
Over 50% of collections users created were private. It seemed that it was not clear/obvious to them that public collections were a thing, let alone the requirements to make one public.
Users need to have at least 5 backdrops in their collections to make it public. So until that happens, a user is unlikely to encounter anything relating to public collections.
With minimal changes to the current design of Collections, I designed prompts and popups that:
- Makes users immediately aware that a collection can be public.
- Makes users immediately clear on what it takes to create and share a public collection.
- Changed the CTA from ‘Publish’ to ‘Make public’ so the function of the button is clearer to users.
When a user creates a collection, a prompt immediately appears letting them know that their collection is private and the requirements to make it public.
The next prompt explains how public collections work.
When a user attempts to make a collection with less than 5 backdrops public, a popup appears informing them of the requirements to make it a collection public.
I also included a button to incite them to add more backdrops immediately and a cancel option.
I also designed a notification that users would receive when any of their collections has up to 5 backdrops.
When people go on group trips/outings, they usually do the planning together. I had discussed with a 5 users on how they plan their trips with Backdrop and I discovered that they want to discuss the backdrops they have added or removed from their group collections with their friends as they plan their trips/outings.
There was no provision for that in the app so they resort to other tools.
Complaint from Kwahme (not user’s real name)
I designed a comment section for group collections and where users can talk about their travel plans and mention each other.
The popup informing users of the comment section comes up the first 3 times users open a group collection after the feature has been implemented, this is too ensure that they are made aware of the function.
The fullscreen popup appears only when users opens group collections for the first time. The other two times would be the tool tip prompt.
The first solution I created for adding backdrops to multiple collection conflicted with how saving backdrops worked and with the users’ Liked Backdrops on their profile.
Collections was designed by a different designer and didn’t have proper documentation. I had to understand how the designer intended it to function and the objective for the feature before I addressed any problem or provided a solution.
There was no design system or UI library so I had to create a new component or style for every new feature or improvement that was introduced.
- I discovered that not every problem requires research. Some can easily be discovered by testing within the team but this doesn’t replace usability testing, it is just a faster and cheaper way of identifying simple issue before pushing to production.
- I learned the importance of sharing my solutions with the engineering team and carrying them along with my progress to avoid designing solutions that will eventually be abandoned due to its complexity, cost or feasibility.
- I learned that having proper documentation and a design system or UI library makes work easier and faster.