Project Summary
Project Type
UI/UX
Project Deliverables
Duration
August - December 2022 (3months)
High-Fidelity Figma Design, Documentation, and anything else that we came up with.
Team Members
Walter Dorau, Ben Habegger, Meryl Lennon, Shrey Panchal, I-Hsi Chen, Justin Lee, and Elsa Jerry
My Role
For this project, I contributed to the research stage of the project: interviews (interview protocol) and secondary resource: competitive analysis, communicating with our skakeholders and our design screens: sketches - interactivity high fidelity prototypes.
Project Overview
Background
FreedomPay is a major fintech company in Philadelphia that focuses on commencing platforms that offer multiple solutions such as payment processing, loyalty, and data management.
Problem
The screens given to us by Freedom Pay's development team are vast and include many intricacies:
-
Lack of an intuitive onboarding that informs users about unfamiliar words
-
Obfuscation of information on how credentials and the i-Zone work
-
Mnemonic Phrase
-
Navbar
Design Task
Our team selected to work on the consumer wallet app portion, titled Finite. We assessed the nature of the current Finite app by conducting a UX audit and from there testing.
Reoccurring Terminologies
'FP' - Freedom Points or Loyalty Points
'Credentials'- Various data sources underneath a category become active once your bank account is linked to the app
'i-Zone (Shoutbacks, Coupons, and Invitation)' - Users receive coupons from the merchant or companies that are linked with their active credentials
'Mnemonic Phrase' - a group of words, usually 12 or more randomly generated phrases, that is created to access one's account
DESIGN PROCESS OVERVIEW
This project primarily focused on evaluating the screen, given to us by FreedomPay's Team, from a UX perspective using a UX audit to usability testing and finally the final designs. Some key methods and activities included:
Concept Mapping
UX Audit, Usability Testing
A quick recap of what was accomplished
Our Solution
Through our secondary research and testing, we designed prototypes for three main sections: Onboarding, Creditenals, and i-Zone.
Onboarding
The goal of Onboarding was to ensure that the process of creating an account was intuitive and similar to other Cyprto Wallet Apps
Credentials
The goal for the credentials sections was to reduce the amount of information that was on one page, while also improving readability and searchability as we decided to divide credentials into two states: Active and Exploration. Active shows the currently enabled credentials, while explore helps you find more that are unused.
i-Zone
The original i-Zone feature was lacking information hierarchy while trying to convey to the users the function of each section of the navbar. Now that Zero State has been added to our home screen, and with the additional help of our onboarding, the user should be able to understand this crucial part of the application.
Breaking Down Loyalty Programs
Using a Concept Map to polish our knowledge of loyalty systems.
To further understand the structure of loyalty systems and the key features that lead to the user's retentiveness, we mapped out its core features and how they work which will serve as a backbone to analyze the Finite app and give us a point of reference when we would conduct our UX audit for the screens.
Original Screens
Using the testing method: UX audit to test quality assurance for accessibility, user interface (UI) component continuity, and design unity requirements. More specifically, this UX audit is to assess the usability and effectiveness of the app.
Original Onboarding
The entire team was in unity regarding the challenges that users would face as the onboarding was confusing and underwhelming. These four screens do not provide an experience that would help the users become accustomed to the core functionality of the app. Users want to know: Why do they need a nickname? What is the purpose of a Mnemonic phrase? Where can I safely store my phrase?
Original Home Screen & Credentials Screen
As a team, we decided to divide and conquer the videos that our sponsor sent us which explain the main components of the application, and to be quite frank, we came to the conclusion that the app is lacking usability which why is our analysis would rely on the Google Material Design Principles as a guide to evaluate the original screens.
-
The match between the system and the real world is lacking, and even when certain metaphoric interfaces are used such as the eye or book, the user still does not understand what these represent.
-
The visibility of system status may show that we have an FP balance of 100, but what does that mean and why should it matter to me?
FINITE APP USABILITY TESTING
Approach
Our UX Audit revealed that the Onboarding, Credentials, and Shoutbacks components of the app lacked a fundamental understanding of the users. A think-out-loud approach was used to test the ideas and challenges that came to the minds of our users. By doing this, we were able to hear what the user was thinking as they navigated through the application.
User Inputs
Johnny Brown
Student
Glancing at the navbar icons, there isn't any context behind what to anticipate next.
Elisha Maverick
Student
I would like to see some sort of description for me to better understand what is expected of me during the Onboarding process and throughout the app overall.
John Doe
Student
Implementing a filter would be dope so I can know which credentials are active and explore the rest that are not.
Takeaways that influenced our screen iterations
Mnemonic Phrase
-
Users would much rather prefer having a password or pin to log into their account than just solely Face ID. Some devices don’t have Face IDs.
Navbar
-
Each of our four tests had users confused about what the icons on the bottom Navbar meant. All tests concluded that the middle button was a ‘home button. While there were differing opinions on the left and right buttons. Users thought the left button meant booking, settings, and possibly a list of options. Users thought the right button meant a list or a book page.
Onboarding
-
Since the app had no onboarding or any screens explaining what the app’s purpose was and what it exactly did, users were lost while going through the initial screens.
In-app experience
-
Users were really confused about what exactly the home page, credentials, and i-Zone do
Original Screens vs Revised Screens
A lot of work and time was devoted to iterating the three main sections of the application since the original lacked a vast majority of intricacies. To summarize, here is a quick recap
Adding a Zero State (Home Screen)
1
Active User Home Screen
2
Onboarding
3
Mnemonic Phrase
4
Two-Factor Authentication
5
Permissions Screen
6
Credentials
7
i-Zone
8
Invitations
.png)
9
Coupons
10
.png)
FINAL PRODUCT
THE FINAL SCREENS
Onboarding
Zero State Screen
Active Credential & Discovery(i-Zone) Screen
Credentials
Discovery (i-Zone)
Conclusion
Reflection
As a UX designer working on the Freedom Pay project, I have learned a lot about the importance of user research and testing in the design process. One of the key takeaways for me has been the need to constantly iterate and refine my designs based on feedback from users.
Through user interviews, focus groups, and usability testing, I have gained a deeper understanding of the needs and preferences of Freedom Pay's target users. This has allowed me to create designs that are not only visually appealing but also intuitive and functional for the people who will be using the product.
I have also learned the value of collaboration and communication in the design process. Working closely with the development team and other stakeholders has helped to ensure that our designs are feasible and aligned with the business goals of the project.
Overall, the Freedom Pay project has been a great learning experience for me as a UX designer. I have grown my skills in user research, design thinking, and problem-solving, and I feel more confident in a collaboration setting which helped everyone understand the unfamiliar phrases used in the application.
You might also like....
Baseball Little League
An interactive application that helps improve communication and scheduling between the multi-skateholders of a Little League.