Creating Banking-As-A-Service website

Problem

- Create a website to establish a strong brand presence, and appeal to a new, younger customer base by displaying new and modern UX and UI.

- Current website does not provide full information about all services and products provided.

- The website's navigation is confusing and does not provide clear vision of the website.

Solution

- Gather requirements and establish project goals.

- Understand your target audience through user personas and analytics. Research competitors' websites to identify trends, industry standards, and areas for differentiation.

- Create Site Architecture (Sitemap) based on collected requirements, analysis, and research.

- Develop design concepts based on the goals, user research, and IA.

- Present design concepts to stakeholders for feedback and approval.

Timeframe

4 weeks

Tools

Figma, Illustrator, Google Doc, Jira

Team

2 Designers, 1 BA, 1 Copywriter, 1 PM,
1 CPO

Design process

Gather requirements
User research
Competitor research
Personas development
Journey mapping
Informational architecture
Wireframing
Design concepts

Gather requirements

Since we were starting the website design from scratch, our team empathisized the importance of meeting with the client to establish the project's goals and expectations. During this meeting, we gained several key insights, including the client's desire to draw inspiration from specific competitors' visual styles.

Competitor analysis

I conducted competitor analysis to identify the target audience and created a list of products and services to be included on the website. For this project, I analyzed the websites of various banking competitors to identify their key features. Using Similarweb, I determined the most popular websites, as well as their device and age distributions. Through a features analysis, I identified common patterns in information displayed on their websites.

By researching our main competitors' homepages, I was able to identify trends in how they position themselves, as well as gain insight into their strengths and weaknesses in design, target audience and user demographics, user flow and journeys, and overall industry best practices.

I evaluated the website navigation structure of the competitor's website for an in-depth analysis of user experience, usability, and overall design, as well as the effectiveness of the site search function and navigation labels

User personas & journey maps

To bring a user-focused perspective to the design process I was able to define our main personas and create user journey maps accordingly.

Site map

After creating the user journey maps, I moved on to creating the site map and navigation for the website. I used the insights gained from our competitor research and user journey maps to organize the information architecture and ensure that the site would be intuitive and easy to navigate for our users. I also took into consideration the client's preferences and feedback throughout the design process to ensure that the final product met their expectations.

User flows

Then I focused on developing high-fidelity mockups for the key screens, as we intended to use them in the website's video presentation to enhance its overall appeal and provide users with a comprehensive overview of our services. These mockups helped ensure that the design and layout of the interface were aligned with our desired visual style

Wireframes

As the lead designer for this project, I streamlined the wireframing process and effectively collaborated with another designer to divide the workload. This allowed us to produce wireframes more efficiently and ensured that the project stayed on track.

Design concept

After completing the wireframes and testing them for user experience, I moved on to the UI design phase. I presented several style options to the client and worked with them to choose the best one. From there, I proceeded to design the main screens of the website.

Next steps

Given the time and resource limitations of the project, I carefully considered our next steps, which involved:

- Moving forward with designing the remaining pages and creating a responsive version;
- Conduct an accessibility audit to identify and address potential barriers for users with disabilities;
- Schedule regular design review sessions within the team to gather feedback and insights;
- Start the development process and provide constant Q&A service.