Intro
A web-based enterprise architecture dashboard.
Problem
The platform was growing quickly. Executives from different areas of the company requested new and improved features, particularly more complex data visualizations. The entire platform lacks a design system, hi-fidelity designs, and has significant usability gaps.
Work Covered & Teams
Our team: Lead Engineering Manager, Lead Architect, UI/UX Designer, 1x Sr. Engineer, 2x Mid-level Engineers.
Client team: Regional Director of Engineering, Associate Director of Security & Oversight.
Design Tools
Figma, Jira, Slack.
Dev Stack
SQL, Java, SpringBoot, React, PrimeReact, and d3.js.
Client Background
This global credit union is the largest natural member credit union in the United States, both in asset size and in membership.
Project Background
Engineering driven project for two years that started as a small pilot project that quickly grew into a crucial, highly visible application with increasing executive attention however, no formal design work. The platform’s primary focus is helping the client connect and visualize data, and track and manage the migration of legacy banking applications to a new technology ecosystem.
Challenge
Build a flexible, extensible, design system for the entire platform, create hi-fidelity designs for all existing screens and components. Document usability concerns and create a backlog of issues. Establish a progressive workflow to gather requirements for designs with a team of engineers who have never worked with a design role before.
Goals
Improve the visuals of the existing interface and add new features.
Ways of Working
The development team and I bonded quickly. I was able to gain their trust, establish my value as team-member right from the beginning over my background in front-end web design. We were able to ease their transition to working with a designer seamlessly.
The engineers explained that their team was “a well oiled machine” and will be able to consume design work quickly, and were eager to move straight into building new features. I explained that we will be able to move at a fast pace if we allow time to set up their style guide and design system before doing any new feature work.
I spent the first and second week creating a style guide. The client was not able to get me access to their virtual machine for several weeks. We had originally planned to get me access to the platform and use the browser inspector to start documenting styles for components. Because of the access delay, I had to build the entire style guide and design system from screen shots and their styled component React.js files.
New Features
With our design system and style guide in complete, the engineers were impressed that I was able to work with code to do the work and excited to see the platform as designs, with the anticipation of being able to mock-up designs quickly, create prototypes, and start working on new features.
The lead engineer preferred to take point on brainstorming and requirements for one-off improvements and new features. We worked in Slack and Figma, the lead engineer started by sending me a small component she was working on, and asked for my input on the direction. We worked this way for some time even on more complex features. I adapted to the way they needed to work, but also explained that we will need to transition to our design tool for the speed and efficiency of collaboration that the design tool facilitates. We eventually spent more and more time using the commenting system in our Figma file.
New Feature Prototypes
I presented designs to our two product owners once a week, and they shared their feedback. The engineers already understood the designs well before we presented them, the product owners placed a lot of trust in the engineering team to provide a majority of the requirements, with minimal requests and rework asked by the product owner's.
The engineering lead and myself co-wrote the stories in Jira for each sprint.