Billing Profile Redesign
The Billing Profile (BP) is a crucial feature of the MX platform, designed to help users manage campaign billing. However, users have found it challenging to navigate. In response to a redesign request, our team started brainstorming improvements to enhance usability and create a more enjoyable experience for managing complex billing tasks.
Team: 1 Product Manager, 1 Analyst, 5 Engineers, 1 Designer (me!)
Role: Design Lead, UX Designer
Tools: Figma, Jira, Confluence
Date: Apr 2024 - Sep 2024
1. Discover & Define
USER NEED
“It took me a while to learn how to use the page because it has a lot of complicated questions but no explanations”
BUSINESS NEED
“How can we increase user engagement
while including all the complex information?”
PRIMARY RESEARCH: HEURISTIC EVALUATION
To better understand the challenges our users faced, we conducted heuristic evaluations. This process helped us identify both surface-level design issues and deeper concerns affecting users while filling out the form.
The image below visually represents the heuristic evaluation of the original Billing Profile, color-coded based on the three key design issues identified:
DESIGN ISSUE #1:
Lacking Error Support
(violating HE #1, 5, 9)
- Lack of real-time validation
- Inadequate hints to help prevent user errors
DESIGN ISSUE #2:
Inefficient User Experience
(violating HE #3, 6, 7, 10)
- Unclear navigation & hierarchy
- Insufficient context for complex questions
DESIGN ISSUE #3:
Chaotic Visual design
(violating HE #4, 8)
- Overwhelming number of questions on a single page
RECOMMENDATIONS BASED ON PRIMARY RESEARCH
After pinpointing the main design challenges with the current Billing Profile, we found it much easier to create effective solutions that address both user needs and Hudson MX’s objectives. This clarity allowed my team to develop three key recommendations for the Billing Profile redesign effort:
RECOMMENDATION #1:
LEND A HAND
- Implement
- Quick validation
- Helpful hints
- Actionable error message
RECOMMENDATION #2:
PROVIDE INFORMATION
- Offer additional context for complex questions
- Clarify navigation functions and make them more visible
RECOMMENDATION #3:
CLEAN UP VISUAL CLUTTER
- Enhance page readability
- Organize the form into clearly defined categories
2. Design & Develop
DESIGN ITERATIONS
During this phase, multiple design iterations were shared among team members and key internal stakeholders, including product managers and engineers. Involving these individuals early in the design process enabled us to implement quick changes and updates as needed, ultimately reducing the overall design hours and streamlining the development cycle.
1
Round 1: Concept Sketch
We used insights from heuristic evaluation to create the initial sketch, which established the foundation for our low-fidelity wireframes.
2
Round 2: Low-Fidelity Wireframes
After confirming the sketches, we created wireframes and engaged stakeholders for feedback to ensure project alignment.
3
Round ∞: High-Fidelity mockups
After finalizing layouts, we developed high-fidelity mockups and evaluated design options to refine our visual direction and enhance user experience.
CROSS-FUNCTIONAL COLLABORATION CHALLENGES
While collaboration among cross-functional team members and stakeholders was essential to the final design and helped restructure our development cycle, the participation of various individuals with differing priorities introduced some unexpected challenges.
Competing Priorities
Cross-functional team collaboration highlighted conflicting priorities between design and engineering teams, with design focusing on usability and engineering on timelines. To address this, we leveraged the design systems initiative during the Billing Profile redesign, aligning with engineering to integrate features like drawer functionality, resolving conflicts and saving design hours by using existing components.
Changing Requirements
Another key challenge was the constant shift in requirements. While the product team provided initial guidelines, new feedback emerged during the design process. To address this, we established an agile feedback loop with regular check-ins to discuss adjustments. By prioritizing user-impact changes, we created a roadmap that balanced immediate needs with our timeline, minimizing disruptions and fostering collaboration while maintaining focus on design goals.
REDESIGN HIGHLIGHTS
The new Billing Profile effectively addresses the challenges identified in the heuristic evaluation while incorporating the concerns and priorities of the cross-functional team. Below are the three key areas of design improvement:
Highlight #1: Lend a Hand
Help users resolve issues by clearly indicating where errors are located and offering solutions to fix them.
1a: Added clear error indicators on tabs, allowing users to easily pinpoint errors
1b: Introduced live-validation for quick error detection, eliminating the need to complete the entire form before revealing all errors
1c: Provided contextual error messages with actionable steps to help users resolve issues
Highlight #2: Provide Information
Enhanced flexibility by incorporating clear, multiple navigation options and enabling access to additional information without sacrificing visibility.
2a: Increased navigation choices within the form for improved flexibility and made button labels more intuitive for clearer communication
2b: Added a pin feature for complex questions, allowing users to access relevant details while filling out the form, without losing visibility or switching between windows
Highlight #3: Clean Up Visual Clutter
Intuitively categorized questions on a minimalistic form, paired with toggle buttons to hide sections help users focus on their tasks.
3a: Clearly organized questions by category along with brief section descriptions help users stay focused on completing the form
3b: Implemented toggle buttons to hide sections with multiple sub-options, minimizing page scrolling and helping to alleviate user fatigue
3. Deliver
FINAL DESIGN DEMO
Each final design demo highlights the challenges identified in the heuristic evaluation, illustrating the user experience with the revamped Billing Profile design.
Demo #1: Error Support
Clear error indicators, live validations, and actionable error messages empower users avoid making mistakes
Demo #2: Improved Usability
Flexible navigation and additional context make completing the Billing Profile page easier for users
Demo #3: Enhanced Design
Organizing the page into categories with a minimal style enhances the overall experience of the Billing Profile
IMPACTS
The revamped Billing Profile launched in September 2024, making its debut with our internal users at Hudson MX. Here are some of the reactions and metrics we’ve gathered from this update.
TAKEAWAYS
Takeaway #1:
Designers should always view their work from the user’s perspective
Takeaway #2:
Strong soft skills and effective communication can determine the success of a project
Takeaway #3:
Collaborating with a cross-functional team from the beginning of a project is crucial
Takeaway #4:
Flexibility and open-mindedness are essential for navigating changes in a project
