HoyBank Project
The Challenge
Build, Design and Deploy a conceptual responsive website for an Online Digital Bank. Using Figma for UX design, as well as React.js and Tailwind css for the coding and styling. The website should have data statistics, client testimonials and CTA buttons included.
Part 1
Discover and understand users
This section is all about discovering and understanding the user´s needs, goals and pain points. I set myself a few research goals before getting started.
- Learn as much as possible about my potential users
- Understand current solutions and the competitive landscape
- Determine if and how I can leverage new technology and innovation
Survey and user characteristics
Given time constraints, my primary focus shifted towards Desktop Research.
This encompassed activities such as immersing myself in user reviews to identify pain points and user goals, staying updated on the latest trends within the digital banking sphere to challenge assumptions, and conducting informal discussions with two potential clients to understand their needs.
Using a whiteboard, I documented and structured the wealth of information gathered, ensuring clarity and organization throughout the process, thereby creating an environment conducive to addressing client needs effectively.
Key User Insights
There were some common themes and patterns that stood out along the user research.
Security and trust
Digital Bank users are mostly afraid with scams and the viability of the product. It´s mandatory to make the product trustable so the user can feel a sense of safety.
Less technical information
Bank users in general are often bored by the internal politics and organizational cultures. The goal is for them to worry exclusively about the use of the product.
Cost and Flexibility
Most of the people are not willing to pay a lot when trying out the product or even to subscribe to a fidelity option.
Simplicity and Transparecy
The digital shift is expected to come with an appealing and clean design. The users expect an attractive and easy to use interface.
User Feedback
Here’s what some of the users said when asked about digital banks.
Make it usefull.
"Allows making the most necessary things fast and easy."
Show the testimonials.
"Client feedbacks can make the digital product more trustable."
Transparecy is key.
"An attractive appearence and easy to use interface."
User Persona
Based on the Research and the User interviews, I was able to find a persona that fits our project the best. With that in mind, some pain points and major goals patterns were starting to be noticeable.
Paul Walnen
32 yrs old | Manhattan, New York | IP Lawyer
Bio
Goals
- Not worrying about security processes when making online transfers.
- Have easy access through a website to this billings and invoicings.
- The price of the service is very important.
Frustrations
- Expensive accounting services.
- Late invoices and no way to follow up but email or phone call.
- Safety concerns when changing from a physical banking option.
User Journey
A possible situation of our digital bank usage
+ Thanks to Hoy Bank, Paul can ask his bank “What are the transactions fees for European Destinations?” and prepare his trip in advance
+ Create a tab (Daughter´s birthday) in his projects section specific for the trip.
- Not being able to automate his saving needs as everything needs to be authorized by him.
+ It allows him to be organized and make sure he reaches his goals without a lot of effort.
- Future notifications would help him to stay on track and be aware of what are his savings at the moment.
+ The feature enables Paul to create new tabs and effortlessly transfer funds between them, making his money easily transferable with just a single click.
Part 2
Problem definition & ideation
At this stage it was time to re-define the problem based on the research insights and Paul´s needs.
Problem statement
Design a landpage only website that transmits security to the client, is attractive to new users through the use of eye-catching discounts and prominent CTA´s buttons without losing the main focus on a user-friendly, simple and transparent design.
How Might We
01 |
Design a landing page website that effectively transmits a sense of security to the client?
02 |
Attract new users through the use of eye-catching discounts and promotions?
03 |
Ensure that the website is user-friendly and easy to navigate, with a focus on simplicity and a good user experience?
04 |
Emphasize clear and prominent call-to-action buttons that encourage users to take action?
The Solution
Based on Paul´s needs and the user research, I come up with a list of key features for the landing page website.
- Use clear and simple language: Avoid using complex language and technical terms that might confuse the client. Keep the language clear and simple.
- Keep the design clean and professional: A clean and professional design wi such as Airbnb, Binance, and others to give clients confidence in the security of the site.
- Show testimonials: Showcase testimonials from satisfied customers to provide social proof and increase the client's trust in the site.
Part 3
Design
At this stage it was time to re-define the problem based on the research insights and Paul´s needs.
User Flow
With the problem re-defined,, the next step was to create a detailed user flow to map out the interactions and steps a user would take to accomplish their goals within the solution.
Wireframes & Prototype - Desktop
With the userflow completed, the next step was to create wireframes to the desktop landing page. I used medium-low fidelity prototypes using Figma.
Usability Testing
I planned a usability testing using the mid-fidelity wireframes and these three tasks ...
Task 01 |
Security assessment
Ask participants to rate how secure they feel while using the landing page of the website and conducting transactions. Ask specific questions about the website's security features and whether they understand how those features protect their information.
Task 02 |
Layout and UX evaluation
Ask the participants to complete specific tasks on the website and tell us how could we change it while observing how easily and efficiently they can complete those tasks. Get their feedback on the overall layout and visual design of the website.
Task 03 |
Language clarity
Ask participants to explain in their own words what they think, in general, of the website. This helps assess whether the language used is clear and easy to understand. As well as identify any confusion or misunderstandings they experienced while using it.
Style guide
I was mindful to chose colors that would work well with a dark theme - A dark blue background can convey a sense of reliability and stability, while a lighter shade of blue can be used for buttons and other interactive elements.
Final Designs
All these components culminate in the final designs, which are seamlessly responsive and user-friendly across all devices. The use of static mockups was instrumental in visualizing the end product before moving on to the development phase.
Technologies used
This were the main technologies I used for the implementation of the project:
Dynamic Mockups
This is an immersive preview of the project, featuring visuals that demonstrate the functionality of the website's features.
To delve deeper into the project, explore the website firsthand: https://hoy-bank.netlify.app
Part 4
Next Steps
Next steps should include additional user research and usability testing, expanding the landing page to a full functional platform and go beyond the MVP.
- Design the full platform website, including navbar tasks such as Features, Product and Clients.
- Usability testing of the smartphone version with posible real users of online digital banks.
- Conduct user interviews or surveys to develop analysis reports that are tailored to digital bank users.
- A more in depth analysis of existing digital bank options currently on the market.
- Explore more user personas and try to build a smartphone dedicated app. That the users can use safely and easily.