Scaling Ratings and Reviews at Flowbox
The challenge
After the MVP release of Ratings and Reviews, the business aimed to retain customers by addressing their need to boost conversion rates on their online store and enhance product marketing. The challenge was to achieve this goal while ensuring future scalability of our widget solutions.
My role
I led the end-to-end design of the new widget from discovery, scoping, iterative design, testing and prototyping. I also initiated the development of a dedicated widget component library to ensure consistency, scalability and seamless integration across all widgets.
Impact
Team
Arezou Solouki, Product Manager
Marina Martynenko, Frontend Developer
Emma Craig, Frontend Developer
Simon Ottervald, Backend Developer
Ivan Pobeguts, Backend Developer
Omar Bouden, Fullstack Developer
Timeline
2023-2024
Overview
Flowbox is a Swedish B2B SaaS company offering user-generated content (UGC) solutions to brands. With a presence in 40 countries and 850+ brand partnerships, it helps businesses enhance marketing and audience engagement through authentic UGC.
I was one of two designers on the team, leading end-to-end design for four products. I collaborated closely with another designer, product managers, developers, and teams across customer success, support, sales, and marketing.
About Ratings and Reviews
Ratings and Reviews is Flowbox's latest product, enabling clients to collect, moderate, and display consumer testimonials. This user-generated content builds customer trust and boosts conversion rates. After the MVP launch, the business focused on scaling the product and retaining early adopters.
After the initial launch of the MVP, Flowbox was looking to expand the display widgets in Ratings and Reviews to retain our clients.
Discovery
I conducted weekly interviews with early adopters after the MVP launch to gather product discovery insights and understand their experiences using the product.
During these interviews, I found that:
Amplify product awareness
Our clients aimed to increase product awareness, particularly on their home page, to drive conversions.Increase customer trust & satisfaction
They aimed to strengthen brand-customer trust by highlighting key attributes, such as size references and return policies.Faster widget customization
They valued Flowbox's widget customization but wanted a faster workflow.
Analysing product differentiation
I researched key competitors and found that Flowbox stands out with its high widget customization, seamless integration with other Flowbox products, and strong user experience.
So, from these insights, I formulated our HMW statement.
How might we use user feedback to boost product visibility and conversions in our e-commerce clients' online stores?
Amplifying product awareness
Previous widgets targeted customers in the desire stage by focusing on product reviews. Now, we're shifting to increase product awareness on clients' home or checkout pages to engage customers earlier in the funnel.
Setting the scope & product vision
Phase 1: Boost user retention and drive traffic to our customers’ online shops.
Phase 2: Activate the widget to drive more conversion, such as through increased signups and providing links to product & checkout pages.
Phase 3: Expand the widget to include brand reviews.
To calculate the ROI, the important metric for us was the ease-of-use metric rating (to measure usability) and the KPIs were Customer Satisfaction Score for short term impact & Customer Lifetime Value for long term impact.
Initial ideas
While brainstorming widget ideas, I compared the pros and cons of a grid layout vs. a carousel. With input from the tech team, we opted for the grid due to its easier implementation. I explored customization options like drag-and-drop for flexibility and adding CTAs in review cards. Key considerations included blending product and brand reviews, boosting trust with recommendation scores, and determining how many reviews to display at once.
Validating assumptions
I refined the low-fidelity designs, focusing on streamlining the widget settings workflow for enhanced customization and sorting options.
Thinking out loud
I tested the design with 5 users following Jakob Nielsen’s 5-user rule for usability testing. I used the thinking out loud method to understand their mental model while interacting with the design solution.
Single Ease Question (SEQ)
Each task was also followed by a Single Ease Question (SEQ) to measure the ease-of-use level for usability. Across 6 tasks and 5 participants, the average score was 5.9 which is more than the mid point 4 indicating good usability.
From these interviews it became evident that, a template based approach was the best strategy to provide limited customization in layouts for our users
Survey
So, I designed a number of different review card layouts, some prioritizing the customer details and others prioritizing the review. I conducted a survey involving 200 participants and 8 questions to narrow down these templates to two :
Customer focus - layout focused on the customer info.
Review focus - layout focused on the review.
This simplified the layouts and edge cases to a manageable number, making them easier to handle.
Solution exploration
Based on the insights, two opportunities emerged.
Fast & limited customization
The final approach balanced flexibility in widget layout options, offering choices without overwhelming users and maintaining a streamlined workflow.
Flexible layouts
The template-based approach addressed two distinct user needs within our user base by allowing them to quickly customize the layout, prioritizing either customer information or reviews based on their preference.
Responsive design
I designed the layout using modular components that supported responsive design across 4 breakpoints. This ensured a seamless experience for users to view reviews in multiple languages while maintaining coherence.
2. Settings panel redesign
The widget settings panel was divided into settings tab and styling tab with dividers in between different sections to reduce user’s mental load and optimize the customization workflow.
Other highlights
Modularity
The components were designed with a modular approach with respect to the previous widget components in code for easy implementation.
Enhanced mobile experience
Added 'Load More' button after three reviews on smaller screens for concise widget display, improving user experience.
Edge case behavior
Defined edge case layouts in case of insufficient reviews.
Optimizing reading reviews
Interactions and transition behaviours for reading lengthy reviews were tailored for both larger and smaller screens, ensuring optimal user experience across devices.
Impact
Enhanced user experience
The initiative enhanced the user experience for all our Ratings and Reviews widgets by incorporating a similar approach for responsive design and multilanguage support.
Streamlined interactions
We incorporated a similar division of the settings panel to settings and styling in other widgets as well to reduce user’s cognitive load
New widget library
It also helped kick start a conversation to launch a separate widget library to document reusable components that can be used for all of our external customer-facing products for an efficient workflow for designers and developers.
Reflection
Decide what’s more important
It was a challenging journey to narrow down the project scope after the initial brainstorming. I learned the importance of revisiting user needs, business goals, and technical feasibility in those moments. This helped prioritize what to keep and what to discard effectively.
Different voices matter
Involving all stakeholders right from the start ensures a sense of ownership for everyone, which goes a long way in ensuring that the design is usable and provides value to the users.