Redesign + New Feature: Live In-App Updates

Project Summary

The mobile app services over 60,000 guests daily and is continuously evolving, especially for the industry.

With over 27K+ downloads, the app currently has the functionality to reserve a shower, but is outdated and had some critical information missing for drivers.

Results

Re-designed existing website screens and mobile app screens for over 6,000+ daily visitors. 

Launched real-time app updates for travel centers, providing access to 70,000+ parking spaces and 4,900+ showers.


Business Goal

The business goal is to have in-app shower updates and change the old-school paradigm of maintaining paper receipts. Drivers will not need to wait in the stores to view their shower status on the kiosk or main store display. Can you imagine how much easier it would be for guests not to leave their cab?

The business goal is to update the shower reservation area and make the shower status and availability display real-time updates in the app.


UX Role

UX/UI focused on information architecture (workflow) and interaction design.

The project required working closely with:

  • Product Owner
  • Project Manager
  • Business Analyst
  • Marketing

UX Insight and Findings

After documenting the current state of “myReservations”, the workflow and design appeared clunky, with information visually scattered between API and UI updates.

  • The app is native, making sure the pattern library includes native push notifications is a plus.
  • The icons and hex colors should match existing designs within the app for consistency across all scenarios.
  • Constant communication is vital with team members, as the deadline was tight.
  • Rapid iterations with quick turnaround were crucial.

Current State of Mobile App Shower Updates

Current State of Mobile App Shower Updates

Design Challenges

The screens’ criteria were vague, such as “refresh screens from the current design,” which have less interaction and functionality.

  • Finding a happy medium with what currently exists.
  • Pushing the limit ever so slightly to introduce the new capability.
  • Combing native notifications with in-app notifications.

Small Spaces

Fitting the information into a small space was a challenge. Even though users can scroll, the call to action (CTA) button needs to be above the bottom navigation.

  • The top and bottom navigation is sticky, so space is even smaller.
  • The numbers are large, and there are a lot of instructions/notifications.

Native and Customized Notifications

Native and Customized Notifications

Designing for Different Scenarios

The screens’ ordering is necessary to demonstrate the user’s journey as they reserve a shower, influence business buy-in, and guide developers during development.

Workflow with Multiple Scenarios

Workflow with Multiple Scenarios

Adding Delight

Guests will be delighted when they no longer have to go into the store for reservation updates. Everything you need to know about reserving a shower is on the app. From start to finish, the customer relies on:

  • Platform Specific Status Updates
  • Location Availability
  • Availability and Waiting Time
  • Number of Guests Ahead of You
  • Shower Reservation Number
  • Status of Shower Power
  • Shower Credits
  • Door Unlock Code

iOS Native Notification

iOS Native Notification

Design Intent

The goal is to inform the guest using the app, their status on reserving a shower within the “myReservation” area.

Considering the brand colors are highly saturated, the colors are legible and apply to ADA standards. Using a grid structure to organize content helps guide the user to relevant information.

The icons, numbers, and order display will create a visual hierarchy, keeping the user-focused on reservation updates.

New Design – Dynamic Content – API Data

Dynamic Content - API Data

End-to-End Experience Reserving a Shower

End-to-End Experience Reserving a Shower

Takeaways

Cater to your audience’s needs and always be transparent with information; this builds trust with your targeted audience.

Create a sequential workflow that matches the mindset of the guests and tasks at hand. Always communicate in small chunks to reduce cognitive load for the user, as well as information overload.

By using color and icons, visual hierarchy forms, adding simplicity to the design.

Below is an example of the prototype walkthrough:

  • Get code for shower
  • Refresh for updates
  • Get more info
  • Proceed to next screen
  • Reserve a shower
  • Continue to reserve your spot
  • Accept Notifications
  • Allow Notifications
  • Refresh for updates
  • Get more info
  • Proceed to next screen
  • Get more info
  • Proceed to next screen
  • Get more info
  • Proceed to next screen