Figma
FigJam
2023
Duration
7 months
My Role
Associate UX Designer
Team
Creative Director, 2 Senior UX Designers, UX Researcher
Project Overview
After the client’s redesign stalled with a previous agency, we stepped in to deliver two distinct yet cohesive B2B and B2C experiences under tight timelines. Balancing stakeholder complexity with conversion-focused UX, we transformed a high-pressure reset into a strategic, visually dynamic digital system built to perform.
What was the problem?
Our client had previously partnered with another agency for their website redesign, but the relationship ended mid-project. Our team stepped in to take over and continue the work. This created pressure to move quickly while reassuring the client that their needs would be heard and the work would meet a high standard. We needed to design both B2B and B2C websites that felt cohesive, intuitive, and visually dynamic.
Research
We kicked off the project with a competitive analysis, reviewing visual hierarchies, calls-to-action, branding, and layout patterns used by competitors. This helped us understand both industry standards and opportunities for differentiation.
Many competitor sites overloaded users with information without clear pathways.
Photography and branding elements were often under-leveraged.
There was a need to better guide users to conversion points, especially around lead generation and course discovery.
During our initial research presentation, we noticed signs of impatience from the client. After a conversation with our internal team, we realized that they had likely heard much of this information from the previous agency. While the research was still valuable to us, it became clear that the client was eager to move forward and see tangible process.
The Solution
We pivoted quickly by proposing design discussions using FigJam as a middle ground. This allowed us to initiate visual exploration early while keeping expectations grounded. We made it clear that these were just explorations, not final solutions, which helped manage pressure on both ends. It gave us a better sense of their preferences while continuing to build understanding and alignment.
Ideation and Concept Development
We hosted collaborative design discussions using FigJam, starting with the homepage to establish the tone and visual direction. Two initial concepts were presented:
Concept A: Full-color photography, dynamicc graphics, bold color blocking
Concept B: Black-and-white photography, more white space and scale play, imagery breaking through containers
The client preferred a blend - the color blocking and dynamic graphics of Concept A, combined with the cleaner, more editorial photography approach of Concept B.
Visual Differentiation Between B2B & B2C
Key Features
A key challenge was making the B2B and B2C sites feel distinct while maintaining a cohesive brand system. Initially, we differentiated primarily through color and imagery:
B2B
B2B used a restrained palette of red, black, and yellow on a white or cream background.
B2C
B2C incorporated a broader range of tertiary colors and more dynamic imagery.
However, despite these visual differences, the client felt the distinction wasn't strong enough. To push the B2C site further, we replaced the cream background with a light grey from their design system. This seemingly simple change created a noticeable tonal shift. The grey allowed the brighter tertiary colors to pop and gave the B2C site a more energetic, modern feel.
Another challenge was visualizing a dense section n financing options for the B2C side. The content was copy-heavy, and early explorations using a card-based layout felt awkward on desktop and too bulky on mobile.
We shifted to an accordion design, which allowed us to preserve clarity without overwhelming users. It also gave us an opportunity to play with color while reusing an element already approved from the B2B site.
Final Design
Reflection
Challenges & Solutions
Stakeholder Complexity: Resolved with rationale-backed presentations and structured feedback cycles
Client Fatigue with Research: Pivoted to casual design exploration to spark collaboration early
Visual Differentiation: Solved through background color and content tone shifts
Financing Section Layout: Improved readability and hierarchy by switching from cards to an accordion design
Key Learnings
Many competitor sites overloaded users with information without clear pathways.
Adaptability is key
When the client seemed impatient with research, we pivoted quickly into visual exploration without skipping the foundational work we still needed.
Visual nuance can shift perception
Small changes (like background colors or content hierarchy) can have a big impact in creating distinct experiences for different user groups.
Collaboration is both internal and external
Working in a large team while managing diverse client voices taught me how to balance feedback, clarify decision-making, and keep forward momentum.
What I'd Do Differently
Push for clearer stakeholder alignment upfront
Earlier workshops or decision frameworks could’ve helped reduce conflicting feedback from various client departments.
Build in visual differentiation strategy earlier
Knowing that the client expected a stronger contrast between B2B and B2C, we could’ve planned for more foundational layout or interaction differences in addition to color.
Introduce user validation sooner
Even informal user testing during early design rounds might have helped us feel more confident navigating internal feedback and deciding when something was “done.”