Crafting Trust
Designing a new scalable widget to elevate brand-customer trust and drive conversions.
- Final concept design
Role
Product Designer
Team
Duration
2023 - 2024
Activities
User research
Ideation
Building the product vision
Planning & scope
UX Design
Motion & interactions
Role and key accomplishments
Getting started
I spearheaded end-to-end design processes for this initiative. My key accomplishments include:
Collaborated with the Product Manager to strategize the product vision, set KPIs and plan the design phases.
Improved usability of all widgets by conducting usability testing in collaboration with another designer.
Kick started a separate library with modular components for consumer facing products that reduced inconsistencies and improved efficiency.
Flowbox launches Ratings & Reviews
Context
Flowbox, a scale-up serving 850+ e-commerce clients, offers a comprehensive B2B SaaS platform for effortlessly collecting, moderating, and displaying User Generated Content (UGC) across websites and social media.
Joining the team dedicated to launching Ratings and Reviews, I contributed to a solution enhancing brand trust and driving conversions by moderating and showcasing user-generated feedback on clients' online stores.
Leveraging automation, Ratings and Reviews ensures fair moderation, supported by two widgets: a star widget for overall product rating and a list widget for specific product reviews on the page.
The business need
After the initial launch of the MVP, Flowbox was looking to expand the display widgets in Ratings and Reviews to retain our clients.
Serving e-commerce clients and their customers
Meet our users
Our users primarily included 4 job roles
Primary users - Content Managers and Social Media Managers
Secondary users - Marketing Managers and E-commerce Managers
The primary user groups are the ones who engage with Flowbox platform on a daily basis for content moderation and publishing. So, they are usually focused on handling these work processes faster and smoother. The secondary users are involved in a sales and managerial level. So, their needs are mostly focused on how Flowbox products help them boost sales conversions and increase brand-customer trust.
- Personas
Understanding what our clients value
User interviews & insights
We set out to understand the needs and wants of our clients related to Ratings & Reviews widgets. At Flowbox, the product and tech team conducts weekly interviews with 2-3 customers following Teresa Torres's advice in the book 'Continuous Discovery Habits'. After two months of interviews and secondary research, we discovered:
Amplify product awareness
Our clients were looking to increase their product awareness among customers, particularly from their home page to ramp up conversions.
Increase customer trust & satisfaction
They wanted to increase brand-customer trust for instance, some of them wanted to highlight attributes such as size references or returns policy.
Faster widget customization
They appreciated the customization available with Flowbox for the widgets to represent their brand, but they wanted to make this work flow faster.
What would be our product differentiation?
Competitor analysis
I studied other products in the market from our key competitors. From this research, I found out that the product differentiation for Flowbox is the high level of customization that we currently offer in our widgets & also the ability to integrate it with other Flowbox products catering to our client needs along with good user experience.
- Competitor study & analysis
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
E-commerce conversion funnel
Previous widgets focused on product reviews for customers ready to buy, targeting the desire stage. Now, we're shifting to boosting product awareness on clients' home or checkout pages to engage customers earlier in the funnel.
Setting the scope & product vision
The solution
After the preliminary product analysis (including user needs, market benchmark and business goals), the Product Manager and I opted for a phased approach for the new widget.
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
Why a grid layout?
As I brainstormed widget ideas, I weighed the pros and cons of a grid layout versus a carousel. With the tech team's input, we chose the grid for its easier implementation. I explored customization options like drag-and-drop for layout flexibility and adding CTAs within review cards. Should we blend product and brand reviews? How can we boost trust, maybe with recommendation scores? And how many reviews should we show at once? Lots to consider!
- Ideas exploration and low fidelity wireframes
Validating assumptions
Usability testing
I began refining the low-fidelity designs, with a key focus on enhancing the widget settings workflow. Since we were introducing various customizations with the grid widget, like additional sorting options for reviews, I concentrated on streamlining this process.
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
So, I designed a number of different review card layouts, some prioritizing the customer details and others prioritizing the review.
Survey
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.
- Qualitative interview & survey preparation
The solution
Opportunities
Based on the insights, two opportunities emerged.
The final approach balanced flexibility in widget layout options, offering choices without overwhelming users and maintaining a streamlined workflow.
Fast & limited customization
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.
- Settings panel redesign to reduce user’s mental load
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 behaviors for reading lengthy reviews were tailored for both larger and smaller screens, ensuring optimal user experience across devices.
What happened next?
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.
Reflecting on my
Learnings
1. 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.
2. Involve tech team early
Building this design in close collaboration with the tech team was fascinating. I discovered that having quick check-ins at every step allowed for creative inputs from the rest of the team that were both viable and efficient. This approach also helped reduce time spent exploring ideas that might not work out in the end.
3. 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.
- You may also like -