Project Goals
SmartSwipe is a mobile solution for the Apple iPad found in the app store. It was designed to make it easier for credit card processing on the go simply using a mobile card reader. The goal for this project was to make a mobile application as simple and efficient as possible. This meant having the basic features for credit card processing a simple user interface that was very intuitive for the users to grasp. The clients provided me the color swatches they wanted, which we used in the related logo design as well. We decided to go a very clean route and display only the essential information and buttons on each page with a slide-in navigation on the top right. This would make it easier to navigate through the app and providing the user simple options to get the task done. We didn’t want to go overboard with customizations and decided to use familiar features Apple users are accustomed to including default apple buttons for navigating, keyboards, dropdowns, and alerts.
My Process
01
I discuss with the client what information they would like to present, images to use, color assets, and typefaces. After I get a feel for all the content and number of pages for the site, I start to formulate a plan to execute.
02
I start with a wireframe using Adobe Photoshop. This will be used as a template to show where the images, icons, and the provided verbiage will go as placeholders. Then I will flesh out each page using the discussed assets such as typefaces, color scheme, imagery, and icons.
03
After creating and laying out the design that includes all the assets, I use Adobe XD to prototype the site’s functionality. This will include how the navigation will function, the buttons hover effects, and where each button and link will lead to.
04
Once approved, I will slice each graphical element so I can store and add them to the site. I will reference the designed pages and page building modules and some custom code to create each page. Finally, I will test each version of the site for desktop and mobile options.
Project Details
Font Family
Montserrat
AaBb
Color Swatches
#0072bb
#0089da
#666666
#ffffff
Software Used
Adobe Photoshop
Adobe Xd
SmartSwipe Cash Register iPad App
Home Screen
The SmartSwipe Cash Register App allows users to download the app from the store and process credit cards over the mobile device.
Transaction View
The app includes features of adding and managing inventory and a checkout option by swiping a card on a mobile reader or entering the card info.