RBFCU

Above: It was important to explain to developers exactly how to build components that matched designs that were approved by business owners and stakeholders.

Above: It was important to explain to developers exactly how to build components that matched designs that were approved by business owners and stakeholders.

Above: After creating the diagram, I import the visual into Mural so that team members can provide input and feedback.  It is important to submit work for critique to provide the best possible solution to the stakeholders.

Above: After creating the diagram, I import the visual into Mural so that team members can provide input and feedback. It is important to submit work for critique to provide the best possible solution to the stakeholders.

Above: To help developers and stakeholder better identify exactly where the infraction occurred, I created a simple wireframe for each page we could identify within the software and labeled each page with corresponding numbers. This way they can ass…

Above: To help developers and stakeholder better identify exactly where the infraction occurred, I created a simple wireframe for each page we could identify within the software and labeled each page with corresponding numbers. This way they can associate the color and number to the Impact and Effort Scale.

5.png
8.png
 

Establishing a Style Guide
Upon arriving at RBFCU as the first UX Designer hire, one of the biggest challenges was that no design library had been established. There was no specific font library nor treatment for typography, no established color palette, and no rules for how user flows would be handled.

There was no specific framework that had been selected or implemented into upcoming design projects. So we collaborated with our development partners and vetted what frameworks would be best suited for what we wanted to achieve. Once we determined our goals, we were able to narrow down the frameworks to a couple of candidates that would work well in a desktop and mobile setting. Components in a native mobile app that had similar behaviors in a desktop platform was an important need for RBFCU.

Design and Documentation
Once a framework was selected, teammates that were working on different projects collaborated to baseline common design elements. We worked as a team to build out a Style Guide and we vetted each part of it as a group. This was a great opportunity to build a library from the ground up and collaborate with fellow designers who felt invested in what we were achieving. In about 18 months time we were able to baseline a common language that new developers and designers could adopt and understand.

In addition, we wanted to establish a brand identity unique to RBFCU. Utilizing a few custom components would set us apart from other banking entities, and demonstrate to other competitors that RFCU was becoming a forward-thinking culture that was becoming innovative.