Xperience — A Fintech UX/UI case study
A fintech platform concept that combines banking functionalities and social aspects.
Introduction
Whilst studying a UX/UI course at Love Circular, I was given a 2-week brief which required us to develop a fintech platform concept that combines banking functionalities and social aspects. The target audience are Gen Zs and Millennials.
Project duration: 2 weeks
Roles: UX Research, UX Design, UI Design, Branding, Graphic design
Research tools: Maze, Google forms
Design tools: Figma, Invision freehand, In-design, Illustrator, After effects
What it should achieve
- A product that blends current tech and is extensible for added features as time goes on.
- A digital space that merges a two needs, social interaction without physical interaction and basic expected banking needs.
- Encouraged continued access, ie. similar to twitter, IG, etc.
- A secure platform to push out marketing material for events and promos.
The deliverables:
- 3 pages: Dashboard/home screen and 2 other pages of your choosing.
- Mobile app 375 x Auto and a Website
The problem
Banking has evolved from users having to go in-store to check balances to now being able to send and withdraw money all from the convenience of their phone. In this digital age, social media apps are being used more than ever and brands such as Instagram have adapted to this, for example, you can shop for items directly from the Instagram app. This leaves room for an app that caters to banking needs as well as allowing for digital interaction and a new way to buy into experiences.
How might we enhance the purchasing experience for this group of people, merging the two needs of online social interaction and basic banking needs whilst also in cooperating the latest technology?
Discovery
I followed the double diamond design process which is: Discover, Define, Develop, and Test.
I started by researching Millennials and Gen Zs, in general, then I created a questionnaire and also conducted interviews. I chose these two research methods as I was able to gather both quantitative and qualitative data.
User demogrpahic
Gen Zs are a generation born into a highly digital world, therefore they expect the same speed online as they would offline. They are the most tech-loving generation as they were likely to use technology from a young age.
It is found that Gen Z:
- Like to pay for services as quickly and conveniently as possible using contactless pay service such as Apple pay, and Google pay.
- Financially savvy
- Entrepreneurial
“Today consumers expect to get what they want when they want it. By 2020, they’ll be expecting what they want how they want it. And by 2025, before they want it…” — https://www.sun-strategy.com/assets/Uploads/SBSThePurchasingPowerOfGenZ2.pdf
Millennials now make up to a third of the UK population, their decisions have a big impact on the economy therefore organisations must be ready to meet their specific needs.
It is found that Millennials:
- Were predicted to spend 3.8% more on lifestyle activities and 5.0% on holidays.
- Are more interested in experiences rather than materialistic things.
- 90% of millennials share, review or recommend their favorite restaurants, brands, and experiences.
Survey
I surveyed 27 users (24 were millennials) to get an understanding of users’ reasons for using banking apps and what they think of the apps. I was also able to gain an understanding of how users plan group events which will be one of the key features in the app as well as problems with existing banking apps.
Findings from the survey:
- 88.9% of those that took the survey are Millenials
- Barclays and Monzo are the most used banks
- 31.3% use their banking app to check their balance
- 28.1% use banking apps to monitor their spending
- The features people find the most useful are money pots, scheduling payments, and monitoring spending patterns.
- 56% plan group events on WhatsApp
- 80% of people have one person pay for group holidays whom they then payback
- 83% believe that seeing videos/images of people's experiences influences the likelihood of them traveling to the same destination.
I then categorized the answers from 2 of the questions, I ordered them by the different Banks. From this, I saw that most people don't like the UI of the Barclays app and some found their banking apps hard to navigate.
Interviews
I then conducted interviews with two users (both Gen Zs) in order to get deeper insight and to find out the reasons why users may not use some features that I wanted to include. The interview allowed me to get more qualitative data than the questionaire and find out how users felt about certain features.
Pain points
From my user research I was able to identify the following pain points:
- Saving money and budgeting is hard to do.
- Necessary information such as spending habits are hard to find
- A modern design that is up to date with today’s design standards and trends
- Planning group activities can be long and tedious
- Remembering to make payments
Define
User personas
Going on from my research I then created 2 user personas that I made sure to keep referring to as I was designing.
Develop
Key features
As well as some standard banking features are some additional features that should be on the app such as:
- Rounding up — Purchases are rounded up, the degree of rounding up can be decided by the user. It can be to the nearest £1 of £10. From my user research, people find it hard to save therefore this feature will help users save without having to put much thought into it.
- Explore — Users can find and explore different life experiences directly on the app, as 90% of millennials share, review or recommend their favorite restaurants, brands, and experiences this feature will help users find new experiences. They can then buy these experiences individually or as a group. Also, this feature will keep users returning to the app to find an experience then buy it.
- Stories — Users can add and view experiences posted by others, they gain points the more experiences they share, from the user research the majority (83% surveyed) are influenced by others images/videos, therefore this feature will keep users returning to the app whilst as they can receive discounts by posting stories.
- Plan + Go — Planning made easy with in-app messaging that allows users to plan group outings and schedule payments. From user interviews, people I saw users would find it beneficial to plan and pay for life experiences all on one app as it saves the hassle of using different platforms.
- Points — A point system that can be redeemed on the app as a group or individually, this feature will keep users engaged with the app.
- Learning — Live videos on topics such as a mortgage, budgeting as a student, etc, this feature is useful for the target audience because a lot of people in this generation are business owners and some may face difficulties finding a job due to the current financial times and due to COVID-19.
Mind map
From the user research and my ideas for the app, I created a mind map. I thought of the different functions of the app and created relevant branches. I based the mind map on a nav and the different information that would be found in each section.
User flow
I then did a user flow diagram to establish a storyline for the app. Doing this helped me identify out the different screeens that I would need to design.
Design style guide
I came up with a simple design style guide which included the logo, colours, and typography. I chose to use bright and bold colours as my research showed that they are the colours that millennials and gen zs favor. From the brand colours I also designed the graphics that would be seen throughout the design. The banking apps I analysed, as well as social media apps all, use plain colours therefore I wanted to incorporate graphics to my design to appeal to the target audience.
Crazy 8s
I did 3x Crazy 8s for 3 of the main screens. I found this process very useful as it allowed me to quickly sketch out a variety of ideas. From doing this I combined a few of the sketches and created mid-fidelity wireframes.
Crazy 8s involves sketching out a wireframe within a minute and then repeating this 8 times (8 minutes) at the end of this you have 8 low fideility designs that you can develop into mid and high fideility wireframes.
Medium and High-fidelity mobile wireframes
Using my mid-fidelity designs as well as design style guide I moved on to design the high-fidelity wireframes.
Medium fideility
High fideility
Medium and High-fidelity web wireframes
For the webpage design, I chose to design the pages as a web app rather than a normal website as the main platform is the app. I took inspiration from WhatsApp web and Instagram’s website.
Test
User testing
I conducted a prototype and a 5-second test to test my design, due to time constraints I was only able to test one person. I was able to get heat maps from Maze which helped identify flaws in my design that prevented the user from having a smooth user experience.
One of the questions I asked was for the user to “Check the hotel that has been booked for the St Lucia holiday”. The heat map shows that she found it difficult to differentiate between ‘St Lucia’ listed in the ‘messages’ and ‘coming up’ section. I decided it was best to also add a header to the messages section mainly for accessibility as by using the header “messages” a screen reader would read this out and the user would know the section that they are entering.
Results
- Adding a title at the top of the chats section would make it clearer.
- The stories on the homepage look like pictures, if it was a real app with real stories it should look clearer.
- A name and date under each story would be helpful to have some context
- Dashboard icon not clear — a card or money icon would make it clearer.
- The colours used are nice, different than the usual.
I found conducting user testing very useful and I made the relevant changes to my design to improve the users' experience.
Final solution
I made some minor changes to the design to improve the users' experience and usability.
Website — dashboard
From initial feedback, it was evident that the desktop version of the dashboard was too crowded and could overwhelm the user. The 5-second test also supported this as the user was able to remember some of the headers but was only able to recall 2/6 navigation items. I went back to my design and added an overlay on the 4 cards hiding the information. Each card can be opened and closed allowing for the user to choose the information they are presented.
Stories
From user testing, I changed the shape of the stories to be round to differentiate from the rest of the content on the page as they are rectangular. I also increased the size of the ‘add to story’ button. The story feature allows users to upload videos/images in exchange for points that they can use on the app to buy experiences. Users can find out more information about an experience they view in a story and book the same experience directly on the app. The points system will encourage users to use the app consistently.
Plan + Go
Next, I looked for ways to improve the plan + go screen. I added the header ‘messages’ to make a clear differentiation between the ‘coming up’ content as I previously stated. I also changed the icon as it wasn’t clear that the plans were also on this page, I used a calendar icon and added the ‘plan’ caption. The plan + go feature allows users to plan group activities in its entirety on the app, they can plan and then purchase experiences and set up scheduled payments if needed.
Round-up
I didn’t make any design changes to the dashboard as the user I tested was able to navigate with ease. I did however change the icon used and added the text ‘dashboard’ to make it clear, I added a caption to all the icons to improve the accessibility. The round-up feature allows users to choose the value that their spending is rounded up to and put into their chosen pot. This can help users save more as it’s done passively and they can edit the amount that suits their current financial situation.
I tested all the screens using the A11y colour contrast plugin on Figma and all the screens received a rating of AA and above.
Learning
Overall I think the project went well especially as I had a short amount of time to complete it. I was able to deepen my understanding of user research as I had to apply them. I was also able to make better-informed design decisions that were backed by my user research and revise my designs based on the feedback I received.
I initially found this project difficult but after conducting interviews and gaining feedback on my ideas I gained confidence and I was able to come up with a variety of designs for each page. I’m now more confident in my UX research skills and I’m excited about learning more and improving my design process.
Key takeaways:
- Conduct further user testing such as A/B test
- Interview more people — I only interviewed Gen Zs if I had more time I would have interviewed at least one Millennial
- Don’t underestimate how long the design process will take
