Back
Background:
ClickBank's previous design was outdated, unresponsive, and lacked brand coherence. Fragmented information architecture, coupled with inconsistent navigation models, presented significant challenges in terms of accessibility and usability. Consequently, the bounce rate for both new registrants and returning affiliates was alarmingly high.
Team:
Myself (Principal Designer), VP of User Experience, Development Team, ClickBank Legal
Approach:
Several vital projects at ClickBank demanded immediate attention. Working closely with the VP of UX, we outlined the following priorities to address:
Conduct a thorough redesign of the site's branding
Develop a design system featuring reusable assets
Lead the migration from Sketch to Figma
Revise the information architecture and UI on high-impact pages, focusing on reducing the bounce rate and streamlining the user journey
Implement the new site branding on high-impact pages
Collaborate closely with developers on the Figma hand-off process and QA testing
Brand:
After touching down in Boise and meeting with the VP, I began meeting with stakeholders and reviewing user data and interviews. While on premises, I noticed the ClickBank office had modern typographic wall art treatments incorporating ClickBank’s primary blue color, which I made a deliberate choice to incorporate into the designs.
Next I began work on a moodboard with a mixture of found and custom UI components, typography and color pallets to help visualize the brand overall.
Typographic Explorations
Keeping in mind that a new design team would eventually take charge of the brand, I opted for a modern yet "vanilla" update, leaving room for the new team to make new creative decisions with flexibility while minimizing disruption.
Transitioning ClickBank to Figma:
While not originally part of this project, I enlisted the help of the other ClickBank designers to assist in persuading the development team of the benefits of shifting from Sketch and Zeplin to Figma. Together, we emphasized Figma's benefits for designer/developer collaboration, securing buy-in and simplifying the case presented to the VP of UX. After the decision, I worked directly with the development team to establish best practices for designer/developer Figma collaboration, handoff, component updating, and then directed them to available Figma automation resources.
Transitioning to Figma
Information Architecture and User Journeys
With brand discussions and the Figma transition underway, I shifted my focus to high-impact pages plagued by confusing UIs and high bounce rates. In close collaboration with ClickBank's legal and development teams, I streamlined multiple interfaces, shortened user journeys, and ensured they maintained legal compliance and technical feasibility.
Design Explorations / Moodboard
Typographic Explorations
Updated and Refreshed
Presented below are screenshots contrasting the former Homepage and Sign-Up/Sign-In page with the recently updated design. The refreshed version leverages streamlined information architecture, significantly decreasing the number of information-gathering fields while ensuring legal compliance. These fields are consolidated into a single unified form using updated branding.
New Sign-In page, tablet and phone
New Sign-In page, tablet and phone
