Product Design • UX Strategy • B2B
B2B Creative Showcase
Elevating client relationships through a strategic creative services platform
Duration:
3 months
My Role:
UX/UI Design & Brand Lead
Team:
Cross-functional team of 8 (UX/UI Designers, Video Producers, Web Developers)
The Problem
Affiliate marketing depends on strategic recruitment, ongoing communication, and nurturing partnerships. Our sales team noted that they had lost deals to competitors who could easily and instantly showcase the breadth of their company's creative capabilities.
The sales cycle was significantly longer, and prospects wanted to see examples of the types of creative deliverables the company offered in the affiliate network.
How might we effectively showcase the quality and breadth of creative work to prospective clients, build trust, and support sales conversations?
The Solution
A group of 8 multi-faceted creatives collaborated to design and build a creative microsite with these core business objectives:
Educate: Effectively explain how creative assets are used throughout affiliate and display marketing
Client Acquisition: Attract prospective clients with compelling creative work
Revenue Expansion: Enable upselling opportunities by showing the breadth of capabilities
Sales Efficiency: Reduce pitch preparation time
Project management
Low-fi and hi-fi wireframes
Conducted 3 (of 8) user tests
Ensured brand consistency
Quality Assurance
Research & Discovery
Key pain points identified
The sales team had no efficient way to collect creative work for a pitch
Clients ask to see specific vertical examples (i.e. travel, retail, finance)
Competitors with portfolio sites had an advantage and were converting deals
Quick informative videos will be helpful
Mobile access was essential
Previously, the creative samples and sales collateral were scattered across various PowerPoint decks that the sales team had to search for; the final pitch decks were often mismatched and outdated.
Sales representatives would manually compile examples, often missing relevant examples that would benefit a prospective client's needs.
Information Architecture & Sitemap
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
Basic structure mirrors the public site to maintain consistency
Branding will follow the latest company branding
Service overview pages
Hero sections are designed to informational videos
Clear presentation of creative offerings with links to galleries
Creative gallery
Filter allows user exploration and freedom to view by product, style, and vertical
Hover states reveal sample details
Lightbox Experience
Full view of creative samples
Creative details (type, vertical)
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
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