↑

PlutoPay

UX/UI Design 2022 | A financial banking portal
Market Research
Competitive Analysis
Targeted audience
Survey
Users Interviews
Affinity Mapping
User Persona
Users Journey Map
Mental Model
User Flows
Sitemap
Card Sorting
Wireframes
Responsive Design
Mid-fidelity Prototype
Usability Testing
Preference Testing
Rainbow Spreadsheet
High-fidelity UI
Collaborative Design
Style Guide
The prototype can be live-previewed from here.
View the prototype ➜

Project

A Mobile-First Design, responsive web app created as part of the certified UX Design course at CareerFoundry.

Role

UX Researcher | UX Designer
| UI Designer

Timeline

8 months

Tools

Figma, Adobe XD, Adobe Creative Suite, Google Survey, Optimal Workshop, Diagrams.net, Mural, Google Drive & Form

Deliverables

User Experience Research, High-Fidelity Wireframes & Clickable Prototype, User Interface Design, Design Language System

Why I made this project?

"I received 4 topics from which I chose to develop PlutoPay because I am interested in understanding how the banking portals I use work.

PlutoPay is designed to allow anyone to shop, make transactions, and more without a debit or credit card or the need to visit a physical bank branch or store so that people can avoid crowded areas and interactions."

Market Research

“The pandemic has caused an accelerated growth and has brought new audiences online. In 2020, 71% of the EU population made purchases online (as opposed to 66% in 2019 and 64% in 2018).”

Problem

Our consumers need a way to shop and make transactions online, anywhere, anytime, securely and efficiently because they prefer digital format instead of physical money as a result of forced isolation during the global coronavirus pandemic that started in 2019.

Opportunity - Embracing online payment

How might we better support the individuals who regularly shop online by offering a competitive product that works on any device, and acts as both a secure bank account and transactional card for payments and transfers?

Basic Goals

Goals achieved as PlutoPay to be considered successful:

Two-Factor Authentication
Basic Plan
Transactions
Filter Past Behavior

Higher Goals

Future goals

Flexible Plans
Rewards & Cashback
Travel Plan & Exchange

Sustainable Goals

Future goals

Rewards for:
Living Green & Healthy

  1. Design Thinking Process

01. Empathize

Understanding the User

Let's get started.

"PlutoPay is the most complex project developed during the UX Design Bootcamp with a focus on UX Research and UX Design.

I received the project brief with the business requirements and goals. To make sure I was solving the right problem I started with Market Research, set the Targeted audience and conducted User Research."

Competitive Analysis

To understand the market that I was working in I conducted 2 Competitive Analyses by studying banking platforms that have already provided relevant experience. That helped me to understand what was already done, what was successful and what was missing.

I considered PayPal and Revolut my main potential competitors.

However, for UX analysis and comparing features during design development, I looked into multiple platforms for specific features such as N26, ING, Bunq, Google and more.

What was my targeted audience?

Once I had a market overview, I set the audience according to a certain group of people that I contacted further for User Research.

Targeted audience. Individuals who use banking portals regularly and want to make easy, safe and secure transactions without multiple credit or debit cards.

The minimum demographic age for PlutoPay was between 18 and 20 depending on the legal maturity and the upper age range was 40.

Understanding the users' needs.

"Even though it was a bonus task, I decided to launch a survey because I had a complex functionality for PlutoPay.

Understanding what features are most used and what are local vs global helped me to prioritize and focus first on basic needs."

  1. User Research

  2. After defining my target audience and having knowledge of the competition, I passed to User Research. This research method helped me to better understand the needs, motivation and behavior of the users.

Survey

Considering PlutoPay a global portal, the main goal of the Survey was to understand and collect data from a larger group of users with different ethnographic backgrounds.
‍
‍

Users Interviews

Based on the Survey feedback, I created the User Interview script.

The purpose was to dig deeper and observe their behavior regarding a banking portal and how Covid-19 changed their needs.

Affinity Mapping

With all the information collected from the User Interviews, I grouped the key insights into reliable categories, labelled and turned them later into features that defined PlutoPay.
‍
‍

Prioritizing the features

Based on the Affinity Mapping results, the biggest challenge was to keep people confident in their actions and offer a Basic Plan to start. Due to time constrain, I decided to focus on the most desired features that users need.

What were the essential features needed to be kept in order to launch PlutoPay?

4 Features

Sign Up
Log In
Pay Bills
Analytics & Budgeting

02. Define

Who I was designing for?

  1. Have you met Marc and Suzan?

  2. From User Research and Affinity Mapping, I was able to identify collective thoughts, behaviors and pain points for 4 different groups of users and create 4 personas for PlutoPay.

    Due to time constrain, I decided to stick to the Basic Plan and continue by offering solutions to Marc and Suzan's problems. The other 2 personas will be used for future development.

    Marc and Suzan Personas would be kept in mind throughout the rest of the design process to ensure I was designing for real people by solving real problems.

03. Ideate

Starting Ideation Process

Time to start designing.

"Once I had the User Research done, prioritized the features for PlutoPay and defined the User Personas it was time to start sketching the first User Flows and Wireframes."

Mental Model &
Users Journey Map

Having my User Personas' goals in mind, I created Mental Models & User Journey Maps to identify and define the easiest way for Marc and Suzan Personas to accomplish their tasks in simple steps.
‍

Task Analysis &
User Flows

Using the Mental Model I determined 4 tasks mapped into User Flows for my Personas. These included creating a new account, accessing the account, paying bills and setting a new budget limit for the next month.

Sitemap

The mapped IA gives a bigger picture and brings more context for possible PlutoPay functionality.
The Sitemap was composed of a layer for consulting information about the platform and a secondary layer for accessing the financial portal.

  1. User Flows

  2. I looked closer at my User Personas' needs and continued by determining what tasks were required to complete their goals. I created User Flows with FigJam to visualize every page and action needed to achieve their goals.

    Below showcases the User Flows for creating an account and setting a budget limit.

  1. Sitemap

  2. After analyzing several related and unrelated platforms, I created a Sitemap with Diagrams.net to organize all the screens and flows that I needed to create. I chose to conduct 2 Open Card Sorting sessions with Optimal Sort to make sure I receive information for the website before and after Log In/Sign Up.

Enhancing user goals.

"Even if it didn't require a Mental Model for my Personas, the exercise helped me to reflect on simple and intuitive steps a person needs to finish everyday tasks, such as a morning routine.

Due to time constraints, I had to minimize my work and create the best solution just for a few flows. I decided to keep a complex functionality and focus on the essential features.

While mapping the information, I reviewed the clues gained from User Research so that the Sitemap and User Flows could help the users achieve their goals."

  1. Continuing the Design Brainstorming.

  2. Having established the User Personas, Task Flows and Sitemap, it was the time to start sketching the first drafts and developing the portal.

Sticky Notes

Because I am a detail-oriented person, to make sure I kept it simple and clearer, I started the process by sketching out the first ideas on sticky notes.

Having such a small space helped me to ignore unnecessary details from this stage.

‍

Low-fidelity Wireframes

Continuing with prototyping on paper, I introduced more details and sketched ideas with pencil and paper for the first 1:1 wireframes.

Since a sketch takes a few minutes, I analyzed, self-critiqued and redesigned my work several times before sharing it with my tutor and mentor.

Mid- fidelity Wireframes

I used Figma to pass from paper prototyping to Mid-fidelity Wireframes. I set the basic functionality and created more detailed and accurate screens.

I decided on the navigation for every breakpoint, designed patterns and created components layouts, set grids and spacing to optimize the project for later changes.

Mobile-First Design

By using the Mobile-First Design approach, I was able to focus first on the information that users absolutely need and create the content for the mobile version before designing for tablet and desktop breakpoints.

04. Prototyping

Build an Interactive Prototype

High-fidelity Wireframes & Clickable Prototype

I moved from Mid to High-fidelity Wireframes and defined UI components so that PlutoPay met all the requirements for Sign Up, Login, Pay Bills and Setting a Budget.

Automating the process with Figma helped me move faster while iterating and applying UI principles.

Prototyping was the key to showing how the portal looks, feels and works, and it was ready to test the usability with real users.

05. Test

Test, test, test

Validate the hypothesis.

"Before the User Testing session, I tested multiple times with my friends trying to focus on other needs and not build a platform for me. Also, I had a few discussions with my developer friends that explained the technical part and what to expect.

During every test and research session, I received and provided feedback from CareerFoundry perks."

Usability Testing

‍Goal. I used the High-Fidelity Prototype to assess the learnability of the new users interacting with PlutoPay for the first time.

I observed and measured if the users understood the project, its value, and how they completed basic functions.
‍

Affinity Mapping &
Rainbow Spreadsheet

Iterations. Based on Usability Test feedback  I created the Affinity Mapping. I used the clues further to create Rainbow Spreadsheets by prioritizing the key insights based on the severity and making new hypotheses for the prototype improvement.

Preference Testing

‍Iterations. The 5 most critical errors have already been changed based on the Usability Testing feedback.  

‍For the Preference Test session, I chose 3 other severe errors where users had difficulty completing the tasks.
‍

Decision based on time constraints.

"Due to time constraints, I decided to have only one Usability Testing session and implement the user feedback into my design. Also, I took the opportunity to solve part of the UI issues through Preference Testing.

If I had more time, there would have been other test sessions to validate all the implemented iterations."

06. Visual Design

“fast, simple and intuitive”

Maintain a consistent design.

"I started creating a set of rules for PlutoPay with the first wireframes in Figma which was regularly improved with the project development.

I ended up having a design Language System focusing on the mobile version."

  1. PlutoPay Style Guide

  2. During the design process, I was able to establish a set of rules to keep the design consistent and minimal which ensured a correct use of typography, color palettes, imagery choice, iconography and UI elements and patterns.

    I used Material Design as a support to create the UI elements and patterns. Below is presented a part of the Style Guide.    ‍

  1. Grids and Breakpoints

  2. I set the layout grid responsive and established every breakpoint, so that I had 4 columns for mobile, 8 for tablet and 12 for desktop with the gutter 8, 16 and 24 px.

  1. Accessibility check

  2. The portal has been evaluated the contrast with Color Contrast Checker to match the AA standards of WCAG 2.0. I also made a full accessibility check in order to obtain at least AA standards of WCAG 2.0 and created a strategy to obtain AAA level.

  1. Final solution

  2. I had 46 high-fidelity wireframes because I wanted to approach different navigation patterns, such as Sign Up for new users and Log In for existing users. Also, I wanted to provide a complex security check and multiple possibilities to use the account.

Try PlutoPay prototype!

Future Steps

PlutoPay was started as a project to be continuously developed. The next steps will include additional User Testing sessions to validate the latest iterations, fix all the details of the features already studied and provide all flows for Transactions and Analysis.

About the visual design, I would like to approach a Dark Mode solution that allows the user to choose what is more comfortable and in cases have visual impairments.

Future goals. During User Research were discovered other hypotheses interesting to explore, such as Rewards & Cashback, Rewards for Living Green & Healthy for Tom and Exchange for Michelle.

  1. Learnings & Reflections

  2. My original intention was to design a safe financial banking portal that has tools for online shopping, making transactions, exchanging money and also, offers rewards for spending and for living green and healthy.  As can be seen, there are way too many features to focus on.

    During the research process, I learned how to hierarchy the goals and accomplish first the basic users’ needs in order to be able to launch PlutoPay. After all, being limited increases the level of creativity.

    Meeting many challenges, I gained in-depth knowledge about UX Design, Design Thinking and User-Centered Design processes.

  3. Top 4 takeaways:
    ‍    Research: Spending enough time researching to understand the user, decreases the possibility of having unnecessary iterations.
    Design for others and not for me. Adapt to users' needs and focus on providing easy ways to achieve goals based on users’ mental models.
    Collaborate: I have learned that by collaborating with other designers I can have a deeper understanding of the process and functionality.
    Test, test, test: The best way to focus on user needs is by testing the product several times and observing people's interactions with the product.

  4. What I would do differently?
    ‍    1. Focus on fewer features to provide all the flows needed to accomplish the process.
    2. Conduct more User Testing sessions until the iterations are successful.
    3. Conduct a second User Research focused only on the basic goals.
    4. Try to collaborate with developers to learn how to prioritize iterations based on technical difficulties.

  1. Other projects

  2. Home
    Read Case Study ➜

Let’s get in touch!

Resumesilvia.alexandrescu.93@gmail.com
Copyright © 2023 Silvia Alexandrescu