Project brief…
The product
P. Bank is a private bank focused on serving private clients and entrepreneurs.
They need a mobile app for their existing user database for daily banking operations and also attract new clients by offering a great service and a cash-back feature.
Project goal
Create MVP of excellent service which allows users to make use of daily mobile banking anytime and anywhere, including great support and a flexible cash-back feature.
My role in the team
I was contracted as the main Senior UX/UI Designer not only to lead and develop the app but also to manage stakeholders and deal with the client by myself.
Research
Understanding the user
Effective user experience starts with a good understanding of the users. Not only do we want to know who they are, but we want to dive deeper into understanding their motivations, mentality and behavior. This deep insight into our users will help you keep your product focused on delivering a great experience.
Design to meet the user needs:
Products designed around user needs:
a) are more likely to allow the user to complete the task they are trying to do, without support from other sources
b) help more people get the right outcome, achieving the product’s policy intent
c) cost less to operate by reducing time and money spent on resolving problems
The service we are designing and building needs to meet the whole user experience.
This makes the whole experience clearer and simpler for the user. Often we won’t meet their needs if we work on a single product in isolation.
We need to think about the whole service, not just the product.
How to learn about user needs:
We can learn about users and their needs by doing the following types of activities:
a) interviewing and observing actual or likely users of the product
b) talking to people who work with actual or likely users
c) reviewing existing evidence
We need to treat any opinions or suggestions that don’t come from users as assumptions and explore these in the research process.
What to include in research:
Groups to consider including in user research are people who:
a) currently use the product
b) don’t currently use the product but may need it in the future
c) have problems using the product
d) help others use the product
When researching, we need to focus on users who have problems using the existing product. This will help us create a simpler, clearer and faster service that more people can use.
Research wide then go narrow:
For banking services, it’s best to start wide and then narrow down your user research.
We need to begin by looking at as many different users of our product as possible. That way we’ll see the entire spectrum of users, from the mainstream to the edges. We should aim to speak with as many of your user groups as possible in the discovery stage.
The mainstream users will show me what business as usual is for our product. We’ll see why they are using products and how they are managing the processes.
At the extremes, we’ll see groups of people who may be finding it difficult to access the service. We’ll find out their current pain points as well as what is working well with the product. These pain points might include things that are pushing them out of your service. For example, they may find the service too difficult to navigate.
Other users might have workarounds for accessing the product. For example, they might use websites to translate content into their preferred language.
Research
Personas
Personas are fictional characters, which you create based on your research in order to represent the different user types that might use your service, product, site, or brand in a similar way. Creating personas helps the designer to understand users’ needs, experiences, behaviors and goals.
As designers, we shape personas iteratively. We divide users into manageable groups and represent each with a typical embodiment – a persona.
Research
Competitor research
A competitive analysis is a strategy that involves researching major competitors to gain insight into their products, sales, and marketing tactics. Implementing stronger business strategies, warding off competitors, and capturing market share are just a few benefits of conducting a competitive market analysis.
Competitive analysis can help you learn the ins and outs of how your competition works, and identify potential opportunities where you can outperform them.
It also enables you to stay atop of industry trends and ensure your product is consistently meeting — and exceeding — industry standards.
Design
UI information architecture
As a standard part of the UX process, designers create information architecture when building products. Defining every avenue and path that users can take through an app or website, information architecture is much more than just a sitemap to show what page leads where.
As part of the UX process, IA design follows very similar patterns to flowcharting: Add shapes and connect them with lines in an organized fashion to a single document. The challenge when building IA is in understanding how your app actually works from the user’s perspective, and how to organize that information into a readable, legible format.
There are two major requirements for actually constructing IA: organizing it through a visual hierarchy and creating a legend for displaying different types of features, interactions, and flows. With a standard flowchart, the shapes follow specific requirements;
In other words, the most important factors in building your IA are where individual components of the architecture are placed (hierarchically), and how they’re labeled and displayed.
Design
Wireframes
Wireframing is a way to design a product at the structural level. A wireframe is commonly used to lay out content and functionality on a page which takes into account user needs and user journeys. Wireframes are used early in the development process to establish the basic structure of a page before visual design and content are added.
The aim of a wireframe is to provide a visual understanding of a page early in a project to get stakeholder and project team approval before the creative phase gets underway. Wireframes can also be used to create global and secondary navigation to ensure the terminology and structure used for the site meets user expectations.
Design
Usability study insights
Usability testing refers to evaluating a product or service by testing it with representative users. Typically, during a test, participants will try to complete typical tasks while observers watch, listen and takes notes. The goal is to identify any usability problems, collect qualitative and quantitative data and determine the participant’s satisfaction with the product.
Usability testing lets the design and development teams identify problems before they are coded. The earlier issues are identified and fixed, the less expensive the fixes will be in terms of both staff time and possible impact to the schedule.
Design
UX issues
Paper wireframes were converted into digital ones and prepared the clickable prototype for the first user testing. Please have a look at a couple of highlights of some wireframes for the user flow used in the gorilla testing.
Design
UI Screens
Paper wireframes were converted into digital ones and prepared the clickable prototype for the first user testing. Please have a look at a couple of highlights of some wireframes for the user flow used in the gorilla testing.
Design
Accessibillity
In the simplest terms, working on accessibility for any product (digital or not) implies improving its usability to ensure any person can use it comfortably and without major complications. In other words, it focuses on all users and it aims to provide the same user experience for all.
That means many things, as making something accessible will have you thinking about how you can make your user interface more understandable, intuitive, and clutter-free. That process will need you to think about users with low vision, blindness, hearing, cognitive or motor impairments, those with situational disabilities, and low or zero tech-savviness.
UI accessibility is a tricky thing that requires you to think out of the box to consider all kinds of users. For that journey to be successful, you should remember the three main principles of UI accessibility:
Clear: interfaces should have clear layouts with distinct buttons, menus, and calls to action.
Robust: an accessible product that aims to serve the widest variety of users possible, regardless of their particular conditions.
Specific: the interface should take maximum advantage of the available accessibility features (i.e. in a mobile OS).
With all that in mind, it’s time to see those suggestions to improve your UI’s accessibility.
Design
Design System
Instead of starting from scratch, design systems allow designers to pick and choose from a single collection of consistent and reusable components.
The design system’s primary purpose is to provide the necessary building blocks required to put together a web design. A design system can be something as simple as a small selection of UI patterns, or something as extensive as a collection of UI components, typography, templates, code snippets, and brand guidelines.
Design systems are especially helpful when multiple people are all working on the same front end. They ensure that everyone follows the same brand and design guidelines. With product design teams often spread out across the globe, design systems aren’t just a nice thing to have in place, but a necessity. When everyone involved has access to the same design resources, it guarantees that the UI/UX and the rest of the visual design stay consistent no matter who on the design team is working on it.
