ZipCe

A Responsive Payment Application with a Social Twist

ZipCe OVerview

ZipCe is a responsive web and mobile peer-to-peer payment application that focuses on creating a social experience for users. This project was created as a bootcamp assignment, for which I assumed all design-related roles.

Role: UX Researcher, UX Designer, UI Designer

Tools: Adobe XD, Microsoft Visio, Optimal Sort

Timeline: 6+ Months

Problem

Financial applications and digital wallets can be intimidating. The challenge of this project was to create a fun and social payment application to help users become more comfortable using financial applications.

Solution

ZipCe is a responsive payment application that makes social interaction the heart of the users' experience. ZipCe gives users the ability to post pictures related to their shared experiences and engage with content when they send peer-to-peer payments using the platform.

Comprehensive competitive analysis was completed. Although a few competitors incorporate features that create a degree of social interaction (Venmo), the features are not robust and have been neglected as these applications receive interface improvements.

Interviews

Interviews helped identify which payment apps user prefer, learn general attitudes towards payment applications, and identify gaps in the current market. Below is a recap of the results:

100% of participants have a digital wallet.
Venmo was the most preferred payment app.
80% of participants use Instagram.

Surveys

Surveys were utilized to help identify which payment apps user prefer, learn general attitudes towards payment applications, and identify gaps in the current market. Below is a recap of the results:

PayPal was the most widely used payment app (56%).
PayPal was the most preferred payment app (25%).
Instagram was the most preferred social media platform (35%)

PersoNAs

We wanted to form a deeper understanding of our users' goals, needs, experiences, and behaviors so we created 2 personas to represent segments of our user base. They were based on user interviews and surveys and helped influence all major design decisions. We used these personas whenever we needed to step out of ourselves and reconsider our initial ideas.

User Journey

With the goals of our personas in mind, we began to identify the steps users will take to complete the main functions of the application. We sketched a user journey map to identify how users will login, request payments from other users, send payments to other users, and redeem reward points. These were the four main use cases identified.

Wireframes

Prior to creating wireframes, an open card sort was completed with 5 participants to help gain a better grasp on the the structure of the app.

After refining the sitemap, I used Adobe XD to create low-fidelity wireframes. Then, I improved them by adding a relevant stock images and self-generated copy. At this stage, the wireframes were defined enough to perform user testing.

Usability Testing

I created a fully-functional, high-fidelity prototype of the new flows using Adobe XD. At the same time, I started recruiting subjects who fit our criteria. I first completed a round of usability testing with 6 participants, resulting in the discovery of 3 severe issues. I then took feedback from usability testing and completed a round of A/B tests with 10 participants to help iterate of the design.

Below is an example of a severe issue encountered during testing as well as the solution used to fix the issue.

Issue 01: Difficulty locating toggle switch within Wallet page

All 6 participants were confused by the information displayed to take on the Wallet page when asked to simulate a scenario of adding a new payment method. The Wallet had a toggle to switch between "Banking" and "Payment Methods".

Solution 01: Separate Banking Activities and Payment Methods into 2 different pages

Creating a separate section for bank activities makes the wallet page more focused and easier for the user to digest. The change was validated by completing an A/B test, with 100% of the participants preferring the change.

UI Design

Once feedback was gathered, I iterated on the final screens in Adobe XD, using Google Material Design as a reference for all design decisions. I created a style guide and pattern library to ensure consistency as new designs are created.

My goal was to create a visual identity that’s aligned with the brand’s values and business goal of being a trusted peer-to-peer payment app that is fun for the user.

View Prototype

Handoff

Final deliverables at this stage include comprehensive completive analysis, user personas, user flows, user research (interviews, surveys, card sort, user testing analysis), sitemap, style guide, pattern library, wireframes and a prototype.

Conclusion

The focus of this bootcamp project was to develop a complete UX toolkit. I was able to gain experience conducting research, forming the application's information architecture, and developing my UI skillset. With the help of guided exercises, lessons, and working with a mentor, I was able to showcase UX fundamentals while working on a project through the entire design process.

Thank you for reading my case study!

Want to work together? Feel free to contact me!
...or just say hello LinkedIn.

Let's Get In Touch

Page updated

Google Sites

Report abuse