A fintech app that combines banking and social media — a UX/UI Case Study
Xplore is a fin-tech app for young people to plan experiences, save and budget all in one place.
Project Role: UX/UI Designer, Researcher, Branding
Project Length: 2 weeks (Sept 8th- 22nd)
Target Audience: Millennials/ Generation Z
Tools: Figma, InVision freehand
Project Brief
To create a digital space that merges social interaction and basic expected banking needs. It is imagined as a banking and social media product/ experience purchasing platform.
The deliverables include:
- 3 pages dashboard/home screen and two other pages of your choosing.
- Mobile app 375 x auto
Introduction
Young people are increasingly hungry for innovative products that are convenient and help them to avoid debt. Studies show that Millennials and Gen Z will splurge on experiences such as Festivals, Extreme Sports and Dining Out to ease stress.
The Problem
There are limited products available on the market that allow young people to purchase experiences with their friends, whilst properly managing how they are spending their money.
How might we design a product for Millennials and Gen Z, that allows them to effectively manage their money whilst responsibly purchasing experiences and trips?
Design Process
1. Research
My first step was to research how Millennials and Gen Z spend their money.
I found that generally, they are better at saving money than their parents. Millennials are 30% more likely to save regularly than their parents. Also, Millennials are turning away from credit cards, with just 41% owning a credit card.
- Millennials are using credit cards less than older generations
- Millennials are saving more than their parents
- Millennials are harnessing new technology to closely manage their finances
- Millennials are using Buy Now, Pay Later products to manage their finances closely
Gen Z are more likely to spend money and invest in educational courses or programmes that will advance their future earning. Studies show Gen Z will splurge on experiences, particularly to ease stress. In a recent study, 95% of Gen Z participants under 24 admitted to feeling stressed “somewhat often” or “very often.”
Gen Z are actually more intrigued by experiences than millennials. A few of Gen Z’s top overall interests include;
- Music (69%)
- Films/Cinema (61%)
- Food and Drink (58%)
- Gaming (54%)
- Technology (53%)
From this research I can infer that Millennials and Gen Z would benefit from a product that would allow them to effectively manage their finances whilst purchasing experiences.
Competitor Analysis
As my product combines social media, experience purchasing and banking I decided to do a Competitive Analysis of the companies above. I choose these companies because they have a high number of users. I looked at their apps individually and took notes on their UI design and their UX design.
There are very few products on the market that essentially combine the features of the apps above. For the three main features; social timeline, banking and browsing experiences I would say that the companies above are direct competitors for each individual aspect.
2. Defining the problem
What problem is this product trying to solve?
In order to understand what the target demographic wants and needs from this type of product, firstly, we have to speak with them to understand what they want and why they want it.
Interviews
I conducted two interviews, one person from Gen Z and one Millennial. Ideally, I would have liked to interview more participants, this would have allowed me to get a wider range of viewpoints.
I conducted the two interviews face to face and I wrote down the responses onto lined paper. Using interviews, I was able to delve deeper into the three key features, ‘banking, social media and booking experiences.’
My aim was to find out:
- How they used digital banking?
- What they liked or disliked about digital banking features?
- What they would add to improve digital banking apps?
- The process of organising and booking trips or experiences.
- How social media influenced what they booked.
Pain Points
I was able to identify the following pain points through conducting the two interviews:
- Setting up savings pots and savings goals can help to better manage how people spend their money
- Banking apps are expected to have user friendly designs and innovative features to keep up with their younger audiences
- There is a gap in the market for an easier product to plan and book trips in one space
- Social media has a heavy influence on what Millennials and Gen Z purchase
Personas
Following on from my user interviews, I was able to create these two personas. During my design process, I used these personas to gain a better understanding on how my product can align with the needs and goals of my users.
I created the following personas to reflect two different types of people who would use this product.
Persona 1 represents a person who has a decent amount of disposable income. This person is from Generation Z and is happy to splurge on experiences with his friends. This person would like a high quality and reliable product to easily plan trips with his friends. He avoids complicated apps that are hard to navigate.
Persona 2 represents a Millennial mother. She is very frugal with her money and likes to save regularly. She wants to be able to balance her home life and social life. She prefers to spends her money on affordable and memorable experiences. She would like to find unique, fun experiences on a budget.
3. Ideation
App features:
- Social sharing timeline — A key feature of this product is to have a social media timeline where users can share experiences they have booked through the app. Also users can browse trips and experiences on the social media timeline and read reviews before booking anything.
- Group messaging — After deciding what trip or experience to book, you can share the details of the trip in the app to your group. App users can connect to other people by linking social media accounts, mobile phone numbers or email addresses. In order to target the pain points (discussed in Section 2 below), I wanted the planning section to be easy and convenient. The user flow from deciding on the experience to booking it with your group should be seamless.
- Banking: The final key feature is being able to access a banking page and link your current account within the app. This helps the app users to closely manage their finances and set aside a budget for trips and experiences. As the research above states. millennials want to avoid falling into debt, so through the app, users are able to create individual and group savings pots.
Firstly, I created a mind map to map out what features I wanted to include. The main pages which will be in the navigation bar are highlighted in yellow.
- Home page -where the users will be able to browse experiences and trips
- Social media page - will have a timeline where users can browse through experiences purchased through the app and also upload their own
- Banking/ Budgeting page - a key feature of this product is to allow users to effectively manage their finances whilst planning and purchasing experiences
Wireframes
Below are my initial low-fidelity sketches of my home screen. My final design contained elements of the top right and top left sketches.
4. Design System
I created a design system in order to achieve consistency throughout my design.
Colour Palette
I wanted a vibrant colour palette to appeal to the target demographic of the app. I aimed to use the rule of 60, 30 10.
With ‘Paradise Pink’ (#E64B5F) being the main colour (Roughly 60%), The ‘Medium Aquamarine’ green colour (#4BE79E) as the secondary colour used (30%) and the ‘Vivid Sky Blue’ (#4BC8E7) as the accent colour (10%).
The psychology of colour is a powerful tool in design. Colours have both positive and negative implications.
- ‘Paradise Pink’ - Creative, Innovative and Balance
- ‘Medium Aquamarine’ - Clarity, Calmness and Inspiration
- ‘Vivid Sky Blue’ - Trust, Loyalty and Security
Typography
Typography is vital for communicating to the user. As a designer it is important to consider the readability and and accessibility of the typefaces which are used.
In order to clearly communicate to the user, visual hierarchy is important. This includes careful alignment of text, correct spacing, and the use of typography weights which is the thickness of character outlines relative to their height.
I selected the font ‘Montserrat’ for the body text and the font ‘Fira Sans’ for the headers. Additionally, I used the Major Third (1.250) interval for the font scale.
Icons
I created an Icon library so that I could easily access the icons needed during the app development stage. Icons are simplified images that serve as intuitive symbols to help users navigate the system.
5. Develop
The Solution
To create a mobile and web app that users can plan, budget, save and purchase experiences all in one place.
6. User Testing
Due to time restraints, I was unable to achieve the User Testing phase of my design process.
The purpose of Usability Testing is to see how a product works in front of real people and to identify areas of the product which could be modified or improved. We can use product prototypes or finished products. Ideally prototypes are more beneficial to use, because it is less expensive to modify a prototype rather than a finished product.
Given the opportunity I would design specific tasks and create a workflow for the test participants to work through with a clear objective. I would note down any errors or challenges that the participants face during the exercise.
Key Takeaways
As my first Case Study, I am happy with the final results. I thoroughly enjoyed working step by step through each stage of the design process.
- I have learned that it is important to create a design system before starting the development stage, in order to keep a consistent product and to ensure you are effectively managing your time
- For the final design I would add a swipe feature for the ‘New Posts’ social media timeline to make it more accessible for the app users.
