Preferred Business Login Modal Redesign

Role: Product Designer (solo)
Timeline: 3 Weeks
Tools: Figma, Jira
References: Baymard Institute, Nielsen Norman Group
Collaboration: UX Writer (close collaboration), Product Designers (peer feedback), Product Manager, Sales Team

❗ The Challenge

Staples Canada’s business login experience caused user confusion and drop-off. Key problems included:

  • Unclear perks and login purpose

  • Dense legal text that buried key benefits

  • No distinction between account types

  • Frustrating mobile experience with poor hierarchy

This friction led to increased support tickets and lower login conversion.

🎯 Goals

  • Clarify the value proposition of Preferred Business Login

  • Make perks visible and compelling

  • Improve mobile usability

  • Lay the groundwork for a scalable login pattern

Design Approach

🔍 Audit & Insights

  • Reviewed existing modal and competitor flows

  • Referenced Baymard and NNGroup usability standards

  • Partnered with UX Writer to simplify content

  • Ran quick feedback loops with internal users and designers

Iterations

Focused on the most effective way to communicate business perks within the login modal:

  • Before: Basic text only, with no visual cues highlighting perks

  • V1: Text-only layout clearly listing perks

  • V2: Added small icons inline with the text to support perks

  • V3: Small icons placed above titles with descriptions below for improved structure

  • V4 (Final): Large icons paired with clear titles and supporting descriptions for enhanced scannability and visual appeal

Each iteration was carefully evaluated for visual clarity and ease of comprehension. The final design achieves a strong balance of hierarchy, branding, and accessibility. Throughout the process, I collaborated closely with the UX writer, product manager, and sales team to refine messaging. This ensured the copy clearly conveyed value and resonated with business users. Together, we crafted a visually engaging experience that helps users quickly grasp benefits and confidently log in.

Solution Overview

Clearer Messaging

  • Rewrote the headline and supporting text to highlight business perks

  • Collaborated with the UX writer to make benefits more scannable and compelling

Improved Visual Hierarchy

  • Grouped content into defined sections with clearer spacing and contrast

  • Introduced branded visuals and icons to support faster comprehension

Stronger Brand Recognition

  • Incorporated the Staples Business logo to build trust and credibility

Mobile-Optimized

  • Designed a mobile-first version with simplified layout and easy CTA access

  • Ensured key perks and actions remained prominent across breakpoints

🕰️ Before

✅ Final

Impact and Collaboration

📊 Results

  • Login drop-off decreased by 17% due to clearer messaging and visual hierarchy

  • Perk awareness increased by 26% based on post-launch user surveys

  • Support tickets related to login confusion noticeably declined

  • The redesign improved user confidence and encouraged business account logins

🤝 Collaboration

  • Partnered closely with Product Managers to focus on features with highest business impact

  • Worked with UX Writers to distill complex perks into clear, concise messaging

  • Collaborated with fellow Product Designers to maintain UI consistency and drive innovation

  • Led stakeholder reviews with sales and support teams to validate and refine designs

✨ Takeaway

This project demonstrates how focused UX redesigns paired with strong collaboration can significantly improve complex enterprise workflows. Clear communication, user-centered design, and iterative feedback created measurable gains in usability, conversion, and user satisfaction for Staples Canada’s B2B platform.