All 50 Plates
App Redesign
APP SUMMARY
All 50 Plates lets anyone on a road trip keep track of the license plates they’ve seen. Easily scroll through the list of plates and tap on a state to mark it as “seen”. The app is available on the iOS App Store.
GET & EXPLORE
Background
This app had existed for years before I got involved. A developer/colleague of mine had asked that I give the app a “fresh coat of paint”. Because the app already existed, and functionality wasn’t changing, my design approach slightly changed for this project. The focus was more on creating a beautiful, more user-friendly experience.
Product Exploration
In order to understand what the client was looking for, I first sent a short questionnaire for him to fill out. This would inform the discussion I would have with him before I started. Between the questionnaire and the discussion, I would have what I needed to get started.
DISCUSSION WITH THE CLIENT
RESULTING REQUIREMENTS
After discussing the completed questionnaire, we determined that there were three main improvements to be made to the app:
Create a more polished UI that didn’t necessarily use out-of-the-box iOS components, keeping the signature mustard yellow color.
Support both light and dark modes.
Design a new app icon.
Questionnaire with responses.
Screenshots of the existing app.
During our discussion, we agreed on the following deliverables:
Figma mockups for each screen
Style guide that can be used for development
App icon options to choose from
Since this was an existing app, I wanted to learn as much about it as possible. I installed the app and used it for a while, documenting its behavior and taking screenshots of the existing UI.
EXISTING APP RESEARCH
Wireframing
Shortly after the initial discussion, I mocked up three rough wireframe options in Figma for the client. They ranged from a very ambitious redesign to subtle changes in the structure. When labeling these, I took into consideration the level of difficulty to implement as a developer. The client ultimately chose the subtle option.
COMING UP WITH OPTIONS
Wireframing options.
App Icon
With all of the research and wireframing finished, it was time for the fun part. I set out to design multiple app icon concepts in Adobe Illustrator. I wanted to keep the mustard yellow color, which made it stand out from competitor app icons (which were mostly blue).
I took the original icon as inspiration and wanted to give my concepts a “road trip” feel. I thought the yellow color would lend itself well to the lines on a street, but also knew I needed to keep the core of the application — a license plate.
App icon concepts presented to the client.
The client really liked the top left icon (the license plate on the road). He wanted the asphalt texture to be a bit more subtle, or possibly non-existent. He also liked the “Roadtrip” text (as opposed to “License” in some options.) I took that feedback and came up with a final logo that we both liked.
ITERATING ON THE ICON
Finalized app icon.
Style Guide
The audience for my style guide was primarily the developers that would be implementing these updates. When completed, the guide would be a single source of truth for all colors, typography, and icons. All final mockups would be based on these specs, and the specs could be considered when the developers build UI components.
WRITING A GUIDE FOR DEVELOPERS
DECISIONS
When deciding on fonts and colors, I kept in mind what was truly the star of any screen — the license plates. I ended up using a very simple Futura font. Outside of the primary yellow color, I laid out shades of gray (with a slight blue tint) to be used throughout the rest of the app. I also defined colors for light and dark modes.
Style guide defining fonts, colors, and icons.
Mockups
LAYING OUT THE SCREENS
Last but not least, I used the style guide to come up with mockups for each screen in the app. The mocks were designed for light mode and dark mode, in both phone and tablet sizes.
Main screen mockups with notes on the side.
Rather than have the number of plates found on the bottom, I decided to make it more prominent along the top, as an animated progress bar. I also noted that the plates should feel more tactile, and a haptic on the phone should play when the user taps. As the user is pushing down, the drop shadow behind the plate row would disappear. Feeling the button press in, and watching the progress bar move would give the user a satisfying feeling when finding a plate.
DESIGN DECISIONS
All possible call states laid out for developers.
Can’t forget about empty states!
Settings and About screens get some love.
Takeaways
One additional “added touch” was that I recreated all 51 license plates using Adobe Illustrator and Photoshop. By giving the plates a uniform look, and including their name in the asset, I removed the need to have the text for the state outside of the image. This took some time, but I thought was well worth it. As I mentioned — the plates were the star of any screen.
The mustard yellow color proved tricky to work with. My original concept was a more solid black with that yellow, which was pretty hard on the eyes. I ended up creating a softer blue-gray, and then darkened and saturated it to the point that it was almost black. This minor change made all the difference in the world to the overall look of every screen.
