UX Research & UI Design
B2B Creative Showcase microsite
During this initiative, three creative teams united to build the company's first creative microsite to attract new clients and expand existing relationships.
Project Type: Creative initiative
Timeline: 3 months
Teammates: Nick B, Bianca E, Liz G, Poonam J, Nikayla L, Val P, Mike S. Travis S.
My Role: UXUI Design, Brand lead
Problem
Affiliate marketing relies on strong advertiser-publisher relationships and clear communication. While merchants share branded messaging with partners, the company lacked a unified platform to highlight the full range of communications and effectively upsell to new and existing clients.
Approach
Three teams united to build a creative showcase, each focusing on a critical aspect:
UX/UI—IA and interaction
Video—Video content and storytelling
Web Dev—Scalable website and responsive implementation
Solution
Together, we designed, tested, built, and iterated the company’s first Creative showcase.
Key features include:
A visually engaging interface
Informational video content
User-friendly filter system
Design lead
Wireframes
Usability testing
Design recommendations
Quality Assurance
Product design
Information Architecture
This sitemap is organized by each service channel, divided by type of deliverable linking to a respective gallery.
Homepage
Service landing page
Creative gallery
Lightbox
Branding & design
Using Figma and Adobe tools, the team and I applied the company's new brand guidelines to the design, including imagery, colors, typefaces, and details.
As the project brand lead, I worked closely with the video teams to ensure their work followed the company's new brand guidelines and felt cohesive with the microsite. I also communicated closely with the dev team to ensure the website reflected the appropriate design, styles, and UI patterns.
Development
The dev team brought the microsite to life using WordPress, utilizing CSS in Figma and the corporate website before testing, transforming the wireframes into a fully functional tool.
Development
Development
The dev team brought the microsite to life using WordPress utilizing the CSS from both Figma and the company's website. Using this staging website for testing expedited the iterative process, transforming the wireframes into a fully functional tool used in prototyping.
User-testing summary
Setup
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
Subject: WordPress staging prototype
Tools: Informed consent, script, Zoom
Task-based prompts
Locate product offerings for a specific channel
View a targeted subset of creative examples
Navigate between different channels' design samples
Return to homepage
Analysis
Each team member documented their learnings on a shared document for 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