Creating adaptive designs for an online bank
Introduction and research
Background
This project was part of my Google UX course which required me to create an adaptive design for both mobile and desktop. I was given a selection of prompts and I chose to create a user flow for the application process of setting up a new bank account. I chose this project because I wanted to learn more about the finance industry and how UX- and UI-design work within it.
A user navigating the mobile app version of the prototypeCompetitive audit
To gain a better understanding of how application process for bank accounts work, it was important to survey and analyze a variety of competitors. In my competitive audit, I included two direct competitors (Lloyd’s Bank and Barclays) and two indirect competitors (Monzo and Revolut).
From this analysis, two key opportunities emerged. Firstly, there was a need to strike a balance between traditional and modern approaches to the user interface and finding a middle ground that feels “tech-y" while still being in line with classic guidelines that bank website designs have a tendency to stick to.
Secondly, ensuring that users could complete the registration process on either desktop or mobile without being forced to switch platforms was crucial for a good user experience. These types of improvements could help both traditional and modern banks create apps and websites that better suit their users.
Survey
To identify possible pain points when setting up a bank account online, I conducted a survey in which I asked participants about their previous experiences with online banking. I made sure to ask users of a variety of ages, familial statuses, genders and ethnicities about their experiences.
The survey indicated that over 65% of participants find that a lack of free time is a main reason why they are unable to complete the process of setting up a bank account online. Other popular reasons included a lack of a need to ever change bank accounts once they had chosen one and preferring to complete the process in person at a high street bank.
Opportunities and challenges
Opportunity #1 (Creating an effective UI):
A clear observation was that the traditional banks had a very traditional aesthetic while the modern app-based financial orgs could sometimes be “flashy” to the point of distraction. In my design, I will strive to create a balance between these two approaches.
Opportunity #2 (the application process):
A pain point I came across was that I was not able to complete the registration process solely via the desktop version. It would improve the overall UX if users are able to complete the registration process on both platforms.
Challenge #1 (disengaging the user):
Registering or applying for a bank account is a detailed process. From a UX perspective, there is the challenge to make sure that users remained engaged throughout the lengthy process. It is important to create a streamlined user flow to help ensure lead conversions from a sales and marketing perspective.
Challenge #2 (overwhelming the user):
Banks and financial service providers in general throw a lot of different products and services at their users. It is important to make sure that the main CTA dominates the landing or home page so that a user can be easily directed to where they need to go.
Building empathy
User personas
Once I had acquired a better sense of the conventions and common pain points that come up in the online banking world, I started the process of building empathy with users by creating two personas.
User Map
After this, I mapped out all the stages that a user goes through when setting up a bank account online. This signalled the linear nature of the process which can be observed in the user map diagram below:
Customer Experience Map
I also created a customer experience map to consider a user’s thoughts, feelings and pain points throughout the user flow.
Information Architecture
Given that this particular user flow is a task-based user flow, the architecture represents a linear structure where each page equates to a different step of the application process. It is important that users are able to go back and amend previously inputted details as well as have the option of completely exiting the process.
Wireframing, prototyping, usability testing
The ideation phase
Utilizing the creative exercise of “Crazy Eights”, I drafted various initial designs for how the visual information could be displayed. I then developed one of my ideas into paper prototypes for both a desktop and mobile version, considering how the information should be adapted for mobile users so they can have an engaging experience with the Rainbow Bank app.
Creating paper prototypes like this allowed for rapid feedback and early identification of possible pain points. Using these paper wireframes as my base, I then started building them in Figma.
Tablet wireframes in FigmaDesktop wireframes in FigmaMobile wireframes in FigmaWireframes
After establishing the adaptive designs for desktop, tablet and mobile devices, I began to work on the design system to transform the wireframes into low and high-fidelity prototypes.
The design stage
After establishing the adaptive designs for desktop, tablet and mobile devices, I began to work on the design system to transform the wireframes into low- and high-fidelity prototypes. Due to practical reasons, I decided to only develop the mobile and desktop versions to this stage.
I chose the K2D font because it conveyed a sense of futurism and professionalism. I also developed a rainbow gradient background in line with the company’s brand identity. I used a variety of graphics to further enhance the sense of futurism.
A mock up of the "Household Information page for the desktop versionA mock up of the "Accounts Overview" screen for the mobile versionUsability study
For the usability study, I asked participants of a variety of ages, genders and professions to perform the same user flow of setting up a bank account for both the mobile and desktop version.
I was interested to see whether the adaptive design was more successful in either of the versions, as well as investigating whether the design system was suitable for the brand identity of the product.
Here were the findings from the usability study:
Overall cohesion with the desktop app although the background gradients don’t match
It would be more intuitive to swipe rather than tap through menus
Lack of indication of responsible data handling made users feel insecure about giving their data.
Mobile version
The prototype has a clear design and identity
There is currently too much text in certain areas
Sometimes difficult to know if a box has been selected as the change in text colour isnt’t always clear.
Desktop version
Desktop changes
In response to the usability study feedback, I made a series of changes to the web version of the prototype. For example, the background gradient is now identical to the mobile version. Users can also now hover over steps 1-7 to check which step they are on via a pop-up visible on the far-right. The same padlock icon is there with a pop up data protection message
Mobile changes
One of the main concerns from the usability study, was that the first prototype had no indication of data security or encryption. This was a pain point for users as they felt unsafe submitting personal information for the purpose of the application.
In the updated version, I added an initial data protection screen that explained Rainbow Bank’s data policy and provided a link to the website for more information.
On each screen, I also added a “padlock” icon which when hovered over, gives an explanation of how Rainbow Bank stores data to further reassure the user.
I also added a back arrow next to the “Home” icon at the top-left of the screen so users can navigate to the top or bottom to return to a previous stage.
Design system changes
I also made some important changes to the UI, including:
Highlighted buttons now are highlighted via a thick rainbow rim and have lost the black fill.
When selecting amongst several options, the non-chosen options are “greyed" out.
Text boxes now contain bold font with a rainbow rim for a more stylistic impression.
Conclusion and further thoughts
Accessibility Considerations
In order to preserve the “Rainbow” UI concept, I had to stray away from standard design rules (such as the 60-30-10 colour rule) and in its place use a gradient rainbow colour. Despite this, I optimised the equitability
and accessibility of my design by considering the following:
After the first round of feedback, I reworked the selectable buttons to have a rainbow rim instead of the text itself changing colour.
This made it a lot easier for all users to see what they had selected.
Consistent font, icons and colour scheme created a sense of familiarity and predictability with users. This also served to strengthen the brand identity.I tried to utilize empty space and large margins to create a clean design that would not overwhelm or confuse users.
A user on the customer information page of the application form Areas for Improvement
UI Issues:
If I were to do the project again, I would try to adhere more closely to standard conventions to ensure the creation of an industry-standard design. In defence of my decision, I think the rainbow gradient background is worked carefully and does not overwhelm the user too much, especially in its current iteration.
Further iterations and usability tests:
It would have been a good idea to keep re-iterating the design to produce an optimized prototype.
Delving deeper into adaptive design:
In this project, I started exploring design approaches such as adaptive and responsive design. I made three formats in the wireframe stage (i.e. desktop, tablet and mobile) and then two formats for the low and high-fidelity stages (desktop and mobile). If I were to do the project again, I would pay closer attention to industry methods in terms of creating compelling adaptive designs. For example, clearly designating break points to help with the handover to engineers when building the coding architecture of the product and design.
Improve the landing page (especially for the website):
For high lead conversion rates, it is essential to make a strong visual impression. As my UI skills improve, I would eventually like to overhaul the landing page design.
Final Thoughts
From the beginning to the end of this project, my knowledge of UX and UI grew significantly. The sheer size and ambition of this project meant I spent a lot of time getting comfortable with techniques such as auto-layout and other features in Figma.
I also greatly enjoyed researching financial products and seeing how financial organizations and banks choose to present themselves. I noticed that there is a wide spectrum of aesthetic decisions that come into play based on the audience one is targeting. I am reassured that my design maintains universal appeal while having a modern “feel”.
As previously mentioned, this project also got me thinking about the decisions product managers must make regarding the cross-platform viability of their products. Designing adaptive design formats for website and desktop was a technically demanding yet engaging way to delve deeper into UX and design theory.
To develop this product in the future, I would consider a UI design overhaul employing standard design techniques and a more sparing use of the rainbow color scheme. It would also be interesting to cross-compare the design process of making a banking app for desktop and mobile using a responsive design approach instead of an adaptive one.
To sum up this project, I was happy with what I managed to achieve and I felt much more confident as a designer and Figma user by the end of the process.