GLOBAL REPORTING SYSTEM

My Role

A prominent Fortune 200 financial institution selected me to lead the design of an international enterprise application. As the design lead, my tasks were to create and consolidate four different disparate deployments as well as redesign a crucial business tool from the ground up. This tool collected metrics and business information that resulted in more than $4,000,000,000 in annual fees. I worked alongside a researcher, two product owners and three designers throughout the project.

	Transforming Customer Insights into Features Partnering with product owners and a UX researcher, I uncovered insights and translated concepts into features that addressed customer needs and motivations.

	Evangelizing the UX Strategy and Vision I created designs, presentations, and prototypes to share the vision, design principles and experience strategy with the team. This helped generate ideas, build alignment and drive decision making.

	Planning the Product Working with my two product-owner partners, I defined the product. This phase involved balancing user goals with business goals and technical constraints as well as prioritizing and negotiating features for launch and beyond.

	Executing UI Design I designed the application responsively. Wireframes, iterations, pixel-perfect mockups, custom components and prototypes were all part of my user interface design process.

	Creating Design Systems UI components, modules, typography, colors, icons and international string systems were all part of the design system I created, serving as a solid foundation and building blocks.

	Supporting and Accelerating Development My support of the development and engineering teams included authoring design documentation, behavioral guidelines, code-based prototypes and a living style guide.

	Providing Leadership My leadership responsibilities involved presenting work and delivering presentations to gain buy-in from executives and senior stakeholders throughout the project lifecycle.

	Training and Mentoring My role also involved training and mentoring other designers in research, ideation, interaction design, bug tracking, production processes and rapid design variations.

	To comply with my non-disclosure agreement, I have omitted and obfuscated confidential information in this case study. All information in this case study is my own and does not necessarily reflect the views of the parent corporation for which the application was designed.

Defining the Problems that Needed Solving

Multiple Viewpoints
To provide the most effective solution, I needed to understand the problem from the perspective of users, product owners, engineers and senior stakeholders.
Strategy and Value
It was essential I understood the strategy behind the project, as well as its value to the business and end users.
Core Issues
Identifying the core issues and problems was essential in this project. I wanted to gauge if the solutions people had in mind addressed the actual problems.
What Success Looks Like
Establishing success criteria was another step I needed to take to determine how success would be definied for this project.

PRELIMINARY RESEARCH

Researching Triggers Project Momentum

Screenshot from a research summary document

When internal UX researchers conducted their initial review of the system, they discovered the need for this project. I received their research reports and a debriefing to set the stage for moving forward.

STAKEHOLDER INTERVIEWS & TEAM SURVEYS

Building Alignment with Stakeholders and Team Members

Results from a stakeholder interview

A survey from one of many team members

Conducting interviews with stakeholders from different departments helped me understand their business challenges and goals.

We worked together to identify risks and align on expectations, which led me to constructing a shared vision for the app. I then crafted an experience strategy that outlined our phased approach and direction for the app. The final step in this phase was conducting surveys with multiple team members to begin exposing them to the UX process and research.

PREVIOUS VERSIONS

Auditing Each Regional Deployment

Each regional deployment was very different

The existing deployments covered four different regions: North America, Latin America, Europe and the CEMEA region. While each regional business unit had a similar problem to solve, they solved that problem in radically different ways. The first step was examining how each deployment functioned.

USER PAIN POINTS

Identifying User Pain Points

The user experience was a painful one all around. The experience was convoluted and text-based, with no graphics to enhance understanding, interest or engagement levels. Multiple one-off Band-Aid solutions had been used to correct various issues.

	Lack of Navigational Hierarchy Users frequently got lost, as each deployment had multiple home screens that resulted in a fragmented cognitive understanding of navigational hierarchy.

	No Coherent Flow Users were also confused as to what they needed to do next, as actionable steps weren’t obvious and core actionable features were scattered across multiple screens.

	Clutter and Mistrust Individual Band-Aid solutions and workarounds resulted in unintelligible clutter across multiple screens. Inaccurate and hard-to-understand information led customers to mistrust the system.

	Mysterious Help and Resources Preliminary project research revealed that the majority of users surveyed had never seen a help guide. It was unclear to them if help was even available within the application.

	Confusing Data Validation Validating user data was extremely cumbersome, with users forced to visit multiple screens to fix single errors.

Setting the Strategy

Design Thinking and Discovery
I conducted design-thinking workshops, brainstorming, and discovery over a four-week period.
Core Issues and Goals
Multiple workshops were dedicated solely to flushing out core business problems and goals.
User Pain Points
I focused on reducing or fully eliminating user pain points as a vital part of this project's strategy.
Precise Plan Details
I also established a phased plan for launch and beyond.

DISCOVERY

Pinpointing Problems & Solutions

Photo from a design thinking whiteboarding session

Four weeks of design-thinking workshops and discovery sessions came next. Following brainstorming, I introduced the most promising ideas, along with industry research and examples of features that could best meet user needs. After brainstorming, I continued by sketching some of the most promising ideas to distill them down and also get feedback from the team.

The next step was entering all the ideas into a spreadsheet, prioritizing them based on personas needs, tech feasibility and business objectives. I then helped create the phasing strategy and product roadmap.

MINDMAPS

Enhancing Understanding by Visualizing Complex Data

One of many mindmaps that helped sell the UX process

Mind maps are among my favorite tools for representing complex data in an organized, visually-oriented and easy-to-understand way. They proved highly effective when I used them to represent the output from our previous ideation and design-thinking workshops.

Large-format mind maps of high-priority features were printed and mounted on a wall. Key stakeholders and executives passed this wall daily, becoming an ideal way to expose them to the UX process, get buy-in, and build trust.

PRODUCT PLANNING & ROADMAP

Detailing the Strategy to Make it All Happen

Part of a phased development plan

Additional outcomes of the discovery period were a high-level timeline, phased development plans and a feature roadmap. Detailed versions of each resulted in the allocation of additional time to the schedule, phases for global expansion, and a budget increase of several million dollars.

DYNAMIC SOLUTION

Sharing Solutions to Build Comprehension and Trust

One of the core challenges with the previous versions of the product was that any technical requests often took months to implement. The product team wanted to make the app fully dynamic and configurable for each deployment, allowing for customization as needed by specific customers.

To help stakeholders and team members understand the workings behind their request, I created a poster that outlined the technical solution to this project. Sharing this information helped immensely, particularly since most members didn't have technical or software background.

Sharing design methods and thinking form the outset likewise helped to build a strong business relationship. Ample opportunities for input at all stages of the project built trust and created a comfortable environment for sharing ideas.

GOALS

Defining Project Goals

The goals for the project fell into two groups: business goals and user goals.

Business Goals
	Modernize the UI The user interface needed a modern and sleek design, as this was a high-profile, customer-facing project.

	Foundational Design Systems The application needed solid design systems to serve as a foundation for this multi-year phased project. knowing what to do next.

	Architect Full Dynamic Configurability Customer deployments needed to be fully configurable to avoid custom technical requests.

	Design New UX Best Practice Try different UX approaches and keep meticulous notes to formulate a model the UX department could implement in other business units.

User Goals
	Streamline Task Flow All tasks needed to be as streamlined and efficient as possible.

	Self-Guided Actions User steps and actions needed to be made obvious, with the user always knowing what to do next.

	Easy Data Validation An integral function of the application was to validate data entered by the user, and the process needed to be made as straightforward and easy as possible.

	Obvious Help and Resources Help and resources needed to be emphasized and readily available.

Designing the Application

Design Options
During this phase, I executed different design options and solutions, from low-fidelity to pixel-perfect mockups.
Visual Variations
Landing on the optimal visual result came from designing, testing and exploring many visual variations.
Presenting & Refining Concepts
Users and stakeholders were exposed to ideas at each step of the design phase so I could gather input. The feedback allowed me to readjust the design and refine the concepts.
Custom Solutions to Meet Critical Needs
Designing custom UI components and solutions to address critical user needs was a key part of this phase.

SKETCHES

Exploring Ideas through Sketching

Ideas for circular progress meters

Low-fidelity sketches are another tool that provides numerous benefits. Quickly sketching out every aspect of this project on paper and whiteboards generated discussions and ideas while providing a broader view of the system. Sketches help to exhaust different ideas, provide an early overview of the project and deliver the best output possible.

WIREFRAMES

Fine-Tuning Design Direction with Wireframes

Content oriented wireframe that sold the enterprise dashboard concept

I created wireframes of every aspect of the project, from multiple UI components to modules and screens. Having such a quick and efficient rundown on the app's functional elements helped stakeholders discuss broader ideas before we delved into details.

SKETCH APP ORGANIZATION

Staying Clean and Organized with Sketch App

I love Sketch's object-oriented nature

Sketch is an ideal app for digital design, and I enjoy working with it for its speed, highly-structured production capabilities, and object-oriented nature. I maintained clean and organized Sketch files and symbols for production and consumption by other designers.

VISUAL DESIGN VARIATIONS

Creating the Most Effective Visual Design

Different visual treatments that represent currency conversion

The only way to land on the best visual design is to explore multiple design variations of each aspect of the project. This involved exhaustive rounds of exercises involving color, typographic hierarchy, icons, alignment, imagery, UI components and other design elements.

Not only did these exercises help us home in on the most effective visual design, but it led to certain stakeholders championing the UX process to other team members. This rapidly built trust within the entire team.

MOCKUPS

Painting the Picture with Pixel-Perfect Mockups

After executing multiple visual variations of all aspects of the project, I used Sketch to create detailed pixel-perfect mockups for every single need. This approach helped stakeholders see the visual progress in the system.

CUSTOM VALIDATION COMPONENTS

Designing the Solution for the Most Crucial User Need

Warnings update with realtime calculations as the user is updating values

The user can easily cycle through various errors on a page

The user can even fix errors that are in a separate but related field

The most pressing user need for the project involved real-time validation, or validating information as the user entered it. On the existing system, users who encountered errors would be sent to a separate screen that listed all the errors.

They would then be forced to take a screenshot or print out a copy of the errors listed on this error screen before heading back to the original screen where the errors initially occurred. This left users frustrated, confused and with no notion of what they were trying to fix.

My goal was to ensure the real-time validation solution accommodated all behaviors and interactions, addressed all needs and edge cases, and result in streamlined, easy-to-follow process. Rigorous testing, validation, and prototyping helped us meet that goal.

INTERNATIONAL PRODUCT ICONS

Adding Product Icons to Increase Engagement

A visual design study to validate product icons for international usage

The existing system was purely text-based with no icons or visual imagery, and we wanted to add visuals to enhance the overall experience. International product icons were a top visual choice.

Landing on just the right icons involved exploring colors and iconography to develop specific systems and associations, along with specific colors and icons for different product categories. I also wanted to future-proof the system if it expanded beyond its current target of three languages, so I researched the most likely language expansions.

One stakeholder commented he never realized so much time and effort went into making a tiny icon. This realization instantly built trust that UX was running through a methodical process that was not subjective in nature.

OPTIMIZATION VARIANTS

Establishing Elements for A/B Testing

Different text variations to test with users

When we didn't know what approach would be the most effective for certain content, we created optimization variants for A/B testing purposes with customers.

Delivering the Design

Championing UX
I collaborated with developers and engineers to guide and champion the vision.
Design Handoffs Made Easy
My aim with design handoffs was to make it as easy and painless as possible for development to move forward with confidence.
Complexities Explained
Documenting all complex behavior and interactions contributed to everyone’s thorough understanding of the design.

DESIGN GUIDELINES

Reducing Development Time with Design Guidelines

I created detailed information for every UI component, module, and screen

Because the team was new to an agile methodology and the business stakeholders were unfamiliar with software development, I provided additional guidelines that went beyond traditional redlines. Providing production-ready CSS code ensured less design work would get lost in translation.

BEHAVIORAL GUIDELINES

Using Behavioral Guidelines for Optimal Interaction Design

I flushed out complex interaction scenarios

Creating behavioral guidelines involves outlining how a user interacts with the system, describing everything the user can see and interact with on-screen. These specs helped the design team, engineering team and stakeholders all get on the same page about how the software must behave.

The guidelines also describe all possible states and scenarios, which allowed me to flush out and eliminate logical problems at an early stage of development.

TRAINING & MENTORING

Training UX Designers

I designed a rapid ideation process for other designers to generate UI ideas quickly

Training and mentoring were core components of this project, and I was able to do both. I assisted designers with research, rapid ideation, interaction design, bug tracking, file naming and rapid design variations. I also authored job descriptions, interview questions and design tests.

PSEUDOCODE PROTOTYPE

Coding to Explain Complex Logic

The validation logic was extremely complex, and many engineering team members were having difficulty understanding it. I made it easier to understand by programming a pseudo-code-based prototype in JavaScript that demonstrated the flow and the logic. This was just one of the ways I was able to consistently help the engineering team.

Project Attains Highest Levels of Success

Major Success
The project was a major success on all fronts across the board. Project results produced supreme satisfaction across the company, as well as for me personally.
Five-Star Feedback
One key stakeholder said this project was the best internal project the company had ever seen. Other feedback was exceedingly positive, as was my overall experience working on this project.
Role Completion
My role in the project was complete once the detailed UI design phase and system design were finished.

PROJECT RESULTS

Meeting all Project Goals

	Business Goals Met Business goals were achieved by creating a modern UI and laying a solid foundation for expansion through the use of the design system. My previous development experience and deep collaboration with engineers enabled me to design all UI screens, modules, and components that were fully configurable to avoid custom technical requests.

	User Goals Met Core user goals were met, providing users with an intuitive, self-guided experience. The custom validation was the most complex and satisfying UI component to design. The easiest was creating obvious help and resources, which doubled as the most useful aspect of the project.

	Best Practice Goals Met The request of senior UX leadership to record my work as I attempted different approaches and evangelized UX resulted in a model of best practices the UX department could then apply to other business units.

	Top Benefits I Gained Following the request from senior UX leadership to meticulously record my work allowed me take the entire design process to a much higher level. It helped me sell the design and educate others about UX on a deeper level. It also prompted an amazing transformation throughout the department.

	While many were initially hesitant about the UX process, they became internal champions of UX once they understood the process. They would actually repeat the UX rationale we had discussed to sell UX to their own team members. This was extremely satisfying to witness.