I’ve had a lot of fun playing around the with designs and UX of the Five Things mobile app. Its come a long way from its initial designs and now features lots of great material components, illustrations, and animations. Below are all the various iterations the Five Things mobile UX has undergone:

Initial Design

The initial design of the Five Things mobile UX was very similar to FiveThings.me. It had five text boxes, a date that when clicked would reveal a calendar, and a hamburger menu that would open a navigation drawer. It also featured potential book cover designs that were hosted on Firebase storage (read more about Five Things Books here)

Second Iteration

With the rewrite of the backend, new authentication screens needed to be added.

Third Iteration

Once the backend was all rewritten I had lots of time to focus on the UI and UX. The backend switched to Google Sign In, so the sign in screens were replaced with a single button and a viewpager with illustrations I drew. I also made a few illustrations for error and empty states. I changed the navigation style for entries from left and right arrows to a swipe navigation (using a viewpager) and implemented an autosave feature. This iteration also added a light mode and some minor UI tweaks.

Current Design

Inspired by my time at the Android Dev Summit I came back to the Five Things app and did some big redesigns. I updated the navigation from drawer navigation to the shiny new Bottom Navigation using the Material Components library. And taking inspiration from the Google Home app I added a Floating Action button to my bottom nav that would open up the calendar to select a date. From the excellent talks about animation and specifically animated vector drawables I created the navigation icons and animated them when clicked.

This iteration also began to experiment with an analytics dashboard.

In the future I plan to finish out the analytics dashboard with other key stats. I’d also love to support designing your own book through the app.

Sketches and Ideas

I keep a notebook where I’ve written down all my ideas for Five Things Designs, here’s a few of my sketches before I built them out: