Revamping Themes at ReviewTrackers
At ReviewTrackers, we identified a challenge with our one-size-fits-all theme customization, which wasn't meeting the needs of clients with multiple brands.
To address this, we redesigned the feature to allow for more flexible branding across different locations, enhancing user engagement and the overall product value.
my contributions
Design, User Research, and Testing
timeline
May 2023 - October 2023
The team
Myself as Product Designer
1 x Product Manager
5 x Developers
discovery
During the discovery phase, my product manager and I focused on understanding the user pain points. We also looked to understand the business benefits of addressing them. We dug into how these issues impacted not just isolated interactions but the overall customer experience and value derived from the ReviewTrackers platform.
Background
ReviewTrackers (RT) is a reputation management solution designed to help businesses enhance their online presence and improve the customer experience.
One standout feature is the Ask Tool, which allows businesses to gather reviews and feedback through various channels such as emails, texts, web links, and QR codes. These channels lead customers to specific landing pages where they can leave a review or fill out a survey.
Before the recent update, ReviewTrackers offered one-size-fits-all theme customization. Clients could upload their logo and choose their color scheme, which was then applied universally across all customer-facing pages for every location.
While this approach was effective for businesses managing a single brand across multiple locations, it posed a significant hurdle for those overseeing multiple brands.
The core issue for these multi-brand accounts is centered on brand integrity and consumer trust. Pages with inconsistent or unfamiliar branding discourage customer interaction and ultimately hurt the conversion rate.
Therefore, our primary objective for the new feature was to enable users to brand their consumer-facing pages according to each location’s distinct brand guidelines. The aim is to foster a cohesive brand experience, thereby increasing page conversion rates and amplifying the overall value that ReviewTrackers delivers to its clientele.
Ideation
In the ideation phase, I look to deeply understand customer needs and translate them into core product requirements. I also looked to determine where and how this feature would integrate into the overall product ecosystem.
Personas
To kick things off, I dug into our existing customer interview notes to uncover not just what our users wanted but why they wanted it. Understanding the 'why' was crucial for developing a feature that solved a real need.
To dive even deeper into user requirements, I analyzed the variety of branding across our customer base. This led me to classify our customers into three distinct categories: single-brand, multi-brand, and hybrid accounts. With these personas in mind, I aimed to create a feature that would be inclusive and meet the diverse needs of these groups.
Single-brand Accounts
These accounts have a single brand across all locations.
I had to ensure users could set a brand theme once and propagate it across all locations instantly.
Multi-brand Accounts
These account oversee multiple, distinct brands across their locations.
I had to ensure users could set a brand theme to each individual location.
Hybrid Accounts
Falling between the two previous categories, these accounts manage a mix of brands across their locations.
I had to ensure users could cluster similar locations together and apply a common branding theme to this group.
Information Architecture
As I began to consider the information architecture of the Themes feature in relation to the greater ReviewTrackers platform, an opportunity presented itself. Initially, the feature was planned to be positioned inside the Ask Tool settings. This was an obvious choice since themes would only impact Ask Tool assets.
However, I soon realized that by positioning the Themes feature within our global app settings, it would allow it to be applied to features beyond just the Ask Tool. This more global placement would not only solve our users' current pain points but also provide a foundation for future customization across other consumer-facing assets within other features of the RT platform.
Feature Architecture
After deciding on the feature's location within the app, I turned my focus to the design of the actual feature. The objective was straightforward: make it easy for all types of accounts—single-brand, multi-brand, and hybrid—to customize their consumer-facing pages effortlessly.
To do this, I treated themes like objects that housed various theme properties. Users could create multiple themes and populate them with relevant branding details like logos and color schemes. These themes could then be assigned to specific locations, a set of locations, or all locations. When applied, the consumer-facing pages would automatically inherit the branding elements defined in these themes.
This architecture ensured that whether our users were managing a single brand or multiple brands across different locations, customizing their consumer-facing assets was simple and efficient.
Design
The design process usually starts with some initial brainstorming and wire-framing in FigJam but swiftly transitions to working in high-fidelity, thanks to our comprehensive design system that enables rapid ideation.
Working in high fidelity streamlines communication with my product team and other internal stakeholders, allowing for quick and effective feedback on designs that already feel familiar to them.
Early Designs
To start exploring visual design concepts, I started by creating wireframes in FigJam amongst my ideation notes. While FigJam is excellent for rapid brainstorming and fleshing out ideas, I find that it falls short when sharing these early designs with team members who might not fully grasp the visual intent. Working in low fidelity at this stage allows for quick iteration without getting bogged down by finer design details, setting the stage for a more polished, high-fidelity version down the line.
Themes Placement
The location of the theme feature went through several iterations during the design process. Initially, I considered embedding it in the Ask Tool's customization settings. However, the logistical complexities of theme assignments to different locations prompted a change: I shifted the theme feature to the global settings page.
Once committed to this new placement, the question became where exactly it should reside. While creating a dedicated "Themes" page within the settings was an option, I ultimately decided to integrate it into the existing "Location Settings" page to leverage existing functionality and minimize the scope.
Theme Layout
In evaluating the optimal placement for the themes feature, two primary design architectures were considered: full-page and side-sheet layouts. Although full-page designs provided expansive space, they disrupted user workflow by requiring frequent page changes for theme exploration.
Theme Assignment
When it came to the mechanics of assigning themes to locations, initial designs included a button-triggered modal for theme application. However, this approach expanded the user's mental model and required a context shift, disrupting the overall workflow.
Recognizing that users might frequently apply themes, a dropdown was ultimately selected as the method for theme assignment. This inline interaction keeps the user within the current context, minimizing cognitive load and enhancing the user experience by preventing disruptive navigational shifts.
Delivery
In the delivery phase, I aim to eliminate ambiguity by meticulously defining every interaction and state through comprehensive Figma documentation. Building on my hardware design background, which taught me real-world constraints and empathetic communication, I prioritize designing for development, ensuring seamless handoffs, and fostering open communication with developers.
Design Specifications
In an effort to fully define the design and scope of the feature, I documented the design specifications for every screen and state—ranging from default views to error, loading, and hover states. These specifications also outlined the acceptance criteria for both visual and interaction design, setting the stage for a seamless transition from design to development.
Final Visual Designs
To give a glimpse of what users would eventually interact with, here are some snapshots of the final visual designs.
Locations Table
Themes Gallery View
Themes Creation View
Accessed through either the 'Create Theme' button or by selecting a theme tile, the side sheet is where users can customize their new or existing themes. This interface allows users to efficiently select colors, adjust text headers, and configure other design elements. The use of the side sheet here helps users edit in context while also being able to quickly explore other themes without jumping around excessively.
User Permissions
In designing the themes feature, user roles and their respective permissions were a focal point for the team and me. We aimed to balance customization capabilities with role-specific access levels.
Managers were given read-only access to themes associated with their locations, while administrators retained exclusive rights to edit and assign themes. This delineation prevented unintended alterations, particularly when themes are shared across multiple locations.
Error prevention
A key element of my design strategy was to proactively address potential edge cases, especially those leading to irreversible actions. In the context of theme management, I implemented safeguards against accidental deletions.
When a user attempted to delete a theme linked to one or more locations, a confirmation modal appeared. This modal served as a momentary pause, allowing users to rethink their actions and thereby reducing the risk of unintentional deletions with significant impact.