Information architecture

The information architecture maps out which screens are required and all the user interface elements which make up the structure of the app. By having everything in the one place it makes it easier to identify areas of improvements or gaps in the user experience.

Wireframes

Wireframes were created and shared with the product owner and developers to get feedback and a better understanding of any technical limitations. The beauty of this low-fidelity approach is you can collaborate with the developers and work agile without getting caught up and wasting time on the smaller details ahead of time. While the developers are coding up the basic structure and framework you can start providing them with final visuals screen by screen. A continuous design and development loop.

travel-rewards-wireframes

SSO Onboarding

Using a SSO (Single Sign-On) approach during the registration process it makes it easier for users to start using the app. It also removes clutter and unwanted UI elements from the screen at the same time leveraging platforms such as Facebook, Google or Twitter reduces the amount of registration information users have to provide.

Travel rewards app welcomeTravel rewards app sign in

Faster sign in with biometrics

During user research, I discovered users were having trouble remembering their registered email address or Travel Rewards card number. We implemented additional ways to allow users to quickly sign in: PIN, Touch ID, and Face ID.

travel-rewards-app-enter-a-new-pintravel-rewards-app-face-id

Promotions and shopping

Receive promotional information based on your spending preferences (accessible via the more tab). See what you can spend your Travel Reward points with the ability to browse, search or view categories to find what you’re looking for.

loyalty-rewards-homeloyalty-rewards-spend-points

Say goodbye to loyalty cards

Quickly scan credit card numbers – instead of having to enter a 16 digit number into a form field. Or scan your barcode via the mobile app and reduce the number or loyalty cards you need to carry. Loyalty cards are linked to your credit cards so you earn points automatically everytime you use your payment cards.

Travel rewards app credit card scannertravel-rewards-loyalty-cards

Clear user feedback

User feedback is given to ensure users are aware something has worked, or the steps they need to take to correct an issue. Gamification combined with simple animation help to create a more immersive and fun user experience.

Travel rewards app points collectedTravel rewards app check your email

Illustration process

In some ways, digital design is the complete opposite of creating a sculpture. With sculptures, you start with something solid and over time chip it down and refine it until you arrive at the vision you have in your head. With digital design, it’s the reverse you start with a rough sketch and iterate, add details and polish until it meets your expectations. Digital designs, however, is far more forgiving than sculpture :)

travel-rewards-illustration-process

Collect points (list view)

Find participating partner locations where you can earn Travel Rewards points. Similar to the Shop screen users can browse, search or filter to find what they’re looking for. A nice little touch is if the user selects points the supporting text changes to reveal that information, alternatively if they sort by the distance that information is updated to reflect what information the user is most interested in.

loyalty-rewards-stores-list-viewloyalty-rewards-stores-refine

Collect points (map view)

The interactive map allows you to find stores based on your current location. Like list view, you can filter and refine your search result to hide partners that aren’t of interest to you.

loyalty-rewards-stores-maployalty-rewards-stores-map-tile-overlay

Partner company overview

Learn more about participating stores, how to collect Travel Reward points, current promotions and even directions (physical stores only) to the closest store. This is where partners can let people know what products and services they offer and how they can contact, connect or ask questions.

loyalty-rewards-stores-detailsloyalty-rewards-stores-details-scrolled-down

Final design

Here’s a quick mock-up of how I intend the final design to look on an iPhone. I find by providing clients photorealistic mockups in context it helps them to visualize with how the finished product will look.

travel-rewards-iphone-mockup