affordIQ - Case Study

User Persona

The data I used in the prototype was created for a persona called Nigel Young, the first of 3 personas. Nigel Young's data profile was based on research I conducted on salaries of entry level knowledge workers, average flat prices and estimated cost of living for a single person living in shared accommodation. I also used my lived experience as well as the experiences of people I know.

Visual Design

In order to focus on the utility of the UI and UX, I took a wireframe approach to the VD. I used a monochromatic, black and white colour palette with sharp corners.

User Flow

Sign In

Onboarding 

• Welcome 
• Open Banking - link bank accounts

Main App - Financial Insights

• A complete spending and income overview and break down
• Affordability analysis based on income and spending breakdown

Goal Setting

• Property Search - give life to home buying aspirations turning a property search into a financial goal

Budgeting - set spending targets based on current spending patterns

User Research

I performed small scale user research through user interviews and usability testing with the XD prototype. The overall concept was validated through our interviews. The usability testing validated the structure of the user flow and small friction points were found and corrected in the UI.

Heuristic Evaluation

The main weakness I found in the product concept was that the property search was not related to what a user could afford. A user could easily create a goal that was not possible to achieve in the time they had chosen. In addition, the spending targets were not related/connected to their goal. I also concluded that the navigation needed to be revisited as there wasn't a universal navigation bar and all areas needed to be accessed from the home screen.

Industry Analysis

Industry feedback gathered by the founder and other senior management suggested that the app should be even more focused around mortgage affordability and home buyers.

Visual Design

With the Development of the BlackArrow brand it was now time to add colour and branding to the visual design. I wanted to maintain a raw wireframe, utilitarian quality to the visual design so as not to lose focus on refining the customer journey and information architecture of the app. This coincided with the establishment of the BlackArrow branding which I designed under the direction of the marketing manager and CTO.

User Flow

I expanded the onboarding to introduce the new navigation bar. I also defined the Open Bank flow further based on the Open Banking CX guidelines at the time. 3 main user flows are identified for a user post  onboarding. 

• Manual Categorisation - input is needed by the user to complete categorisation of their banking transactions.
• Affordability - additional information is needed by the user to calculate their affordability.
• Goal setting - the overall objective of the app is for the user to set a financial goal.

Navigation and Information Architecture

As identified in the heuristic evaluation of my first prototype, a universal navigation bar was needed. This required consolidating 6 main screens to at least 5, but I wanted to aim for 4 to keep the architecture as simple as possible. Affordability, Property Centre and Goal Centre were combined to one screen with 2 states depending on whether a goal had been set or not. I also explored the concept of a large app bar with bigger icons and more descriptive titles.

Business Logic

It was during the development of our web prototype that the logic behind affordability, goal setting and budgeting was defined. With some guidance from the product manager, combined with desk top research, I defined and documented the logic for the developers to implement:

• Affordability - I designed the affordability algorithm using excel, establishing how affordability was calculated using open banking data.
• Financial Goal - I defined the logic for how a property search would only be based on affordability, limiting the user to creating a financial goal that is achievable.
• Budgeting - I defined the logic for how a user sets spending targets based on an achievable financial goal and spending trends, setting an achievable surplus/savings goal.

Heuristic Evaluation

Through my evaluation and feedback from the greater team it was evident that onboarding needed to be more extensive. This included educational content, user inputs to complete categorisation of banking transactions, and user inputs to establish affordability. I also decided the large navigation bar was not providing much value when considering the real-estate it was taking up. It was also breaking the established convention for mobile app navigation bars.

Competitor Analysis

During this phase I conducted extensive analysis on 2 Neo-Banking apps. Looking at onboarding flows (including ID validation), the set-up of joint accounts and how spending categorisation and analysis was presented to the user.

Visual Design & Branding 

With the information architecture, navigation and user flow becoming more refined it was now time to focus on the visual design. Taking the Black Opal element that I had created for the BlackArrow branding I designed an "Opal Background". This leant itself to a dark mode based design although I kept the light mode UI for interaction and information heavy cards and panels. I established a colour palette that translated across dark mode and light mode and had a more millennial focus. We had now established our target audience to be first time buyers who were generally younger. From the new visual design, a new brand was established that still maintained a link with the BlackArrow parent brand but had it own identity that was more edgy and progressive. The name affordIQ was adopted and I designed a new logo to complete the brand.

Accessibility

The colour palette I designed also met WCAG AA standards for contrast. Colour is never used solely to convey meaning. It is only used in concert with other elements such as icons and text. Icons are never used on their own they are always used in conjunction with text. When developing the app we ensured native operating system controls of text size were implemented.

User Flow

Starting with registration, I defined the full onboarding flow in a high fidelity prototype, refining the visual design as I proceeded. As established in the heuristic evaluation of the web prototype, onboarding needed to include educational content, user inputs to complete categorisation of banking transactions and user inputs to establish affordability. The next step after these were completed was to set a home buying goal therefore I included this in the onboarding flow. I also finalised the main screens for the app post onboarding including account settings and notifications. 

Navigation and Information Architecture 

The large universal navigation bar was abandoned and replaced with a conventional app navigation bar but still remained as 4 buttons. The Property Centre screen became the Goal screen. Affordability was moved to it's own screen as that had become a refined feature and central to the app. Break Down became the Budget screen and the Dashboard was renamed Home screen.

Heuristic Evaluation

As part of the educational content and new branding it was decided that a mascot/character was needed to embody the app and guide the customer on their journey. A team workshop gave rise to Alfie the cat robot. I created and evolved the character during this phase of the product. Alfie was included as still images within the onboarding flow.

Marketing Messaging

For the marketing messaging on our website, social media, App Store and Google Play I created "Own It", which comprises of 3 parts. Own Your Finances, Own Your Future, and Own Your Home. These are the stages a customer goes through along their journey to owning a home. As well as being used in our marketing and advertising, the "Own It" messaging is used within the app to mark major milestones.

Usability Testing

Once the app was released we performed usability testing. The main insight we uncovered was the onboarding journey had become quite arduous, especially for impatient/time poor users. We also uncovered some small friction points, the major one being the navigation on sign post screens. 

Design System

 We started on a design system to consolidate the visual design and component patterns into a single source of truth for all teams. This involved working with the QA engineer and the app teams to have unit tests for the iOS and Android component libraries testing that the design system is implemented correctly. 

Next Steps

Based on our usability testing, I completed the wireframes for a user journey that removed goal setting from the onboarding journey. The Home screen and Goal screen instead would have CTAs that lead the customer to set a goal and budget, post onboarding. I was also defining the logic  for a goal setting flow for users who do not produce a regular monthly surplus.