Browse Spaces Page Redesign

Helping new users find and join relevant spaces more quickly

Overview

This is a project that I worked on as a full-time product designer at Amplitude. The main goal is to make our browse spaces page more searchable and browse-able for users so they can more easily find and join the spaces that are most relevant to them.

Team

1 product designer (me!)
1 senior PM
1 engineer

Duration

3 weeks

Overall Process

01 Context & Goal

In 2021, Our team started to rethink about how we can better help users structure and organize their Amplitude data. In Amplitude, one of the feature we offer is called “spaces” - think about Google Drive, a space is basically a huge folder that users use to store all data/metrics related to e.g. a single feature. Now that we are revamping our spaces model, we expect people to be joining more spaces and creating more spaces in Amplitude. As we roll out the new designs, one question arouse:

"How can we make the browse spaces page more searchable and browse-able for our users?"

browse spaces page : before

02 End Result

Ability to perform spaces related actions more efficiently.

With the new browse spaces page design, users wouldn't have to click in to a space to leave, star/unstar the space anymore, improving their workflow of joining multiple spaces in fewer clicks and less time.

Search for a space name or a team member.

Users can not only search for a space name in the new experience, but also can search for a team member that they work closely with to see if there are other spaces that are also relevant to them.

Filter on the metadata they care about.

Users can now use the filter feature to further narrow down their search results and get to the spaces they're interested in joining more quickly. Furthermore, archived spaces now are hidden in the filter option so the non-relevant spaces are further de-prioritized.

So, what does my journey look like?

Let's take a look! 👀

03 Explore & Define

Use Case Prioritization

Given that users can visit this page at any time as they are using our product, we want to further define our target audience in order to set a “general direction” as we are making future design proposals. There are two main use cases that this page solve for:

New Amplitude users visiting this page to browse and join more spaces.
Power users visiting this page to manage joined spaces (e.g. star a space, leave a space, etc.)

After aligning with the team, we decided to prioritize the new user experience as it’s the primary use case of this page.

Mini Brainstorm

In order to make the page a valuable asset for our users, the first question that came to mind was: “Is this page truly providing users the correct information to help them make a decision on which space to join?” In order to figure it out, I used our product to pull out a list of users who had joined 5+ spaces in the last 30 days and sent them a very short email asking them what types of metadata would be most useful to them. Unfortunately, after follow ups, only 2 users got back to me, but I didn’t stop there. Given that this is a problem area that our team and the Customer Success team have a lot of past insights of, I organized a mini brainstorming exercise to ask my colleagues to rate the metadata that they deem as important for our users. Despite everyone has different opinions, after synthesizing the results, I made the decision to change "the description, # of members, contributors" to "last modified {{viewed}} date, # of content, contributors, # of members".

me nudging the team to fill out the brainstorm spreadsheet

brainstorm spreadsheet

Now you're probably like, "well, that sounds pretty easy, what's about this project that's so special?". As it turned out:

This is a huge step in my career because this is the first time I've pushed back on strong opinions and advocated for my belief.

So what happened? 😳

04 Re-align

The struggle

Having spent 2 weeks doing initial exploration and defining the initial ideas and goals (and juggling on other projects), when I presented my ideas to the team, I could definitely sensed the doubt in the room. The strong opinions were mainly:

“I’m not convinced of getting rid of the description. I think it’s a very important piece and we should keep it.”

“If we keep description, the design you have now doesn’t look that different from what we currently have, so I’m not sure if we wanna invest in this because I don’t know if the ROI is worth it.”

At that point, I felt frustrated because I don’t know why this project was assigned to me when people had doubts around whether we wanna prioritize and work on this project. The concerns definitely made sense, but for me as a designer, all changes, no matter how small they are, are worth our effort (or at least worth for me to advocate for) as long as it would make our users' life slightly better.

But how can I get people to be on the same page?

Getting buy-ins

At this point, it looks like there are mainly three concerns:

Is description necessary? Should we keep it in the page?
If we wanna keep description, would there be enough ROI for us to modify the current card design?
If there is ROI, how long would it take for eng to implement the changes?

With 1 being the most crucial, I started to do some diggings. Using our own product, I was seeking for quantitative data that answers:

What is the common next step for users who land on that page?
For people who landed on that page for the first time and then joined a space from there for the first time, how often does the space have a description?
for people who landed on that page for the first time and then viewed a space from there for the first time, how often does the space have a description?

After pulling data from Amplitude, I learned that:

For new users, the most common next step after they land on the browse spaces page is to view space (27.23%).
For new users, the conversion rate from viewing the browse spaces page for the first time to directly joining a space w/o description for the first time (i.e. without viewing a space first) is 13.6%. But for them to browse and directly join a space w/ description for the first time, the conversion rate is only 11.9%.
For new users, the conversion rate from viewing the browse spaces page for the first time to viewing a space w/o description for the first time (i.e. without viewing a space first) is 39%. But for them to browse and view a space w/ description for the first time, the conversion rate is only 32.7%.

With that being said, I furthered validated my assumption that surfacing descriptions on the browse spaces page isn’t a crucial driver for conversion. (yay! 🎉) But it probably still wouldn’t be something we wanna prioritize in the short term if it would require tons of eng effort, so what can I do to drive that conversation forward?

In order to get everyone on the same page, I created a doc that listed out three potential directions that the team could move forward with, and met with the main engineer who would be working on this to get a sense of how much engineering effort each option would require. Afterwards, I went back to the team and presented my findings.

doc that I made to get people aligned

And as you can probably imagine, I got everyone on the same page to go with option 3 (changing the card layout and getting rid of the description), the option I originally leaned more towards to!

05 Iterate

Now the hardest part is over, it’s finally time to have some fun! Even though this looks like a tip of the iceberg of our product, there are so many micro-interactions and visual explorations we can do. This is how many times I’ve presented it:

crazy figma sidebar 😵‍💫

visual explorations sample

06 Key Final Frames

Cleaner card design with more relevant metadata.

Filter functionality to help users find the relevant spaces more efficiently.

Clearer indication for different states/types of spaces.

Easier to join/leave, star/unstar a space on hover.

Learnings

People will have strong opinions, but it doesn't mean they'll always be strongly held.

As a junior designer, sometimes I'm hesitant of pushing back when senior people have different opinions as I do - "What if I step on their toes?" Learning how to get buy-ins is a huge lesson for me in this project. Digging through quantitative data, having 1:1s, sharing insights and options with your teammates, there are so many ways to move a project forward and the end result was truly rewarding. Our PM lead told me afterwards: "I do have strong opinions, but that's just me telling you 'prove me wrong'."

You should always, always, always have a clear why.

Frankly, this isn't an ideal process for me to go through. As a junior designer, the project was basically thrown on my laps before everyone was on the same page. Even though we still pulled it through, I communicated my concerns with my manager and PM partner throughout the process and agreed that we should always have a (mini) brief in the future for all sizes of projects we decide to tackle.