PearOS Wallet App
Money transfer/Student ID-supported Wallet App for a foldable/bezel-less smartphone operating system
Wallet App of the Future…
As part of our Mobile Application Design class, our team was responsible for designing a Wallet App over a 2-week sprint for a foldable/bezel-less phone operating system that our class designed collectively in earlier sprints. With the new system enhancements, we wanted to take full advantage and go all-out adding functionalities. However, we realized the usability issues with making the app too complicated and over the course of two weeks we did the best we could while still empowering users.
Before we dive into the actual Wallet App Design process, let’s take a look at a very brief overview of our operating system, PearOS.
Marco Anthony Punio
UI Design w/ Figma (Card Details Page)
Prototyping w/ Principle
November 2018 ~ December 2018 (2 weeks)
What Is PearOS?
In short, PearOS is a foldable/bezel-less OS that switches between two modes by bending screens (Tablet mode vs Phone mode). The screen dimensions are 512px x 768px when folded (Phone mode) and 1024px x 768px when unfolded (Tablet mode), making it wider than a regular phone in phone mode and smaller than a regular tablet in tablet mode. Given the time constraint we had, only Phone mode screens will be shown in this writeup.
However, on the hardware side, we drew inspiration from recent (as of writing) patents from Microsoft and Samsung on foldable phones and made our device (when folded), curvy on the outer edge but straight on the inner so that when unfolded, the phone becomes like a tablet with curvy edges on all sides.
The design of the OS took inspiration from Android and iOS and therefore the OS features a lot of the same things users are used to in smartphones nowadays such as lock screens, home screens, and applications. The phone also features elimination of the home button, using swipe-up to go home.
In addition, there’s a notification screen on the front/outer-side of the phone in rest-state (folded to conceal the screens) with power and volume buttons along the right edges of the phone. It’s also important to note that in rest-state, the screens won’t fold completely into each other and rather at a curve to prevent damage. The user could then open up the phone to put it in Tablet mode or fold again to put one screens back-to-back and be in phone-mode
Wallet App - Competitive Analysis/Ideation
Looking at Apple/Samsung/Google pay, we learned quite a few things that we wanted to utilize. Apple Pay’s function seems simpler as there’s only a page with cards and passes. However, Samsung Pay empowers users more through cash back rewards, store and trending deals and a homepage that reflects that. Google Pay seems to be somewhere in between with the ability to manage Google subscriptions and services.
With such goals in mind (simple, empowering users), we decided to brainstorm some of the pain-points we have with current Wallet Apps:
Hate pulling out physical wallet just to tap Student ID/Membership Cards
Having to go to separate apps for sending money (Venmo)
We decided to include two main features as part of our App:
Support for Student ID/Membership Cards
Allow users to send money to other users of PearOS
We decided to have three main pages (shown at the top), with Credit/Debit and gift cards on one page, ID/Membership Cards on a different one and “Passes” or miscellaneous cards on the last one. Within each page, we decided to divide the cards like how iOS Wallet does it, with one type of cards on the top and the others on the bottom of a page. For instance, the main page would show credit/debit on top and gift cards on the bottom. In addition, we’d navigate through the main pages by swiping left and right with the three dots on the bottom like iOS’s as affordances.
Opening up the app would take users straight to the main page with their payment cards (credit/debit/gift). Clicking into a card would show the transaction history as well as a button on the upper right corner allowing users to send money to other PearOS users with the card selected. Upon holding the phone near a Near field communication (NFC) reader, a payment screen would show up like the one on iOS.
Initial Mockups/Design Critique
After showing our designs to our instructor Brian Fling and Teaching Assistant (TA) Matthew Farmer, we received the following feedback:
iOS style dots navigation cuts up the card awkwardly, confusing users
User won’t look at transaction history from over a month ago
Cards -> Card Details
We decided to introduce a bottom tab navigation to make it clearer for the users as well as eliminating the awkwardness of how the three dots interfere with the cards right above them. The user can now either tap or swipe to switch between pages. In addition, for the card details page, we eliminated the option to view transactions in days/weeks/months and decided to limit the time frame to a week. We also added a bottom scroll-up view indicator on that page to make it clearer to the users that they can scroll up to see more transaction history.
We sought to really empower users with this Wallet app, but somehow we ended up sacrificing its usability (the initial complicated Card Details page) at first. We were too caught up in the visual design given the new features and that didn’t work. We decided to think more in terms of function or the user experience (referencing iOS Wallet) while still introducing the new features (ID/Membership card-support and Money transfer), improve the usability by simplifying the UI. That worked well.
Given time for another sprint, we would start ideating how we would enhance the Wallet app with tablet mode and wireframe what that might look like and hopefully have at least initial mockups done as well. It has been a great sprint learning the difficulties of designing apps that offer new features without making it too complicated for the users as there is a limit to what we could’ve referenced given this new thing we were making.