Digital Banker template library

Due to our team's rapid growth and the need to streamline our workflow, we recognised the importance of optimising our design processes. However, we faced challenges such as varying levels of UI experience among team members and contractors, as well as the desire to maintain design consistency. To address these issues, we made the decision to develop a Digital Banker design library.

My role in the project
I was responsible for several key tasks. Firstly, I conducted audits of the existing design patterns to identify areas for improvement. Additionally, I facilitated workshops with the design team to gather input and insights. Based on the findings, I then proceeded to create new components and templates that aligned with the Digital Banker design library.

To ensure seamless integration, I collaborated closely with the Digital Banker management, presenting and discussing completed components with them. This step was crucial to gain their approval and ensure that the design met their requirements and expectations.

Lastly, I handled the handoff process by providing the necessary design files to the developers. This ensured that they had all the resources and information they needed to implement the designs accurately and efficiently.

Design approach 

1. Backlog: The team, including myself, determined the priority items for design delivery. These could be components or pages that were either high-use items or prioritised for delivery.

2. Auditing: If a component had already been designed, myself and our graduate would conduct an audit. We documented what worked and what didn't work with the component, gathering input from the team on its strengths and weaknesses.

3. Collaboration and Discussion: We selected the item to be worked on and collaborated with the team to further refine it. This involved discussing the desired direction, which could be influenced by the strategic direction of the design team, such as removing grey backgrounds and elements.

4. Template and Documentation: Based on the inputs and discussions, we experimented with different design options using components from the existing design library. We considered the needs of the brand and users when making design decisions.

5. Feedback and Iteration: We presented the designs to the team, gathering feedback and making any necessary changes. Sometimes, we also presented one or two alternate designs for comparison.
   We also presented the designs to external teams, considering accessibility and incorporating input from the wider design team.

6. Sign-off: Once the designs were approved by the team, we documented the sign-off to ensure clarity and accountability.

7. Socialisation: The finalised design was then presented to the wider team, including representatives for our end users. We provided design rationale and incorporated any feedback received.

8. Delivery Backlog: The documented design was added to the delivery backlog to be implemented by our development team.

Outcomes

The project yielded significant improvements to the designer workflow, resulting in increased efficiency and allowing more time to be allocated to solving complex design problems. By creating a Digital Banker design library and implementing reoccurring patterns, we were able to enhance design consistency throughout the project.

The development of reoccurring patterns proved to be particularly valuable, as they could be applied across multiple features. This approach not only streamlined the design process but also increased efficiency for both designers and developers. By utilizing these established patterns, designers could work more effectively, knowing that they were building upon proven solutions. This, in turn, enabled developers to implement the designs more efficiently, as they were already familiar with the patterns being used.

Ultimately, the improvements to the designer workflow and the implementation of reoccurring patterns had a dual benefit of freeing up time for tackling more complex design challenges and enhancing design consistency throughout the project.