Beacons
Designing an extensible theme chooser.
Project Role
Product Design Intern
Project DRI
Timeline
June - August 2021
2 Months
Skills & Tools
UI/UX Design
Competitor Research
Figma
Photoshop
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 rehaul of the theme chooser UI to accommodate the theme library I was building.
👀 At a Glance
01.
Vertical Theme Previews
Expanded theme preview to give users a better picture of what each theme looks like.
02.
Horizontal Scrolling
Horizontal scroll on both desktop and mobile to conserve vertical space.
03.
Theme Filtering
Categorized themes for users to access themes most relevant to them, as quickly as possible.
🤔 The Problem
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.
Points for Improvement
01.
Theme previews do not reflect how themes will look on someone's page.
02.
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.
Help users quickly identify themes that will look good on their page and with their brand.
02.
Present a minimal amount of choices upfront to reduce decision fatigue, while giving power users the option to explore more themes.
03.
Design for the future – we should be able to apply these designs even if our theme library balloons to thousands of themes.
🛠 Version 0
Setting the Foundation
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.

Since horizontal scrolling is not as intuitive on desktops and laptops, I made use of left and right arrow buttons to emphasize that scrolling is available.
SOLUTION 02.
Extensibility
I tackled the extensibility problem by creating an expandable theme viewer dialog. This allowed users to opt-in to seeing more themes, thus maintaining simplicity for users who do not wish to do so.
SOLUTION 03.
Personalization
After discussion with the engineering team about technical limitations for how personalized we can make the theme previews, I decided on including two link previews and displaying the user's actual profile picture for a special touch. The goal for this was to allow users to fully envision this theme on their page, without having to apply it immediately. It also adds a nice touch that users will hopefully be delighted by!
🛠 Version 1
Streamlining the User Experience
There were still a few issues with the design shipped in Version 0. Mainly, 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 the 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
- Allows users to quickly browse through categories
- Reduces number of options upfront
- Can pick and choose what themes to show on first page
Cons
- Themes not on front page may be ignored
- Every theme must have a category
- Categories with less themes may look purposeless
🏁 Final Design
We chose to move forward with the design in exploration 2, and took several steps to resolve the cons listed above.
01.
Cycle through various "Featured Themes" on the front page.
This allows us to spotlight different themes, as well as test hypotheses on which theme styles are more popular.
02.
Minimize the number of themes needed by consolidating categories.
For example, Beauty and Fashion creators might have similar aesthetics and thus be attracted to similar themes.
03.
Allow themes to be cross-listed across different categories.
Reduces theme-making load while giving each theme more visibility.
The final design is live at
Beacons.ai
🤓 Learnings
01.
Communicate with Engineering early on in the design process.
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.
02.
Design with progressive complexity in mind.
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 ❤️
Let's grab some coffee! ☕️
Work
Misc
About
Resume