usc-charities.jpg

USConnect App Wireframes

USConnect Wireframes

Introduction

USConnect is a rewards program for select vending machines in and around the Southeastern United States. As an intern with Small Footprint, the company rebuilding their payment app, I developed a new interface, onboarding flow, in-app wireframes, and some additional functionality. The challenges I was faced with at the outset of the project were creating a fresh, contemporary look for an older target audience, setting the groundwork for a future gamification scheme, and increasing overall useability without a complicated user transition.

The Team

Our design team in the Winston-Salem office was three people, myself included. Because of this I was able to regularly discuss concepts and get feedback on my designs, enabling me to produce viable wireframes in under two weeks. These wireframes became the first new functionality built into the app. 

Hello, Planning

Sketching is an important part of how I develop solutions. Shown here are some of my first drawings for the app, exploring different screens for account creation and program introduction, a login page, and a home screen. Here, I also chose to use a more friendly and personalized tone towards the user; one of my goals was to break down the onboarding process for new users into more direct instructions, and to convert customers into paying users within the introduction by adding Apple Pay, a credit card, or a gift card during account creation.  

 

Details

This set of sketches emphasizes smaller details, including a reveal effect for promotions that are being "unlocked" or earned as part of the gamification scheme. I knew from previous conversations with my team that the project owners liked the look and feel of the Starbucks, Swarm, and Paypal apps, and brought some elements, including the idea of "cards" for highlighted info, into my designs.

When beginning a new design, especially for mobile, I often find it helpful to start by drawing as many screens as I can think of. This helps me to visualize how many are actually necessary, and when creating flows I can then physically move the designs around before digitizing. 

 

 

Sketch Mockups

These are the first mockups for this project, and show a carousel of different promotions in the home screen, a user menu, and the process for choosing a charity to donate a portion of proceeds to.