Bacon
Project Context
Does the pandemic and world situation have you feeling financially unsafe?
Since more and more transactions are taking place digitally, security threats have gone up in proportion.
How can we make purchases securely and efficiently?
How can we store banking and credit card details in one place?
What other features do eWallet users want?
Enter my CareerFoundry UX Design project, Bacon.
Designing Bacon was the pinnacle of my online program.
The goal? Provide a solution that meets its users' needs.
My Role
Howdy! I'm Fred Tan. UX/UI Designer. I was responsible for Bacon's end-to-end design for CareerFoundry's UX Design Certification, June 2021 to December 2021.
I started with these Problem and Hypothesis statements. They would guide the research phase and the rest of the design process.
Competitive Analysis
I needed to learn the market I was entering. PayPal immediately came to mind. Google Pay was a close second.
The next step was evaluating their strengths and weaknesses. After reading articles about them and playing with the apps, I compiled the following SWOT Profiles:
PayPal SWOT Profile
Google Pay SWOT Profile
User Stories
Since I was more familiar with the problem space, I brainstormed app features users might want based on the business requirements provided and competitive analysis insights. User stories were perfect for this.
Survey Says...
I continued the research by conducting a Google Forms survey with nine participants. Collecting information from real people for early insights provided some direction and were based on actual responses, not assumptions.
Survey Questions:
1. How young are you? (Under 18, 19-24, 25-34, 35-44, 45-54, 55-64, 65+)
2. Do you use eWallet apps to make online purchases and/or transfer money to others? (Yes/No)
3. Do you feel safe using eWallet apps? Why or why not? (Open ended)
4. Which eWallet apps do you use? Select all that apply. (PayPal, Google Pay, Apple Pay, Venmo, Zelle, Cash, Other)
5. How often do you use eWallet apps? (Always, Often, Sometimes, Occasionally, Never)
6. What is your top reason for using eWallet apps? (Open ended)
7. How has your overall experience been with eWallet apps? (Excellent, Very Good, Good, Fair, Poor)
8. How could your experience with eWallet apps be improved? (Open ended)
9. Which feature would you prefer in an eWallet app? (Choose one: Budgeting, Gamification, Rewards)
10. Why do you want that feature?
11. Any questions/comments?
Key Insights:
- Almost half of the respondents were 35-44 years young.
- Everyone felt safe using eWallet apps.
- Order of app popularity: PayPal, Venmo, Zelle, Apple Pay, Google Pay, Target
- More than half use eWallet apps “Often.”
- Top reason for using eWallet apps is “Convenience.”
- More than half have had a “Very Good” experience.
- There were insightful responses under how experience with eWallet apps could be improved:
“More stores need to take it,” “Less hassle opening the account,” and “Make transfers from app to bank account tied to app easier.”
- Rewards won the Special Feature question in a landslide (87.5%).
Interviews
Four people were interviewed. They were men between the ages of 28 to 47. I know all of them personally, and they are confirmed eWallet app users. Their experiences with these apps provided valuable insights.
The following is my interview script:
1. Describe a typical day in your life. What are some of your regular responsibilities?
2. Do you currently have a source of income? How many hours per week do you work?
Are you salaried or paid hourly? How often do you get paid?
3. Do you tend to save or spend? What do you save for/spend money on?
4. Would you say that you are financially literate? Why or why not?
5. What finance/personal banking areas would you like more knowledge about? (e.g., investing,
cryptocurrencies, budgeting, paying off debt, etc.)
6. Do you currently have a money management method? Please describe it.
7. Are there any parts of your money management process that are frustrating or tedious?
8. Are there any particular banking/eWallet apps that you use to manage your money?
If Yes: What features do you enjoy? Which features do you not enjoy or find difficult to use?
What would you change about these apps?
If No: Are there any eWallet apps you’ve heard of?
9. How often do you shop online? Send money digitally? Receive money digitally?
Describe the context of these actions.
10. Which feature in a banking/eWallet app would you prefer? Why? (Budgeting, gamification, rewards)
11. How safe do you feel spending, sending, and receiving money digitally?
Is there anything that would make you feel safer doing so?
12. In a perfect world, what would your financial management process look like?
Main Takeaways:
- For the Special Feature question, interviewees overwhelmingly chose Rewards. Thus, a Cash Back feature would be implemented.
- Everyone felt safe spending, sending, and receiving money digitally overall.
Interacting with potential users by discussing their experiences, needs, wants, goals, and frustrations was an eye-opening process. I got to know users on a deeper level. What makes them tick. And now I could design an eWallet app just for them. For the people.
User Personas
Using the insights gathered from my survey and interviews, I crafted user personas to bring Bacon's potential users to life.
Meet Toby and Kyle.
A visual representation of my research provided a clearer understanding of target users' needs, goals, and frustrations. These personas helped me think from an empathetic point of view, versus my own mental model.
Journey Maps
I still had to figure out how Toby and Kyle would use the app, and how they felt at each stage of their journey in achieving their goals. Thus, I created journey maps for each persona to provide context for their app usage.
I cross referenced tasks with possible thoughts and emotions, pin-pointing opportunities where I could enable positive experiences for them.
User Flows
With context from the user journeys, I needed to know the specific actions Toby and Kyle would take when using Bacon. User flows allowed me to map these actions to potential screens within the app.
Site Map
Compiling all this information into one app was daunting. Fortunately, there were ways at my disposal to organize the information in a logical and concise way.
Before starting the physical design process, I created a Sitemap based on Toby's and Kyle's journeys.
I desired to see how potential users expected the content to be organized, so I used OptimalSort to conduct a hybrid card sort with familiar categories common to eWallet apps: Home, Pay, Accounts, Settings, etc.
Revised Site Map
Bacon's sitemap needed some minor tweaking to clarify certain functions. The participants basically grouped the cards in the intended order, with a few exceptions. The intended locations were ultimately kept, as they were integral to the design.
Sketches
Here, I put pen to paper to visualize Bacon's design and a user flow (paying Kyle). Using my sitemap as a blueprint, I sketched ideas focusing on content layout. Bacon was taking shape.
Mid-Fidelity Wireframes 1
I used Balsamiq to fill in the details and created mid-fidelity wireframes. The software included design elements (buttons, menus, etc.) that started bringing Bacon to life.
Mid-Fidelity Wireframes 2
Using the powerful Adobe XD, I developed more details and crafted these higher fidelity mid-fidelity wireframes. They were grayscale, as they focused on function, not aesthetics.
From there, I turned these designs into a clickable prototype. I finally had a version of Bacon I could test with users!
Was Bacon user-friendly? Did it accomplish its mission?
We were about to find out...
Usability Testing
Psychologically speaking, people often say one thing, but do another. So I conducted three in-person usability tests and three remote usability tests to understand how real users would interact with Bacon.
The participants were asked to perform the following tasks:
1. Create an account
2. Pay Kyle
3. Join the Rewards program
At the end, I surveyed them on how easily they were able to perform the tasks, their overall satisfaction with the app, and any suggestions on how Bacon could be improved. The sessions were video recorded and analyzed.
Upon testing completion, I organized the findings as follows:
Usability Testing Results
Rainbow Spreadsheet
Errors and their severity were measured via the Jakob Nielson Rating Scale. Surprisingly, none were encountered. As a result of testing and analysis, many insights came to light. The design revision suggestions were much appreciated and some were later applied to create a better experience for Bacon's users.
For example, when paying someone, the affirmative "Done" button was unexpected and confusing.
The user was anticipating a "Send" button, like in other eWallet apps. Thus, "Done" was replaced with a more commonly used and clear "Send Payment" button.
Refining the Design
Hierarchy
On the Welcome/Onboarding 1 screen, green
was chosen for Sign Up to direct new users to
this CTA first.
Returning users will gravitate to the blue on
white Log In button located below the Sign Up
button.
The Onboarding progress circles were shrunken
and moved to the bottom, as they are not as
important as the CTA buttons.
Emphasis
On the fourth Onboarding screen, green
was chosen for Sign Up to emphasize this
crucial CTA button.
Returning users will notice the smaller,
yellow, underlined Log In located below it.
Yellow was chosen because it stands out.
Law of Similarity
On the Home screen, the bottom Navigation
buttons are similar in color and size. Many apps
and even phone operating systems feature this
design pattern and icons, so it’s familiar to users
and something they would expect. No second
guessing here.
The time had come to season the Bacon. Applying visual design principles like Gestalt Properties, Gestalt Laws of Grouping, and the Principles of Design, Bacon entered the refining fire. My aim was to bring cohesion and consistency to the user experience. Form had to follow function. Positive emotional experience required aesthetics.
Design Language System
I concocted a design system to communicate Bacon's style, typography, grids, etc. These systems save time and money, while helping to create a consistent experience across brands.
Peer Review
Another round of usability testing was completed. This time, via peer feedback from fellow designers.
They got to play with my Adobe XD prototype solo and leave comments in an unmonitored environment.
Genuine responses were received.
Accessibility
Towards the end, I performed an accessibility audit. Looking back, this step should have been at the forefront of the design process. Going forward, I will ensure that one of my personas represents someone with a disability, as this is often the case in the real world.
High-Fidelity Wireframes
Presenting the latest iteration of Bacon. Fresh off the grille. It's a work in progress, and as the saying goes, "There's always room for improvement." What do you think, friends? Would you use Bacon? Why or why not?
Outcomes & Next Steps
Where do we go from here?
Test another hypothesis:
"Given the current market trend, more people will buy and sell with cryptocurrency. Therefore, we will implement crypto capability."
Measurable:
User Retention and increase over a specific time period (six months, one year, year-over-year)
Market expansion:
Develop Bacon for other platforms, devices, and resolutions
Retrospective
Building Bacon has been a journey full of learning, experimentation, and reiteration. Learning the UX design concepts/process, applying them, and constructing my first responsive web app was a truly rewarding experience.
Surprises happened often. Sometimes I thought my design was stellar - only to discover that it fell short of grid alignment, industry standards, accessibility, etc. Learning to be open to critique and correction was an integral part of the process.
Given the chance, there are some things I would have done differently. For example, during the research phase, I would've asked more specific questions: "What kind of eWallet security features give you peace of mind?" The answers would certainly provide valuable insights to improve design direction.
Being Bacon's sole designer was a challenge. However, every adversity was an opportunity for growth. I learned how to leverage design software, developed design skills, and received valuable feedback and support from a knowledgeable tutor and mentor. I couldn't have done it without them.
Thank you for taking the time to tour Bacon. I hope you enjoyed tasting it as much as I enjoyed cooking it!
