Overview
This was a conceptual project with a focus on adding a new feature to an existing widely used app. In this plane, PayPal wants to expand their shopping management capabilities for their mobile app. As one of the largest payment platforms in the U.S., PayPal wants to use their reach to improve the financial health of its customers.
Challenge
Their mobile app is very well rated, but the features currently only focus on spending and receiving payments. PayPal would like to round out their offerings by providing users with personalized features that allow them to enhance their shopping experience.
Objective: Add a new feature to existing app
Role: UX Researcher, UX/UI Designer, Interaction Designer
Duration: 80 hrs
Tools: Adobe XD, Illustrator, Photoshop
The Design Process
01. Research
The goal of this phase for me, was to learn about the fin-tech industry eco-system and to understand the user on a deeper level to gauge the emotional, social, and irrational drivers that may affect their behavior towards insurance.
Process: (i) Plan Research (ii) Conduct Market Research (iii) Synthesize Research Findings
Research Plan
To effectively conduct research I began by outlining a research plan.
Research Goals
1. Determine motivations, goals, needs, goals, and pain points of individuals
choosing personal finance management tools
2. Define characteristics of people who use personal finance management tools
3. Define the general process of choosing personal finance management tools
Methodologies
Secondary: Market Research, Competitive Analysis, Heuristic Evaluation, Provisional personas
Primary: User interviews
Conducting Research
To understand mechanics of the fin tech industry and current market threats and opportunities, I conducted market research.
Competitor Analysis
After doing some preliminary market research to understand the fin tech industry, I looked at their approach to achieving similar goals and objectives. For direct competitors, I chose well established industry leaders practicing innovative approaches to sell a broad range of insurance products. Indirect competitors focused more on specialized services.
Heuristic Analysis
Evaluated the app’s functionality based on Nielsen’s 10 usability heuristics and identified problems and opportunities based on Nielsen’s 10 usability heuristics.
Provisional Personas
I leveraged market research to craft provisional personas, which guided recruitment for user interviews, where I would further assess them.
User Interviews
To gain users’ perspectives, I conducted remote, 1-on-1 interviews with four potential users, who were familiar with purchasing insurance, to learn about their insurance buying experiences and online shopping habits.
Demographics
Number of Participants: 5
Ages: 30 - 40
Gender: 4 male, 1 female
Ethnicity: 2 Caucasian, 2 Indian, 1 Sri-Lankan
Employment: 3 Employed, 2 Self-Employed
Relationship Status: 4 married, 1 single
Synthesizing User Research
After successfully gathering qualitative data, I needed a way to organize and analyze my research findings to see patterns emerging.
Empathy Map
I created an empathy map to organize the research based on observations. I then identified themes and was able to identify insights and needs of the users.
User Persona
Based on the research findings I created a fictional but realistic representation of the key target audience.
02. Define
The focus in this phase of the project was to make sense of the data collected during the research phase. Insights from the market research helped define the goals of the product.
Process: (i) Define the Problem from the Users Perspective (ii) Define the Product Goals
Defining the Problem
To develop a successful solution it is important to start by identifying the gaps in the market according to different stakeholder interests and goals.
Point of View Statements & How Might We Questions
A Point of view (POV) Statement helps frame the problem from a users point of view and is structured in the following format: User (need) because (insight) How might we (HMW) questions help to frame the problem as a question to enable brainstorming for different possible solutions
Brainstorming
In this phase of the project, I began by brainstorming on possible solutions for every problem defined from the users perspective that was posed as a question and connected similar ideas to identify strong patterns.
Product Goals
With business goals from the design brief and user goals from the empathy research and taking into account technical considerations I identified necessary overall goals and common goals of the project.
03. Ideate
In this phase of the project, the focus was to strategize on how a user might interact with the product based on the features and pages that would be included.
Process: (i) Prioritize Product Features (ii) Build Information Architecture (iii) Understand Interactions (iv) Wireframes (v) Recreate PayPal Brand Identity (vi) Apply UI to Create High-Fidelity Prototype
Prioritize Product Features
Once I had an understanding of the market, and defined the goals of the product based on the problems it needed to solve for the users, I began thinking about the key features the product would need to include to achieve those goals.
Feature Roadmap
I created roadmap of features we ideally wanted the website to have and ranked them based on need and budget allowance.
Information Architecture
When I had a starting point of features that would be included, it was time to start thinking about how these features would be organized on the website.
Sitemap
I laid the foundational blocks to the website by creating a sitemap to include proposed features and pages.
Interaction Design
The next step involved actually figuring out how a user would navigate and interact with these different features and pages.
Product Requirements
I created scenarios and tasks for the user persona to help think about how she might interact with the website.
Task Flow
Focusing on the key the objective of the company to enhance the shopping experience I created scenarios to simplify these processes on the app for the user.
User Flow
To fine tune the key processes on the website, I created a user flow taking into account the decisions the user will consider while navigating through the website.
UI Design
In order to create the prototype I recreated all the UI elements from the PayPal app. It was tedious but I like to think it was worth it!
Branding - Style Tile
I created a visual brand guideline to be followed as a standard for the rest of the app feature development process. Recreated PayPal icons and vector graphics using illustrator.
04. Validate
In the Testing phase, I began by first creating a testing plan and then proceeded to test the prototype keeping in mind it was not fully functioning. Although this is the final phase in our design process, the results from this process will help us revise our product before handover.
Process: (i) Prototype (ii) Plan & Conduct Usability Test (iii) Synthesize Usability Test Findings (iv) Apply Revisions
Prototype
During the Prototype phase I built a scaled-down version of the website. Prototyping reduces the amount of UX friction, eliminates errors, and uncovers mistakes and false assumptions, all while saving time, money, and resources.
Early Wireframes
At this point, I had a pretty good understanding of the all the elements involved on the website, so I began laying them out visually. Sketching as a first step to work out possible layouts, helps us save time later on in the digital process.
MID-FIDELITY WIREFRAMES
Followed up by digitizing the sketches without focusing on the UI elements. I hadn't yet developed my add on elements for the new feature but recreated PayPals existing UI elements to develop this version of the prototype.
Usability Test
It was exciting seeing how users interacted with the product and how all the work in developing this product had come together.
Usability Test Plan
The testing plan outlined objectives, methodologies, participants recruitment plan and tasks to serve as a rubric during testing sessions.
Test Goal
Make website usable
Make website useful
Ensure efficient user experience
Test Subject
High-fidelity prototype of PayPal mobile app.
Tasks
Task 1: Set-up new shopping assistant feature.
Task 2: Save a deal Hulu currently has going on.
Task 3: Find airline deals.
Task 4: Find expenses from February.
Test Methodology
Moderated remote usability testing using the thinking aloud method via Zoom video call.
Synthesizing Test Findings
Upon concluding the usability test, the focus was to identify different stakeholders’ product goals learn how they aligned with the product goals and the consequent impact on my design decisions.
Test Findings
After conducting usability testing, I summarized the results of our testing and feedback received.
Participants
No-of participants: 3
Gender: 1 Female, 2 male
Ethnicity: 1 Indian American, 2 Caucasian
Ages: 30 - 40
Essential qualification: Has experience with PayPal Recruited from network of friends and family
Test Completion Rate
100% completion rate for all 3 tasks
Error Completion Rate
96%
Common errors not counting errors that are due to the limited nature of the prototype.
Affinity Map
To organize my usability test findings I categorized my observations based on their themes or categories and developed insights and recommendations ranked by priority based on budget and scope of project.
Priority Revisions
Based on valuable insights from testing and prioritizing recommendations, I revised the high-fidelity mockups and prototypes.
Concluding Thoughts
In creating an add on feature for an existing successful mobile app I learned the following:
1. Feature Creep. In the case of a fin-tech app it was challenging reconciling the interview feedback with PayPal's mission.
2. Integrating an add on feature seamlessly with the existing interface. In my early sketches I planned out how the add-on feature will look but when I started building the mid-fidelity version I realized that the layout and design stood out against the app's existing interface. To work this out, I recreated PayPal app's existing screens and icons and then worked backwards to integrate the new feature into the current interface.
3. Inconsistency in PayPals breadcrumbs. The X icon and the back navigation icon are not placed consistently across the PayPal app. This made it more complicated for me to work out the placement of these icons across the new screens for the add-on feature.
