Project Overview
B2B Creative Showcase
Bringing visibility to a company's creative services to elevate client relationships
Duration: 3 months
My Role: UX/UI Design Lead & Brand Lead
Team: Cross-functional team of 8 (UX/UI, Video, Web Development)
Tools: Figma, Adobe Creative Suite, Zoom
Problem
Our affiliate marketing company had a significant gap in how we showcased our creative capabilities to clients. While we regularly shared branded messaging with publishing partners, we lacked a centralized platform to demonstrate our full range of creative services.
The Goal
The team set out to create the company's first creative showcase microsite to strengthen client relationships and drive business growth to:
Attract new clients with compelling creative examples
Upsell existing clients on additional services
Communicate the breadth of creative capabilities
Project management
Design exploration
User research
Brand consictency
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 movies 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' choce
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: 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
As people come and go, documenting processes is key to keep everyone up to speed on the project's lifespan
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