Wells Fargo
Building a design system from scratch to create a robust internal auditing system.
UX Case Study: Wells Fargo Enterprise Regulatory EngagementPlatform (EREP)
Project Overview:
Wells Fargo’s Enterprise Regulatory Engagement Platform (EREP) is an internal application used by regulatory relations teams,auditors, and business owners. It serves as a centralized point of communication, simplifying the process of creating and managing engagements between regulators, auditors, and internal stakeholders. My role was to lead the UX design for this platform, ensuring a cohesive and intuitive experience for internal users across various teams.
Challenges
The primary challenge was to create a seamless,user-centered design for an application that serves a broad and diverse user base—regulatory relations teams, auditors, and business owners—while ensuring alignment with Wells Fargo’s established branding guidelines. Additionally, the back end development was already in progress, requiring me to quickly integrate into the development cycle and ensure design consistency throughout the product.
Goals
- Design a cohesive and user-friendly experience for EREP users.
- Align the design with Wells Fargo’s existing brand guidelines for consistency.
- Develop a scalable design system to streamline future design and development efforts.
- Create an iterative, transparent process for collaboration between the UX, BA, and development teams.
- Ensure a smooth handoff between design and development to avoid delays and roadblocks.
Process & Approach
1. Initial Assessment and Design Audit
Upon joining the project, I started by conducting a style inventory of the existing product. This involved reviewing the design components that were already in place and analyzing how they were used across the application. I also looked at other products within Wells Fargo to compare branding elements like colors, iconography, typography, and buttons.
- Objective: Understand the current design landscape and identify areas for improvement.
- Action: I compared existing components with the brand guide and identified inconsistencies in the design.
2. Building the Design System
Given the scale of the application and the need for consistency, I set up a design system in Figma to streamline the design process and improve collaboration with the development team.
- Audit Existing Elements: I reviewed and documented all necessary design components, such as grids, colors, typography, spacing, and sizing.
- Design System Library: I created a shared Figma library to house these components, making it accessible not just to our team, but also to other design teams across Wells Fargo.
- Ownership and Maintenance: As the lead of the newly formed EREP UX Design Team, I managed and maintained all components, libraries, prototypes, user access, and training resources in Figma and internal tools.
Outcome:The design system provided a consistent visual language across the product, and streamlined design iterations and communication between design and development teams.
3. Transparent Collaboration Process
To ensure the design process was aligned with development timelines, I introduced a transparent workflow to integrate UX/UI design into the agile sprints effectively.
- Collaborative Planning: I scheduled regular meetings with Business Analysts (BAs) to understand the scope and requirements for each user story. This step helped me identify dependencies and potential interactions between features, ensuring I could produce informed design solutions.
- Prototyping: Using the components in the design system, I created early prototypes and iterated based on real-time feedback from the BA and Development leads. This ensured we avoided misalignments and addressed issues early in the design process.
Outcome:With Figma integrated into the process, we maintained an iterative cycle that kept UX a few sprints ahead of development, allowing for timely feedback and refinement.
4. Prototyping & User Feedback
Since the primary users were internal employees within the Regulatory Relations team, I conducted bi-weekly review sessions where I presented design prototypes for feedback. This allowed me to gather valuable insights and make adjustments to the designs as needed.
- Prototyping: I created low-fidelity drafts for initial reviews, gradually refining them into high-fidelity prototypes. Feedback was gathered in real-time from key stakeholders, allowing me to iterate quickly.
- Buffer for Potential Revisions: Understanding that designs may need adjustments, I maintained a two-sprint buffer to accommodate any major changes that could arise after reviews.
Outcome: By maintaining regular touch points with the users and stakeholders, I ensured that the final designs met the team's needs with minimal post-launch revisions.
5. Handoff to Development
Once the design was finalized, the handoff to the development team was a critical phase. I ensured the transition was smooth by organizing a kickoff meeting with the assigned developers.
- Prototype Walkthrough: In the kickoff, I walked the developers through the final prototype, addressing any questions and clarifying design details.
- Documentation: I provided detailed specifications and asset exports, ensuring the development team had everything they needed to implement the design.
- Jira Tracking: As the builds were pushed to production, I tracked any defects or issues via Jira, coordinating with developers to resolve any issues promptly.
Outcome:The handoff process was efficient, and the design was successfully implemented in production with minimal issues.
Results
- Design Consistency: The creation of a comprehensive design system ensured a consistent user experience across the platform and alignment with Wells Fargo's brand guidelines.
- Improved Collaboration: The new transparent workflow and shared design system fostered closer collaboration between design, development, and business teams, speeding up the iteration process.
- Positive Feedback: The internal users from the Regulatory Relations team provided positive feedback, praising the intuitive interface and simplified engagement processes.
- Successful Launch: The platform launched with minimal defects, and user adoption was seamless, thanks to the close collaboration and iterative design process.
Key Takeaways
- Importance of Design Systems: Implementing a centralized design system early in the process helped establish consistency and accelerated the design process.
- Stakeholder Engagement: Regular communication with business analysts and internal users ensured that the designs were aligned with user needs and expectations.
- Iterative Process: Continuous feedback and iteration were crucial to delivering a product that met the needs of both users and the business.
This project not only improved the internal engagement processes at Wells Fargo but also demonstrated the power of a cohesive UX strategy in driving efficiency and user satisfaction.