EMoney App 2017-2018
These empty states were created with a call-to-action to let the user know what they should expect to see, and that it is not empty because of an error.
Introduction to the app leads to the action of adding a card to the customer's wallet. This app is for payments so it is necessary for the user to have a form of it from the start.
This shows the user's digital wallet with eLoyalty Cards, the details of the card and the reward info for the loyalty program.
Here is a user flow of how the receiver will use the app to claim funds sent by another user.
Here are some of the other hi-fidelity mocks I created in the Sketch App.
A proposed feature was to allow parents to give allowances to their children in this app. I created this simplified flowchart of this experience for the product owner. It was ultimately shelved for later.
I designed these invoice details screens. Usually invoices will have wide tables with columns of information. Tables are difficult to view on a phone app and this is my solution.
This design eliminates the need of having a wide scrolling table in favor of hiding the information of lesser importance, but the user can still see the hidden columns by taping to expand an area.
Company / Client
All UX artifacts, a portion of the user flows, some wireframes, some UI Design, Copywriting, Prototype, Interaction Design, Hi-fidelity Mock, Redline Hand-offs, custom assets.
Sketch App, Adobe XD, Photoshop, Illustrator
What is the problem and/or purpose?
This is the mobile app version of EMoney application for the consumers. EMoney web platform is merchant focused, but we needed a way for the consumers to respond to the merchant when they receive an invoice.
Ocean City Transit is also a client with a problem: allowing visitors to buy a digital bus pass if they did not have change on hand. Users can also send money or gain loyalty points since they have a “digital wallet” within this app.
Who is it for?
The transit portion is targeted towards young traveling families with their smartphones.
Young professionals that would prefer to pay invoices on their phone without writing a check; savvy shoppers who do not want to carry another card for their loyalty program.
What processes were used?
Invoice: initially the invoices only showed the first column (product description) and total due. Users had to go on the desktop version to see the full invoice. I solved this problem by having expandable boxes for the other columns. I came to this approach after researching for CSS solutions for long tables on a website.
Transit: bus drivers were unable to see the ticket screen well and determine that it is valid, not a screenshot. The team's solution was to update it with a rotating icon and a big countdown clock that the bus driver can see from 5 feet away.
The iOS app is live on the app store now. There are some connectivity issues with the app, but there has been over 5000 active users so far in the summer. I am waiting for further feedback from the stakeholder.