![](https://static.wixstatic.com/media/3021bd_35a0c4c73ffb43ed96401edbcc5dea3b~mv2.jpg/v1/fill/w_980,h_427,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/3021bd_35a0c4c73ffb43ed96401edbcc5dea3b~mv2.jpg)
NAB
UX LEAD
I joined NAB on a fixed-term contract as the UX Lead integrated into their Design Chapter. My work was key to define the experience strategy across the initiatives, Engage & Grow, and Protect What Matters Insurance.
During my engagement, Capgemini acquired both RXP (the company I initially engaged NAB) and frog. During my NAB tenure, I moved to frog as Associate Director.
Some of my work is tricky to frame in a portfolio piece because of the sensitive nature of the work with NAB. I have outlined various processes to provide some context.
To comply with my non-disclosure agreement, I have omitted and obfuscated confidential information in these case studies. The information in this case study is my own and does not necessarily reflect the views of NAB.
ENGAGE & GROW
I initially joined NAB as Design Lead on the Engage & Grow domain.
​
I worked on several projects including Online Account Closing, Card Swap and our Personal Finance Manager service. I worked very closely with the Product team to align our thinking to ensure we were solving the correct problem for the correct reasons. I would then work on breaking down the bigger problems into smaller, more digestible pieces to allow us to deliver in true Agile. I created and conducted several rounds of usability testing which directly fed into the direction of the products. I pioneered several elements, particularly in PFM, including contextual tagging and filtering, and Spend Over Time with specific merchants.
As a key member of the Financial Hardship project, I made sure we were creating useful and valuable content and real, actionable, support for all NAB customers.
​
Please note, all of my NAB work is under NDA so I cannot show anything here of my working files.
Money Tracker (PFM)
Money Tracker is NAB's Personal Finance Manager (PFM) solution.
Money Tracker was an existing product that NAB had had for a while but was sitting unloved. A product owner I had worked with on other projects asked me to blow the dust off and take a look as part of the Engage & Grow scope.
​
Money Tracker was pretty dated and had limited functionality. That being said, Money Tracker had its fans and a very vocal cohort that wasn't shy about complaining when something was changed.
![](https://static.wixstatic.com/media/3021bd_c3e07322624143a79432814602edb924~mv2.jpeg/v1/fill/w_599,h_533,al_c,q_80,usm_0.66_1.00_0.01,enc_auto/3021bd_c3e07322624143a79432814602edb924~mv2.jpeg)
As usual, I identify the problem we're trying to solve.
​
Money Tracker
​
What type of product are we designing?
A digital spend tracker tool embedded within internet banking.
Who are the main users?
Personal customers who want to track their spending, understand where their money goes, understand spending trends and where they could save money.
Where is the product being used?
First launch will include IB and mobile with a roadmap to roll out to business users.
Why do they need it to exist?
To track spending across all personal NAB accounts and replace existing ways of monitoring spending.
How will it be used?
It will vary from person to person. Some power users will access it daily to monitor all spending. Others will use it fortnightly or monthly aligned with their salary deposits. Others will use it less frequently potentially around tax time.
Conduct interviews and surveys, whatever is necessary to build a robust picture of your potential users.
​
I use many techniques to define the problem including empathy maps, journeys, workshops, paper cut-outs and even role playing!
![Dashboards - Experience Vision - Frame 1](https://static.wixstatic.com/media/3021bd_1a685531d9fd4471a4d768c6492b083c~mv2.jpg/v1/fill/w_600,h_387,al_c,q_80,usm_0.66_1.00_0.01,enc_auto/Dashboards%20-%20Experience%20Vision%20-%20Frame%201.jpg)
![Dashboards - Experience Vision - Frame 2](https://static.wixstatic.com/media/3021bd_50be68a7b85b42cd842304e621e53e54~mv2.jpg/v1/fill/w_600,h_386,al_c,q_80,usm_0.66_1.00_0.01,enc_auto/Dashboards%20-%20Experience%20Vision%20-%20Frame%202.jpg)
![Design journey - Frame 2.jpg](https://static.wixstatic.com/media/3021bd_d0517c6675294d16a2de24fc19deeee0~mv2.jpg/v1/fill/w_971,h_342,al_c,q_80,usm_0.66_1.00_0.01,enc_auto/Design%20journey%20-%20Frame%202.jpg)
Through workshops, observation, analytics and anecdotal feedback I mapped out the flows with a focus on the most desirable and elegant experience - here you should be uncovering those pain points that currently exist.
Most of the time these are completely unknown and it's our job to discover them.
![Research_edited.jpg](https://static.wixstatic.com/media/3021bd_3167a1e8f6e84c21b8b5d94196b43028~mv2.jpg/v1/fill/w_983,h_327,al_c,q_80,usm_0.66_1.00_0.01,enc_auto/Research_edited.jpg)
![Screen Shot 2021-02-17 at 3.59.06 pm.png](https://static.wixstatic.com/media/3021bd_625425169c8948509fbefcd7f8b48085~mv2.png/v1/fill/w_980,h_542,al_c,q_90,usm_0.66_1.00_0.01,enc_auto/3021bd_625425169c8948509fbefcd7f8b48085~mv2.png)
Competitor analysis
I conducted indepth competitor analysis. There are a few companies out there that offer similar services so it's key to discover what they and map their experience offering.
Sketching and whiteboarding
Sketching is such a powerful way to quickly communicate ideas that in my opinion, it is still unmatched in its ability to create disposable low fidelity designs. I sketch a lot. Whether it is in my notepad getting my ideas recorded or on a whiteboard to communicate a new type of interface you will generally find me with a pen or pencil in my hand. It allows for less preciousness around any design, everything is so much more disposable in this format and that is exactly what you want at this stage. It also encourages broad feedback ("How do I get there?") as opposed to narrow feedback ("I don't like that font") which again is exactly what is required at this time.
For the last year it's been harder to sketch and whiteboard in person so I've been an avid user of Freehand and Miro to get ideas out there.
![](https://static.wixstatic.com/media/3021bd_5f3d60d3bf1a45ef9c2854f53a4a03b6~mv2.png/v1/fill/w_728,h_537,al_c,q_90,usm_0.66_1.00_0.01,enc_auto/3021bd_5f3d60d3bf1a45ef9c2854f53a4a03b6~mv2.png)
![](https://static.wixstatic.com/media/3021bd_7577033b9bda4ab7a7353236ff8dc50c~mv2.png/v1/fill/w_599,h_287,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/3021bd_7577033b9bda4ab7a7353236ff8dc50c~mv2.png)
![](https://static.wixstatic.com/media/3021bd_3764f5b147014d90b709552611daba8f~mv2.png/v1/fill/w_600,h_305,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/3021bd_3764f5b147014d90b709552611daba8f~mv2.png)
Wireframes
I tend to combine my early wireframes with my projected flow of the product. They inform a rough guide for the layout. They should be clear and simple, no visual design or aesthetics here. They can serve as a good conduit with the stakeholders, signing off on placement/flow (broad feedback) etc rather than getting bogged down in font choice (narrow feedback) etc. Include lots of comments and annotations on them.
​
* Note, I cannot use wireframes from the project so I've used other wires to provide context. They were awesome though with clickable prototypes and everything. You'll just have to trust me…
![Screen Shot 2021-02-18 at 9.38.29 am.png](https://static.wixstatic.com/media/3021bd_57bf3b3ae74442b281c1b7afb1223566~mv2.png/v1/fill/w_1389,h_575,al_c,q_90,usm_0.66_1.00_0.01,enc_auto/Screen%20Shot%202021-02-18%20at%209_38_29%20am.png)
![Screen Shot 2021-02-18 at 11.43.40 am.pn](https://static.wixstatic.com/media/3021bd_50387738bc1447bcb3ea921615165d01~mv2.png/v1/fill/w_544,h_177,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/Screen%20Shot%202021-02-18%20at%2011_43_40%20am_pn.png)
![Screen Shot 2021-02-18 at 11.39.42 am.pn](https://static.wixstatic.com/media/3021bd_9144b3d1da3848a99ef84a89a9046016~mv2.png/v1/fill/w_1390,h_772,al_c,q_90,usm_0.66_1.00_0.01,enc_auto/Screen%20Shot%202021-02-18%20at%2011_39_42%20am_pn.png)
During this phase, I created some pretty cool innovative new features including contextual tagging and filtering, and Spend Over Time with specific merchants.
​
This was a really exciting time and using my processes allowed me to validate these features quickly and build a compelling case study for each.
Testing & validating
How many test participants you involve, how closely your test participants match your actual users, and how many iterations of testing you run are all decisions shaped by budget and time constraints.
Usability testing is straightforward enough that anyone can - and should - experience running one. Being in the same room (or Zoom call!) while someone uses your product is a powerful trigger for creating empathy with users.
​
I use many different techniques to test and validate. These can be workshops using drawings, paper-cutouts, prototypes and prod builds through to diary studies, remote testing and surveys.
​
I wrote comprehensive reports detailing every interaction the subjects experienced. I created a scoring system and prioritised each finding and logged them back into Jira.
![Testing vid.png](https://static.wixstatic.com/media/3021bd_b20f595b674b449993d8be8e3c280247~mv2.png/v1/fill/w_600,h_271,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/Testing%20vid.png)
![Testing vid 2.png](https://static.wixstatic.com/media/3021bd_0714db23897649cbacfb0671289f8c72~mv2.png/v1/fill/w_600,h_271,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/Testing%20vid%202.png)
![Confluence.png](https://static.wixstatic.com/media/3021bd_b529bdc2a69c4fbb99d7329d466ca2a0~mv2.png/v1/fill/w_380,h_512,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/Confluence.png)
UI design & application
Design Systems
It's at this point that I will engage my UI visual designers. Now we have a pretty solid rough approximation of the experience we're trying to achieve it's time to apply the UI. Working with the existing NAB design system we created the first iteration.
​
Unfortunately I cannot share any assets from NAB here but I'm going to talk a little about my processes and working with a Design System.
![DSFramework (1).png](https://static.wixstatic.com/media/3021bd_d6836d469b534515812adacc19bf176e~mv2.png/v1/fill/w_700,h_609,al_c,q_90,usm_0.66_1.00_0.01,enc_auto/DSFramework%20(1).png)
I firmly believe that at the core of any successful design organisation lies a foundation built upon thoughtful operations, robust tool governance, and streamlined processes. When it comes to developing a design system, its impact ripples across every facet of an organisation, necessitating outreach, collaboration, and enthusiastic buy-in. It's about fostering a culture of participation, establishing meaningful rituals, and showcasing tangible proof points. These elements are pivotal for a successful launch and the sustained creation of an optimal environment where teams not only feel empowered but are also well-equipped to work efficiently, consistently upholding the highest standards of digital excellence.
In my role, I don't just stop at crafting design libraries using cutting-edge tools and industry best practices. I take it a step further by providing comprehensive support for end-to-end UI toolkits. These toolkits seamlessly transform design tokens extracted from Figma into various code formats, including the most widely used web languages like CSS, as well as formats compatible with iOS and Android. My expertise allows me to construct this token toolchain, either by leveraging your organisation’s existing design system or building one from the ground up. When this solution is implemented in production, it translates into significant cost savings
Designers appreciate cohesiveness.
Engineers value efficiencies.
And pivotally, executives appreciate value.
By understanding the value of Design System elements, we can track and communicate the success of our Design System and make data-driven decisions on future improvements.
Tracking and measuring its effectiveness should be embedded into the end-to-end design process, with clear goals and objectives to inform key performance indicators (KPIs). Some common KPIs include usability, efficiency, consistency, and user satisfaction.
![Group 3.png](https://static.wixstatic.com/media/3021bd_ec872b4c4a4d4fa39885d6a00dec8504~mv2.png/v1/fill/w_655,h_772,al_c,q_90,enc_auto/Group%203.png)
Delivery
We were able to deliver our PFM, now called Spending, iterating across agile sprints. I'm pleased where we got with Spending and excited to see what the future brings.
![](https://static.wixstatic.com/media/3021bd_a85a48cd8fe044cea93c134ce83e31ff~mv2.png/v1/fill/w_1218,h_403,al_c,q_90,usm_0.66_1.00_0.01,enc_auto/3021bd_a85a48cd8fe044cea93c134ce83e31ff~mv2.png)