Redefining User Engagement with an Interactive Testimonial Experience
Redefining User Engagement with an Interactive Testimonial Experience
Embedded Files
Revamping Metaintro's Testimonials: 80% Usability Improvement Through Strategic User Research and Design Iteration
Wall Of Love - Mobile Optimized Experience
Project Overview
Project Overview
The Product
Metaintro's new testimonial page is a dynamic, user-friendly platform featuring intuitive navigation, interactive elements, and a visually appealing design. It captures users' attention and fosters a greater sense of community and trust in the Metaintro platform.
The Problem
Metaintro’s current testimonial page lacks dynamic storytelling elements, leaving users with a static and traditional experience, not capturing the essence of Metaintro.
The Solution
The goal is to create a testimonial page seamlessly weaving together user stories to create a rich tapestry of experiences that resonate with visitors. By crafting an interactive and inspiring testimonial page, Metaintro seeks to showcase its platform's value and invite users to become part of a vibrant and dynamic community dedicated to professional growth and networking in the web3 space.
Client
Metaintro
Organization
Sprintfolio
Team
1 UX Lead and 3 UX Designers
My Role
UX Researcher & Designer
Project Duration
April 2024 - July 2024
Tools
Tally Forms
Figjam
Figma
Useberry (User Testing Tool)
Google Suites
Responsibilities
UX research
Collaborated with a team of one UX Lead and three volunteers to brainstorm and draft business questions, survey questions for participant selection, and user interview questions. Took individual ownership of tasks, including emailing participants, and conducting interviews.
Conducted 3 user interviews: Engaged participants to understand their needs, behaviors, and pain points, gathering qualitative insights to guide design decisions.
Paper and digital wireframing: Created initial sketches and structured layouts to refine and visualize user flows.
Low and high-fidelity prototyping: Built basic wireframes followed by polished prototypes for realistic interactions and visual appeal.
Conducted usability studies: Using Useberry observed users interacting with prototypes to identify usability issues, capturing actionable feedback for improvement.
Iterated on designs: Refined designs based on user feedback and usability testing results to enhance functionality, accessibility, and user satisfaction.
Let's review the result before exploring the process
The final design is the outcome of conducting thorough user research and significantly improving the accessibility, look, and feel of Metaintro's testimonial page and its overall navigation. As a result, achieving an 80% usability improvement and driving projected Metaintro sign-up growth.
Before
After
Final Designs
Research
Research
To begin with, I evaluated the current testimonial page
As part of the research, I conducted a heuristic evaluation of the current testimonial page and came up with the following recommendations.
Providing a small introduction or context about the Wall of Love and how testimonials are gathered could be useful, especially for first-time visitors.
Information about how many testimonials are available might help users know where they are on the list.
Providing more context like different testimonials might help users find relevant information more quickly.
Providing options for filtering or searching through testimonials could enhance control, especially as the number of testimonials grows.
Then I conducted secondary research and analyzed how testimonials are impactful and help customers feel confident about their decisions.
How are our competitors performing?
Performed competitive analysis on following job boards to identify and evaluate strengths and weaknesses of direct and indirect competitors.
We identified inspiring and easy-to-use features
Prominent Call-to-Actions in the Header, Footer, and High-Traffic Pages
Interactive and engaging testimonials
Understanding the business objective
Stakeholder interview insights
We met with Metaintro's Founder and CEO Lacey Kaelani and talked about her needs and this is what we found.
Understanding the users, their pain points, needs, and motivation
I conducted user interviews with job seekers interested in Web3, AI, and Crypto jobs. The goal was to understand their needs, pain points, and preferences when it came to job search through job platforms. The following are the themes and insights gathered from the research.
Improve UX
Enhance Trust
Understanding the user's inspiration to use job-seeking platforms
Using Tally Forms (tally.so), I collected data with 7 open-ended survey questions to understand users' motivations to use job-search platforms for Web3/Crypto/AI careers. Received 17 responses.
59% of responders said success stories or in-depth reviews grab their attention to job-search platforms.
53% of responders said the rating feature would be helpful when reading reviews or testimonials.
47% of responders said the Filter by Category/Type option would be helpful when reading reviews or testimonials.
For more information view the Survey Analysis
Define & Ideate
Define & Ideate
Persona: Julie
By synthesizing insights from user interviews and usability tests, I developed a user persona and prioritized user needs.
Problem Statement:
Julie, an emerging talent, needs reliable information from a vibrant community. The current testimonial page, however, lacks dynamic storytelling elements, providing users with a static and unengaging experience.
"Just add more reviews and personally, I wouldn't put the automatic scroll because I would want to scroll myself and read the comments."
"Just add more reviews and personally, I wouldn't put the automatic scroll because I would want to scroll myself and read the comments."
HMW (How Might We)
Based on the insights from research, I redefined problems as “How Might We” questions to gain clarity on user needs and generate creative ideas for solutions.
streamline information accessibility to improve user navigation through testimonials
enhance relevance of testimonials to align with users professional aspirations and values
ensure diversity in the testimonials to strengthen the perception of authenticity
address information overload to achieve seamless user experience
Prioritizing competing product features
Prioritizing features based on the shared business and user goals
User Flow
This flow enables users to take a step-by-step approach to finding testimonials and customize them based on their needs, such as rating and relevance.
Iterative Design
Iterative Design
Transforming ideas into design to improve user experience
I brainstormed and sketched different design ideas for the interactive testimonial page, considering the needs and challenges of the user personas. I focused on important features like improving page navigation and finding relevant testimonials. Eventually, I created a design that combined elements from all the sketches and then moved on to creating a basic wireframe for the design
In designing an interactive testimonial page, I started with low-fidelity wireframes in Figma like organizing testimonials and adding pagination to avoid long scrolls. Transitioning to mid-fidelity, I added details such as button styles and a preliminary color scheme, refining the design based on the feedback to ensure intuitive navigation and readability.
High-Fidelity Design
The high-fidelity wireframe for the Metaintro testimonial page is a detailed visual blueprint outlining the page's design, layout, and functionality. It closely approximates the final design, incorporating specific visual elements, realistic content, and interactivity to provide a comprehensive user interface preview.
Style Guide
Color Palette
Icons
Buttons
Typography
Cards
Testimonial Customization
Improved UX
Organized testimonials based on relevancy (technology/industry)
Filter testimonials by various criteria
Included two Call -To-Action
Join Metaintro
Join Our Newsletters
Easy Navigation
Improved UX
To avoid long scrolls, added pagination and Call-To- Action’s
Social media networking to build strong professional networks
Authentication of Testimonials
Enhanced Trust
Range of testimonials from users of different demographics and backgrounds
The authenticity of the testimonial is achieved by including testimonials with verifiable identities like name, title, and affiliations
Feedback, testimonials, and reviews sourced from social media platforms
Diverse Testimonials
Enhanced Trust
Positive and negative testimonials along with feedback loops are included in the design
Long and short testimonials to showcase significant success stories and impactful aspects of the user experience
Eagle-Eye View of the Design
The full-page design integrates individual elements, such as filters, categories, and testimonials, to ensure smooth navigation through content. As seen in the previous screenshots, the call to action, paging and social media platforms are strategically placed to enhance usability. This broader view demonstrates how these elements work together to create an intuitive and visually balanced interface.
Usability Testing
During the usability testing, we noticed some hurdles:
Participants who had experienced the testimonial page had trouble finding testimonials due to confusing terminologies in the filter option.
Users were confused about how to sign up for Metaintro with the “Join our Newsletters” CTA.
After Usability Testing changed the terminology in the filters and included two CTA’s “Join Metaintro” and “Join Our Newsletters” to connect with Metaintro.
Final Design
Going Forward
Impact
Impact
"i like it, matched metaintro's branding and has a web3 feel to it”
Most users found that the filter options helped them locate testimonials and reviews of interest. They also found it easy to discover additional reviews and join Metaintro, enhancing their overall experience.
The KPIs are from the unmoderated usability testing conducted via "Useberry", a user testing tool.
What I learned
What I learned
Users prefer testimonials that are authentic, detailed, and visually engaging.
Interactive elements such as likes, shares, and comments significantly boost user involvement.
Presenting testimonials as stories rather than static quotes makes them more impactful.
While innovation is important, simplicity and ease of navigation are critical for user satisfaction.
Iterative design and testing are essential for creating a user-centered product.
Next Steps
Next Steps
I want to conduct additional rounds of user testing with a diverse set of users.
Make iterative improvements based on user feedback and testing results.
Develop and integrate more personalized features, such as tailored testimonial recommendations.
Last but not least set up comprehensive analytics to track user interactions and engagement with the testimonial page.
Get in touch at
LinkedIn | ramsrk2@gmail.com
Page updated
Google Sites
Report abuse