No More Diets App UI

Android Material Design User Interface

  • Client:

    Illuminated Bits

  • Date:

    12/2015

  • Category:

    UI

  • Google Play:

    Link

  • Views:

    19 views

I studied Google’s Material Design spec for a few months in preparation for this project. Material design is a complex, yet beautiful set of guidelines for designing for the Android platform. At first, I found the guide difficult, but as I went along I really appreciated the detailed rules as it made it easier to make design decisions and helped keep everything neat and consistent. This project was a redesign of a pre-existing iOS app and was my first design project working on an app. I am an Apple fan and found it funny that the first app I worked on was for Android, but I was up for the challenge. Dr. Jenn Mann partnered with Ish to develop the app, and Ish partnered with me to design it. The app contains material developed by Dr. Jenn, and is all about the non-diet approach to losing weight, gaining control over your eating habits, and finding peace with your body.

A Samsung Galaxy S7 phone in gold showing the user interface for the Disclaimer screen for No More Diets

Disclaimer Screen

One of the first screens to design for was the disclaimer everyone has to agree to before using the app. I decided I wanted to use Pink 500 as my primary colour and Amber A700 as the accent colour. I used a raised button for accepting the disclaimer. “A typically rectangular material button that lifts and displays ink reactions on press.”

4 Samsung Galaxy S7 phones in gold showing the user interface for the Main screen for No More Diets

Main Screen Versions

The Main screen was the next screen to design for. This screen navigates to all the other areas of the app. There are 9 areas which include an ebook with videos, a food and feelings log, an exercise log, a self-care list, a legalizing food log, a questionnaire on what you want, an eating awareness exercise, a list on changing self-talk, and quotes. I decided I wanted to display this using a 2-column grid of tiles. I styled this according to Google’s spec for a two-line-grid list with an image, a caption footer and 4dp grid-list padding. I experimented with scrims which are “lightweight, translucent material layers” that help protect text legibility. You can also think of these as subtle gradients. I also tried a solid colour footer with an accent colour, and a transparent black footer, before settling on the scrim which is pictured above in Version 2 with the star underneath.

A Samsung Galaxy S7 phone in gold showing the user interface for the Ebook and Videos screen for No More Diets

Ebook and Video Screen

The ebook is the main component of the app, which provides readers with valuable knowledge for their health journeys and background information on the tools in the app. My idea was to hide chapters behind the vertical more icon. Navigating to the next chapter could be done in the bottom toolbar, which could also double as controls for a video when activated.

4 Samsung Galaxy S7 phones in gold showing the user interface for the Food and Feeling Log screen for No More Diets

Food and Feelings Log Screens

The Food and Feelings log went through a few renditions. First of all, I tried a discrete slider, that displays values in the slider thumb when dragged. However, this wasn’t very user-friendly because the numbering system would be hidden and labels were also needed to be more meaningful. So in Version 2, I designed a custom slider with numbers at the top and labels for what the numbers represented below. In Version 3, I moved the labels to the top right, so they wouldn’t be obscured when dragged with a finger from the left. I also moved the floating action button up to the top. The problem with this was it would obscure the text field, so I experimented cutting it a bit shorter. Floating action buttons can straddle the seam of 2 sheets of material, which is what I tried to do in most cases. But it was often difficult because it could interfere with other content.

4 Samsung Galaxy S7 phones in gold showing the user interface for the Exercise Log screen for No More Diets

Exercise Log Screens

The Exercise Log has a similar design to the Food and Feelings Log. I used alternating colours to help break up the content into clear blocks.

4 Samsung Galaxy S7 phones in gold showing the user interface for the Self-Care screen for No More Diets

Self-Care Screens

I designed the Self-Care screen as cards. The app comes with some suggestions for self-care and you can also add your own. I first designed them to have favourites and a share button, but it was a bit too much functionality for an early stage, so I simplifed it. When tap one, my idea was it would open the editor, and the floating action for adding would animate into an ‘x’ for deleting.

4 Samsung Galaxy S7 phones in gold showing the user interface for the Legalizing Food screen for No More Diets

Legalizing Food Screens


4 Samsung Galaxy S7 phones in gold showing the user interface for the What Do I Want screen for No More Diets

What Do I Want screens


A Samsung Galaxy S7 phone in gold showing the user interface for the Eating Awareness screen for No More Diets

Eating Awareness Screens


4 Samsung Galaxy S7 phones in gold showing the user interface for the Changing Self-Talk screen for No More Diets

Changing Self-Talk Screens


4 Samsung Galaxy S7 phones in gold showing the user interface for the Changing Self-Talk screen for No More Diets

Changing Self-Talk Screens


3 Samsung Galaxy S7 phones in gold showing the user interface for the Changing Self-Talk screen for No More Diets

Changing Self-Talk Screens


4 Samsung Galaxy S7 phones in gold showing the user interface for the Quotes screen for No More Diets

Quotes Screen

Design & Copyright Info

  • Tools: Adobe Illustrator CC

Views

19 views
Loading Facebook Comments ...
Loading Disqus Comments ...