reducing choice overload with an extensible redesign
Redesigning the Theme Chooser Experience
ROLE
Product Design Intern
Project DRI
TIMELINE
June-August 2021
(2 months)
TEAM
Product Manager (CPO)
2 Engineers
I spent the Summer of 2021 as a product design intern leading the theme tools initiative at
Beacons, a mobile-site builder for creators. One thing that makes Beacons so powerful is the how it provides users with the ability to produce beautiful, personalized sites quickly. On this project, I did a re-haul of the theme chooser UI to accommodate the theme library I was building.
BACKGROUND & OVERVIEW
Customizing your Link in Bio
Having a link in your bio is essential for creators, businesses, and organizations with a social media presence. Being able to quickly create a mobile-first site for users to visit through social apps on their phone has become industry standard.
Creators want to be able to generate a link-in-bio page that reflects their personal branding quickly and without much technical knowledge. In order to expedite the process for users, Beacons creates themes that can be applied to any page that suits a variety of aesthetics within a creator niche.
The existing design of the theme chooser was not extensible, and only fit 6 themes. Furthermore, the preview did not accurately reflect what the theme would look like on the creator's page, forcing them to switch back and forth between customizing and previewing their page.
KEY SOLUTIONS
Extensible, personalized experience for every creator
01. VERTICAL THEME PREVIEW
Better representing design options for users
The Expanded theme preview to gives users a better picture of what each theme looks like, making the theme chooser experience more predictable.
02. HORIZONTAL SCROLLING
Conserving vertical space and reducing choice overload
The horizontal scroll limits the number of options a user sees at any given time, allowing them to browse through choices slowly and make the right decision for them.
03. THEME FILTERING
Categorized themes for easy access
Categorized themes allow users to access themes most relevant to them, as quickly as possible. Combined with the horizontal scroll, choice overload is further reduced.
LET'S TALK PROCESS
How do I design a theme library that is both extensible and easy for users to navigate?
RESEARCH
General Audit
To kickoff the design process, I took a look at our existing theme library and identified ways it could be improved.
ORIGINAL DESIGN OF THEME CHOOSER
Two main points of improvement were identified:
01. LOW PREDICTABILITY
Theme previews do not reflect how themes will look on someone's page. Users are unsure of how their page will look once they select a theme, and have to preview their page to see the final result.
02. LACK OF EXTENSIBILITY
Adding themes to this component will not be extensible – there is a possibility that themes will take up the entire first screen as we build up the theme library.
RESEARCH
Competitive Analysis
Before jumping into ideating, I looked into how other website builder platforms presented themes to its users. This allowed me to observe existing design patterns and understand how well – or not – they worked. Findings from each competitor were summarized and synthesized into key insights.
North Star
Consolidating what I learned from the audit, competitive research, and prior user research, I came up with main goals to guide me throughout the design process.
01. NEED FOR SPEED
Convenience and speed is a huge reason users choose Beacons. Help users quickly identify themes that will look good on their page and with their brand.
02. REDUCE CHOICES
Present a minimal amount of choices upfront to reduce decision fatigue, while giving power users the option to explore more themes.
03. EXTENSIBLE DESIGN
Design for the future – we should be able to apply these designs even if our theme library balloons to thousands of themes. This system must be extensible.
VERSION 0
Setting the Foundation
As we were operating on a lean startup methodology, we decided to launch a V0 of the theme chooser and iterate from there.
SOLUTION 01.
Simplicity
To save up on screen real estate, I created a horizontal scrolling theme preview carousel. Depending on need, themes can be swapped in or out of the carousel. On the desktop version, I made use of left and right arrow buttons since horizontal scrolling is not as intuitive as it is on mobile.
SOLUTION 02.
Extensibility
I tackled the extensibility problem by creating an expandable theme viewer dialog. Using the principle of progressive complexity, this allowed users to opt-in to seeing more themes, thus maintaining simplicity and reducing choice overload for users who do not wish to do so.
SOLUTION 03.
Personalization
After discussion with the engineering team about technical limitations regarding the theme previews, I improved the existing design by displaying two link previews and displaying the user's actual profile picture for a special touch. This allows users to fully envision this theme on their page, without having to apply it immediately.
VERSION 1
Streamlining the User Experience
There were still a few issues with the design shipped in Version 0. After the theme library is expanded, theme previews are presented in a long vertical list, bringing us back to the big problem: the design is not extensible enough.
To fix this, I explored different ways we could present themes after the component was expanded. I also decided on categorizing themes based on creator niches that users self-select during onboarding.
EXPLORATION 01.
Scrolling Library
Pros
- Reduces number of rows on screen
- Builds upon scrolling pattern on initial screen
Cons
- Still would require a long list of rows
- Hard to find relevant category
- High number of options displayed at once
EXPLORATION 02.
Dropdown Menu
Pros
- Users can quickly browse through categories
- Reduces number of options upfront
- Can cycle through themes to show on first page
Cons
- Themes not on front page may be ignored
- Every theme must have a category
- Some categories may have less themes vs. others
We decided to move forward with exploration 2 for a couple of reasons. Notably, the long list of categories was disadvantageous for screen real estate and showing all the category options at once added another layer of decisions for users.
Building off of the exploration, I made a few key decisions to mitigate the cons listed above:
01.
Cycle through featured themes on front page.
I added a "featured themes" section on the front page that allows us to spotlight different themes, as well as test hypotheses on which theme styles are more popular
02.
Consolidating theme categories.
For example, Beauty and Fashion creators might have similar aesthetics and thus be attracted to similar themes. This minimized the number of themes we needed to design.
03.
Cross-list themes across different categories.
Allowing themes to be cross-listed reduces theme-making load while giving each theme more visibility. This also ties into the fact that some themes might be suitable for multiple niches!
FINAL DESIGN
A more personalized, efficient, and extensible theme choosing experience.
The new theme chooser design allows users to quickly visualize themes and choose one that best represents them. It also allows the Beacons team to seamlessly add and switch out themes without worrying about overloading the users.
IMPACT
Uptick in accounts using our new themes
Since the launch of the new design and adding new themes, we've seen thousands of users, including huge creators and organizations, use them on their pages. New themes have been added to the library with no pain thanks to the extensible system!
NEXT STEPS
Analyzing theme options & developing new themes
With the extensible theme chooser, we can now test which themes resonate best with our users. The goal has always been to allow users to create a link-in-bio that they are proud to share to the world in the shortest amount of time possible! Testing what themes work and what themes don't allow us to help users get to that point faster and more efficiently.
Learnings & Takeaways
COMMUNICATE WITH ENG
An understanding of limitations in technical bandwidth, and clear expectations set across the board helps ensure a smooth design to dev process. I began speaking with engineers even when this project was only an idea, and it helped me create designs that were ready to go with minimal pushback.
PROGRESSIVE COMPLEXITY
Because of the broad skillset of Beacons' user base, it was important to create a design that catered to two types of users: basic users who simply want a quick and easy to set up page, and power users who want to dive deep into Beacons' features. By allowing users to opt in to seeing more options, we solved this problem. In general, it is a good principle to keep in mind!
THANKS TO
The Beacons team, especially Jesse and Neal for believing in me & trusting me with big things! Wouldn't be where I am today without you all ❤️
