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.


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.


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.


Auditing Each Regional Deployment

Each regional deployment was very different
Each regional deployment was very different
Each regional deployment was very different
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.


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.


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.


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.


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.


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.


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.


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.


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.


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.


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.


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.


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.


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.


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.


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.


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 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.


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.


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.
Need a Hands-On Product Designer?

I'd love to help transform your vision into a functional reality. I'm a full-stack
UX designer that covers the entire project cycle, from early stage strategy
and research to pixel-perfect execution.

My background and experience in technology, design, business, psychology
and programming combine to produce results that delight customers and
enhance business. Call or email me today.

Phone: 415-596-6342 | Email:

Peer to peer lending platform with social, community, and gamification.
Virtual meetings with smart layouts and rich immersion.