Momentum

The Business Challenge

Before Momentum, Bank of America's analysts relied on fragmented systems:

• Manual Spreadsheet Tracking: Financial data spread across multiple documents led to inconsistencies and version control issues
• Siloed PowerBI Dashboards: Created inefficiencies in data consolidation and reporting
• Lack of Centralized Insights: No single source of truth for financial analytics and customer sentiment data

Momentum aimed to house all internal projects that tracked CSAT scores, customer sentiment journeys within their product portfolio, and OPEX/Frontstage/Backstage spending in one cohesive platform.

UI Design Challenges

The existing prototype suffered from several usability issues:

• Inconsistent Interface Elements: Typography, spacing, and component designs varied throughout the application
• Poor Visual Hierarchy: Critical information competed with secondary details
• Unclear Navigation: Users had difficulty understanding next steps and locating features
• Misalignment with Brand Identity: Visual design didn't reflect Bank of America's established brand guidelines

Process

1. Heuristic Evaluation

I began with a comprehensive UI audit to identify inconsistencies and usability issues across the platform:

• Documented typography inconsistencies across headers, body text, and data visualizations
• Mapped spacing irregularities that created visual clutter
• Identified confusing interface patterns that could impede user understanding
• Evaluated visual hierarchy issues that buried important information

2. Financial Industry Research

To better understand the context despite limited user research access:

• Conducted tertiary research on financial analyst workflows and needs
• Studied industry-standard financial dashboards and analytics platforms
• Identified key data visualization patterns appropriate for financial metrics

3. Design System Development

To ensure consistency in the redesign, I created a comprehensive UI design kit featuring:

• Typography scale with clear hierarchy guidelines
• Spacing system based on an 8-pixel grid
• Color palette aligned with Bank of America's brand guidelines
• Component library including buttons, cards, tables, and form elements
• Data visualization styles for consistent chart presentation

4. Screen-by-Screen Redesign

I methodically addressed each screen in the application:

• Documented existing issues per screen
• Applied consistent design patterns from the design system
• Maintained existing user flows while enhancing visual clarity
• Created interactive prototypes to demonstrate improvements

Key Improvements

World on a Page View

• Added a floating "Back to Projects" button to improve navigation
• Enhanced typography and contrast ratios for better readability
• Relocated "Overlays" functionality from the navigation menu directly to the chart area where it's applied
• Positioned overlay filter dropdowns on the page to make functionality discoverable
• Implemented consistent spacing and padding throughout the interface

Dashboard View

• Reduced visual clutter in the curved line graph by removing unnecessary sentiment icons
• Improved readability by making Phase (X-axis) labels the default text color
• Enhanced layout of supporting text using containers and varied text sizing for clearer visual hierarchy
• Transformed small data tables into prominent data cards highlighting three key metrics:
  • Frontstage OPEX
  • Backstage OPEX
  • CSAT Score

Design Decisions & Alternatives

Throughout the redesign process, I made several key decisions:

Card-Based vs. Table Layouts:I chose to transform dense tabular data into card-based visualizations for key metrics to create clearer focal points. While tables provide density, the card-based approach allowed for better visual hierarchy and emphasis on critical numbers.

Navigation Restructuring:For the Overlays functionality, I considered three approaches:

1. Keep it in the main navigation (original design)
2. Create a secondary navigation bar specifically for chart controls
3. Move controls directly adjacent to the affected visualization

I selected option 3 as it created the clearest connection between controls and their effects while reducing unnecessary navigation steps.

Color System Choices:When developing the color system, I balanced:

• Bank of America's brand guidelines
• Accessibility requirements (WCAG AA compliance)
• Functional needs of data visualization

This required careful selection of complementary colors that maintained brand identity while ensuring data clarity.

Project Outcomes

The redesigned Momentum prototype achieved:

• Visual Consistency: Established a cohesive design language across all screens
• Improved Usability: Enhanced clarity of information and user navigation
• Brand Alignment: Successfully integrated Bank of America's brand identity
• Scalable Design System: Created reusable components for future development

Stakeholders expressed satisfaction with the design direction, noting particular appreciation for the improved visual hierarchy and more intuitive layout of key information.

Reflections & Learnings

This project taught me valuable lessons about working within constraints:

• Advocating for User Needs: Even with limited access to user research, I learned to advocate for usability principles and best practices
• Effective Communication: I developed strategies for clearly articulating design decisions and their benefits to technical stakeholders
• Design System Importance: Creating a comprehensive design system early proved essential for maintaining consistency across a complex application

Future Considerations

If given the opportunity to revisit this project, I would recommend:

• Conducting user interviews to validate assumptions about financial analyst workflows
• Assembling a small team of designers to tackle the extensive application more efficiently
• Organizing a design sprint to address broader UX issues beyond visual design
• Implementing usability testing with target users to validate improvements

Through this project, I've learned the importance of pushing for thorough understanding of user needs and not hesitating to question design decisions that don't serve those needs—a philosophy I now bring to all my work.

‍

‍

‍

‍

Conclusion

Despite the challenges of remote collaboration and limited client availability, the stakeholders were pleased with the direction of this redesign. The design system provided a solid foundation for future iterations, and the wireframes showcased enhanced usability and improved user experience. The updates highlight the potential value and impact it can bring to Bank of America’s sentiment journey navigation.

‍