Return to Works

Return Back

Return Up

Return Up

A quick preview of CAA's Mobile Redesign on iPhone 7 with slides.

CAA Mobile

Design | Wire-frame and Prototyping

A redesign for CAA Mobile to bring a clean and refreshed experience for your next roadside assistance.

process

the story

CAA Mobile is an app that lets members easily request and track their next roadside assistance at their fingertips.

As a previous Member Support Agent of CAA, I noticed there were increases with the number of calls regarding about navigating through CAA's webpage/ mobile app. My thoughts were, if I could redesign the mobile app to increase its user experience, this could reduce overloaded calls to the CAA call centers, allow members self-serve on the mobile frequently, reduce the wait time for the next live agent, and could let CAA focus on business quality and needs.

Picture of a flow diagram made in Figma.

role

For my role, I covered the research, brainstorming, wire-framing, and created a Figma prototype for testing (shout-out and many thanks to my peers for their time for testing my redesign). The tools I used to bring this redesign to life were: hand-drawn concepts, Figma, Photoshop CS5, and my overheated MacBook Pro.

Sketches of the login and home screen.
Sketches of the modal and services screen on paper.

design process

When I started on the redesign, one of the biggest challenges was to design and develop a prototype that would be easy to use and cater to everyone. There are three key audiences I needed to work with, the new members, old members, and members with visual and/ or technological barriers. To assist with the process, I was able to gather data from Apple's App store and from my tenure at CAA to evaluate all of the possible designs. My desired outcome was to make the app cleaner, vibrant, and user-friendly. Here are some key elements I want to point out and propose.

CAA's original mobile app login screen on iPhone 7.
Tommy's redesigned login screen made with Figma, displayed on iPhone7.

The original login screens require the user to enter their postal code and then login into another screen to access content. For the redesign, I had the login take either a unique membership number, an Apple ID, or a Google account. This allows the user(s) to take advantage of an established membership number system that they already have with CAA or they can simply login with an Apple or Google account for flexibility. The objective I wanted, was to provide a simplified and quicker login approach, all under one screen.

CAA's original mobile app home screen on iPhone 7.
Tommy's redesigned home screen made with Figma, displayed on iPhone7.

Here, I have the original home screen and the redesigned concept. As you can see with the redesign, my intent was to make the overall layout organized, with main content that is easy to access. After a few concepts, here's what I would like to point out for the final design:

NAVIGATION: I relocated the bar to the bottom of the screen with the header completely taking over the top. For accessibility, I want to allow left, right, and one handed users access the bar with ease. I found that when it comes to our hand positioning for mobile devices, our thumbs are more comfortable around the bottom to the middle sections of the screen.

ICONS: I redesigned the icons to keep a consistent look throughout the redesign. I identified commonly used icons and displayed them in accessible areas where it would save time and to prevent the user from searching for content or features.

BANNERS: I've completely made the banners to be bigger with the ability to scroll horizontally. I wanted the promotional content to have more breathing room, readability, and consistency to give it more value and easy access for the user.

COLOR: For the color design, I preserved CAA's brand color of blue, but gave a lighter shade and gradient to it, to give it a refreshed look. For the other gradient style colors, I wanted the colors to communicate to the user. Red = emergency/ attention, Yellow = warning/ delay, and Green = good to go/ confirmed.

final words

My redesigned CAA Mobile app was well received by my peers and from active CAA employees, whom I still keep in contact with. I was able to gather valuable feedback to make improvements to the app and myself, and the redesign was notolby recognized to be clear, organized, and user friendly.

I loved working on this project, it was fun and I enjoyed every aspect of it. This experience has opened up opportunities for me to explore and improve on the design process and to find better ways to tackle on the challenges throughout the project. The learning doesn't stop here, there's still much more to learn, and I am excited to see what else I can work on next.