Tagg App + Google Material Design = 😍
30 Days, 30 UIs: Days 26 & 27
If you didn’t catch my last post about Tagg, a solution to lowering the quantity of crappy Graffiti on the streets, Give it a quick read.
About Tagg’s visual design… It’s pretty shit. As a UX Designer, how can I improve the UX of the app through better Visual Design? I decided to turn to Google, and use their incredibly well-documented Design System, Material Design, for a second pass at skinning the app and improving the overall experience.
As a test to my own skills, I followed the Material Design Guidelines to a T, and the results are pretty awesome. The app now looks professional, has simpler flows, and better interactions for our users.
To prototype, I used an app called Atomic.io for the first time (it’s great for transitions! Give it a try). Here’s what went down.
UX: Flow, Structure, and Component Changes
Instead of a tab for starting the Paint Flow, I used The Google floating button, with a spray paint icon in the center. I also placed the user profile in the ellipses, since it currently has very little use to our user other than saving your street name and changing your password.
The structure also needed a bit of tweaking to fit the Google’s Guidelines, so I removed the tabs altogether, and made the map the main screen.
Instead of overlay popup components, I changed the Overlays into bottom modals.
Visual Design: Color Meaning
In Material Design, bold color contrast are your bread and butter. I used color to indicate a couple different things to the user:
User Flow Indicators
Hierarchy of Importance
User generated Content
Magenta, Cyan, and Purple buttons are the three indicators of an action. Magenta is used to show primary flows, Cyan secondary, and Purple is user generated/related.
Give it a try!
I bore you all day about the Nav bar color changes, the content structure, etc. Instead, let’s try this: