Pockket

Competitive Analysis

Initial research in the design process revolved around analyzing potential competitor apps. This allows me to understand where these competitor apps excel and falter. I am able to gather insights into those apps to see what opportunities I could implement into my app design. I chose to look at Venmo and Zelle, due to their market size and capitalization on the market.

Click on the link to see the Full Research Findings.

SWOT Analysis of Venmo & Zelle

Strengths 

• Both Venmo and Zelle do not have fees when transferring money to other users.

• Zelle transfers are not held within the app for a number of days, but are sent directly to users’ bank accounts.

Weakness 

• Neither app has budgeting features available to its users.

• Only a limited number of banks have access to Zelle.

• Zelle still does not allow for business accounts at this time, while other apps already have a strong foothold in that area.

Opportunities

• Venmo could increase its market share by lowering the fee when transferring money to an external account.

• Venmo also could expand internationally to gain more users, since currently it is only available to users with a US-based bank account.

• Zelle could expand its user count by adding digital payment features like Apple Pay.

Threats

• Both apps are threatened by the ease of barriers to entry by many new and rising companies trying to compete for market share.

Key Takeaways

• After analyzing both apps, I found that I could implement budgeting and transaction tracking features as a way to appeal to a broader user base.

• I noticed that Venmo did not give its users the ability to request money from multiple users in a single transaction.

User Surveys and Interviews

To find out which apps that my potential users use the most and which features they find the most important, I conducted a user survey and received 31 responses. 74% of survey participants were between the ages 25-44 and 71% were female. After the user survey, I conducted 3 user interviews to gather additional insights from potential users. Below I provide some of the goals and findings from the survey and interviews.

Affinity mapping used to analyze user interview data

Key Takeaways

• I learned that from the user interviews all participants wanted a way to split transfers to multiple people in a single transaction.

• I found out that users want to have a way to take a picture of their credit/debit cards to be easily authenticated and linked to the users’ account within the app.

• Users liked the idea hat user flows for digital payments and money transfers is no more than a few clicks to get to completion.

User Personas

With the insights and knowledge I gained from the survey and interviews, I created two fictional user personas to get a better sense of what my target audiences’ needs and wants might be. By creating user personas I am able to stay focused on designing for my target audience and to have a user-centered design approach.

User Journeys

I then created user journeys for the user personas that showed how the user might interact with the app in completing certain tasks. Robert’s journey was to pay multiple users in one transactions, while Elise’s journey was to create a new monthly budget.

User Flows

The user flows that I created for each persona show the steps that they might take on their respective user journeys.

Key Takeaways

• Being able to focus on only one or two personas helped organize the needs and wants of the potential users into manageable sections.

• By creating user journeys and user flows, I am able to understand how the average target user would interact with my app and be able to create my app based on those perceived interactions.

Original Site Map

After I finished with the user flows, I then created a site map to visually understand the overall hierarchy of the app that I will be designing. I organized the possible features and screens that I will be designing under different categories that I felt would be the most efficient for the users to navigate to.

Initial Site Map

Card Sort

Next I had to see if my original site map is optimized for the real world. I had to test the site map with real-world potential users. I did this by creating a card sorting exercise which allowed participants to match up the features and screens that I included in the original site map.

Methodology

• Closed Card Sort (20 cards)

• 10 participants

• via Optimal Workshop

Revised Site Map

Based upon the results and data gathered from the card sort, I then revised the original site map to better organize the overall hierarchy. Below you can better see how the revised site map compares to the initial one.

Key Takeaways

• Participants were across the board with the "budget" card, with four participants placing it in the settings category and two participants each placing it in the “History” and “My Profile” category. Due to this disagreement, I decided to make “budget” its own feature on the bottom navigation bar.

• I predicted that participants would have placed the “add/edit bank cards” and “add/edit" bank accounts” tasks into one of the two categories since the features are very similar in their actions, however participants placed each task into the “My Profile” and “Settings” categories nearly evenly.

• I also assumed that participants would have placed the "send money" and "request money" cards in the same category, but the card sort exercise concluded that participants were split with placing those cards into the “Pay” and “Transfer” categories.

Wireframes

With the revised site map complete, it was time to start fleshing out how the app would look. At first I started by sketching out the wireframes using pen & paper. This allowed me to roughly visualize what some features and screens of the app might look like.

Mid-fidelity Prototypes

Next I created some low and mid-fidelity prototypes, using the sketches for reference, in Figma, to get a better sense of the positioning of the elements and buttons. Below are the same screens as above, but as mid-fidelity prototypes.

Key Takeaways

• By keeping the wireframes and prototypes in black and white, I am able to allow more focus on how the elements interact with one another. This allows usability testing participants to not have to think about the different colors and shapes of the elements themselves during usability testing.

 Usability Testing

After I created the mid-fidelity prototypes, I needed to test the specific features of the app against real-world potential users. I recruited 6 participants to test out 3 features within the app:

• sending money to another user

• searching for a past transaction

• creating a budget

Click on the links to see the Usability Test Plan and Usability Test Script.

Affinity Mapping

After completing the user testing sessions, I then analyzed the results and created an affinity map to organize the observations and remarks from each sessions.

Rainbow Spreadsheet

Next I then created a rainbow spreadsheet to analyze and quantify the behavioral patterns of the user testing sessions to find out which patterns occurred the most.

Click to view the Usability Test Report.

Key Takeaways

• What I realized from the usability testing was that the majority of participants were confused as to why the budget feature was within the history screen. This was fixed during the revisions.

• Another major error was when participants kept clicking on the Pay button instead of the Transfer button when they were told to transfer more to another user during usability testing.

Revisions

Once I was able to sort through the data that I gathered from the user testing sessions, I went back and redesigned the app to fix the errors that arose.

Preference Testing

After completing the usability testing with the Mid-Fi prototypes I conducted a preference test, via UsabilityHub, to find out which main design, colors, and shape users liked the most. 22 participants provided feedback of the below two designs.

Final Design

High-Fidelity Design

After usability and preference testing was complete, I once more went back to drawing board to fix the issues that were discussed from the testing. This included making changes for accessibility (darkening the primary color) and the design from the feedback received from my peers to make sure there is visual uniformity throughout the app.

Style Guide

Final Takeaways

Lessons Learned

• This project has taught me to always keep the user in mind when making any design decision.

• It is also very important to keep thorough and consistent documentation throughout the project, so that developer handoff is simple.

• It is important to take notes during each step of the design process, so that you can easily reference them when you need to review them at a later date.

• It is better to ask for feedback than to continuously iterate since, as the designer, you might not notice certain details that a fresh set of eyes would. 

Future Developments

• Adding additional languages would help expand Pockket’s market share in the future.

• Offering rewards, such as earning points, cashback, or discounts when making a purchase, will incentivize users to use the app more often.