Professional Work / Fall 2018
Advanced mPOS App
Project Overview
BACKGROUND: ROAMpay™ X is an advanced mobile point of sale application for smartphone and tablet. It provides merchants with easy access to all of the information they need, while giving customers a seamless, speedy, and secure checkout experience. RPX can be used with a credit card reader to provide a full merchant experience anywhere you can carry your devices.
RPX is the latest concept of our ROAMpay X app. For this version, I wanted a minimalistic but modern look with a basic streamlined user flow. The main goal was to give merchants and customers the quickest checkout time possible with the least amount of taps or steps. The app was built with both smartphone and tablet in mind to give the best mobile experience possible. It also features full white-labeling options to give merchants complete brand control over the entire application.
The UX is drawn from expert research and best practices combined with existing user data and feedback. Consistency was the most important factor across all main screens to insure we maintained common established UI patterns. The goal again was not to reinvent the wheel but to create a simplified, consistent experience for our many users and merchants.
Check out the ROAMpay X interactive InVision prototype to the left. This prototype was created to to demonstrate the checkout flow.
Tap the Username and Password field to get started! ➡
⚠️ If your browser does not support the embedded prototype, click here for an external link here:
PROCESS: The RPX development process started with a checklist to cover my main goals as well as to spell out my expecations of the app and what I would be expected to deliver. I wanted the checklist to outline every step and let the developers know the intentions and process.
From there I moved onto designing some very basic wireframes and design concepts that I could share for feedback and collaboration. I wanted to design a few rough ideas to get a look and feel of how our app would function and how a user would get to certain main sections of our app. I wanted to make sure I included elements that could be branded but were also well established in terms of UX.
My next step was to create user flows from beginning to end for different transactions and users. An example is cash transactions vs. credit card transactions. I also used scenarios like a typical restaurant transaction flow. I also wanted to outline the expected behaviors on smart-phone vs. tablet.
I organized my mockups of individual screens alongside the flows to visualize the process .
The following show a few of the user flows and wireframes:
Animations: The following are animation concepts and short demonstrations of interactive elements.
👌