For my first project in my Interaction Design 1 course at Northeastern, I explored the idea of a digital wallet that combined peer-to-merchant capabilities, such as Apple Pay, and peer-to-peer functionalities, such as Venmo. Furthermore, I designed this app in an ideal world where you could also store and use your drivers license, transportation cards, and loyalty cards on your phone.
Objective
Create a functional and effective digital wallet that provides additional functions that doesn't exist within existing digital wallets
Methods
Generative research, personas, user interviews, sitemaps, affinity diagrams, competitor audit, hunch sketches
Tools
Figma, pen & paper, Google Sheets
Interviews physical wallet users
Before I started designing digiwallet, I needed to understand the bright points and pin points that analog and digital wallet users have when using their products.
For the scope of this project, I was able to interview 3 users to receive a general understanding of how they user their respective wallets. By interviewing, I’ve learned the following pain points and bright points from wallet users:
Persona building + affinity diagramming
To get in the mindset of a potential digiwallet user, my team and I created a persona that we utilized as reference throughout the entire digiwallet design process.
Building Monica
Name
Monica Parks
Location
Chicago, Illinois
Job
Researcher at a geology institute
Lifestyle
Monica lives by herself with her pet cat in an apartment in Chicago. She spends most of her work week working in the lab downtown. On weekends, she prioritizes her mental health and frequents farmers markets and exercise classes with friends. Long-term goals: she wants to discover something new about the Earth
Values
Efficiency, eco-friendly, and honesty
Scenario
"As a researcher, I know the importance of being efficient with time and prioritize efficiency so I can spend more time enjoying the little things in life.
I want to be able to buy groceries, food, etc. with speed and ease
so I can get back home to my pet cat and spend quality time with her."
After building our persona, we started to brainstorm what features we thought would benefit Monica in her day to day life.
Creating a sitemap for digiwallet
Due to the restraints of my course, we were only allowed to focus on one main user flow, so we chose the peer-to-merchant transactions. However, we wanted to create a site map of all of the features we initially wanted to include, just as an overview.
digiwallet sitemap showcasing the main functionalities of the site and the main workflow I’m focusing on.
Test + Iterate
I conducted usability tests among my classmates to gain an understanding of what designs were successful and what designs could use improvement. As a result, I received many insightful critiques and translated them into the new designs. I've highlighted the most important comments below:
"The recently viewed card section needs to be more distinct"
Before
I received multiple comments that the recently used card section seemed a little bit confusing to users at first glance. After they understood the purpose of the section, the critique most users had was that it should look differently than the rest of the card sections.
To address this, I went back to my persona, Monica, and tried to put myself in her shoes to see how she would best use the app. I thought of how she might want a one-step access to using her last used card, which led to my improved design.
After
Before
After
I received multiple comments that the recently used card section seemed a little bit confusing to users at first glance.
To address this, I went back to my persona, Monica, and tried to put myself in her shoes to see how she would best use the app. I thought of how she might want a one-step access to using her last used card, which led to my improved design.
"The payment processing & completed modals look fake"
Before
In my initial attempt to create payment processing modals, I was unsuccessful in creating a realistic looking modal series.
By conducting more competitor analysis of modals that exist in the current market, I was able to create this new series of modals that not only feel cleaner, but also attribute to the branding of digiwallet.
After
Before
After
In my initial attempt to create payment processing modals, I was unsuccessful in creating a realistic looking modal series.
By conducting more competitor analysis of modals that exist in the current market, I was able to create this new series of modals that not only feel cleaner, but also attribute to the branding of digiwallet.
"The navigation bar icons look off."
Before
Many users showed a general dislike towards the initial icons chosen for the navigation bar. They said it felt "too clunky" and also "off."
With further investigation, I noticed that each icon had different border radii and followed a different styling convention. In my new design, I made the icons much smaller, updated the text to a heavier weight with an orange color, and also made sure the icons followed the same visual language.
After
Before
After
Many users showed a general dislike towards the initial icons chosen for the navigation bar. They said it felt "too clunky" and also "off."
With further investigation, I noticed that each icon had different border radii and followed a different styling convention. In my new design, I made the icons much smaller, updated the text to a heavier weight with an orange color, and also made sure the icons followed the same visual language.
"The login page text boxes are too small"
Before
When doing the usability test, multiply users immediately noted that the username and password text fields were much smaller than they were accustomed to and had trouble tapping the username text field.
To fix this issue, I enlarged the username and password text fields to follow current standard dimensions for touch point sizes.
After
Before
After
When doing the usability test, multiply users immediately noted that the username and password text fields were much smaller than they were accustomed to and had trouble tapping the username text field.
To fix this issue, I enlarged the username and password text fields to follow current standard dimensions for touch point sizes.
Reflections
As I had just started learning the basics of HCI, UI/UX design, and brand design while working on this project, there are many things that I would change. Here is what I would do differently if I were to do this project a second time around:
1
Take the time to create a design system before starting my first round of high-fidelity wireframes. I definitely wasted a lot of time trying to brute force a design rather than spending time in the beginning to establish a cohesive design system with color and appropriate typographic hierarchies.
2
Conduct more competitor analysis prior to jumping into creating my own designs. I thought that my app should create a whole new experience for the user. But through user testing, I found that this way of thinking is not conducive to a positive user experience. By conducting more competitor analysis, I will understand current trends and flows that users are comfortable with so that they will be able to navigate my application with ease.
3
Don't be afraid to design other alternatives! I found myself sticking with the main initial sketch I started with. Although I did find it to work out in the end, I did feel hesitant to keep going, but scared to start over. If I were to do this again, as a fun exercise, I would redesign my low-fidelity wireframes in a completely different manner.
.png)