No More Diets App UI
Android Material Design User Interface
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.
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.”
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.
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.
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.
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.
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.
Design & Copyright Info
- Tools: Adobe Illustrator CC