UX Research • UI Design
B2B Creative Showcase
Elevating client relationships through creative services
Duration: 3 months
My Role: UX/UI Design Lead & Brand Lead
Team: Cross-functional team of 8 (UX/UI, Video, Web Development)
Problem
B2B affiliate marketing partnerships depend on strategic recruitment, ongoing communication, and compelling branded creative assets. While our company consistently delivered high-quality branded messaging to publishing partners, we faced a significant challenge in showcasing our creative capabilities to potential clients.
Without a centralized platform to demonstrate our full range of creative services, prospects couldn't easily assess our expertise or understand the breadth of solutions we offered. This gap potentially limited our ability to secure new partnerships and effectively communicate our value proposition in the competitive affiliate marketing landscape.
Solution
Our team developed the company's first creative showcase microsite—a strategic initiative designed to strengthen client relationships and accelerate business growth. The microsite was built with three core objectives:
Client Acquisition: Attract prospective clients by presenting compelling creative examples
Revenue Expansion: Enable upselling opportunities
Capability Communication: Provide a comprehensive view of our creative capabilities
Project management
Design exploration
User research
Brand consistency
Quality Assurance
Design process
Information Architecture
This service-focused sitemap organized content by communication channels, linking to dedicated galleries. This structure made it intuitive for clients to find relevant creative examples for their specific needs.
Homepage
Service landing page
Hero sections were designed to accommodate informational videos
Clear presentation of creative offerings with direct links to galleries
Creative gallery
We included a filter that allows users to view segmented samples by product, style, and vertical
Hover states reveal sample details for a better browsing experience
Lightbox Experience
Full-screen view of creative samples and details with easy navigation between pieces
Visual design & brand implementation
Design
Working in Figma and Adobe Creative Suite, we applied the new brand guidelines consistently across the microsite. I collaborated closely with the video team to ensure their content also adhered to brand standards, creating a cohesive user experience.
Development
After the design was complete in Figma, the dev team brought the microsite to life, transforming the wireframes into a fully functional prototype.
User-testing insights
Research Methodology
Each UX/UI team member conducted 2-3 independent user tests with internal candidates. We scheduled individual meetings, followed a consistent script, and recorded sessions for reference.
Participants: 8 internal candidates
Duration: 30 minutes
Method: Task-based usability testing on WordPress staging prototype
Documentation: Shared analysis document for comprehensive team assessment
Key tasks tested
Locating product offerings for specific channels
Filtering and viewing targeted creative examples
Navigating between different service samples
Returning to homepage efficiently
Analysis
Each team member documented their learnings on a shared Google doc for a comprehensive group assessment.
Results
Usability Issues
Video: Some participants said the videos on the service pages were distracting or overwhelming
Video: Rather than feature the autoplay videos on the landing pages, introduce static hero images with a CTA to play videos at users' choice
Gallery Filters: Participants asked for the option to select or deselect all filters
Gallery Filters: Consider adding a checkbox to select/deselect all + explore deep linking options
Bugs
Load times: The Display gallery has slow load times
Load times: Troubleshoot speeding up the load times –set default filter to fewer items, utilize lazy loading
Mobile Rendering: Mobile did not render properly
Mobile Rendering: Stack content for mobile devices
General errors
Internal jargon: Some services were labeled with internal terms that clients might not understand
Avoid internal jargon: Generalize titles and labels
Improper labeling: Participants noted that certain services were only available for high-tier clients, and some examples had incorrect tags
Ensure proper labels and categories for each sample
Final design highlights
Homepage
Service landing pages
Gallery pages
Lightbox
Arrows allow users to click through samples
Key takeaways
Cross-functional communication is essential
Stay engaged with adjacent teams and connect often to ensure smooth operation through the process
Testing a live website…
can reveal insights that prototypes might not uncover and expedite the dev process
Documentation is essential for a project’s health
Documentation is essential for maintaining project continuity as team members join and leave
Limitations
We tested internal clients for usability, performance, and perception, but did not test external clients due to privacy
Technology limits prevented certain user requests
Future Work
Consider a second testing phase to connect with external clientele in the network
Since launch, the company has rebranded and this tool must be updated to reflect current branding