Overview

For this project we worked with a social media influencer who has a line of weight loss supplements called Body Complete Rx. She has a vibrant and engaged Instagram community, which she has helped to cultivate through weight loss challenges. Our goal was to design a platform on which the client could publish content, healthy recipes, and challenges, while providing users a dedicated space to track their weight loss, participate in challenges, and earn rewards.

Onboarding

As users launch the app they'll first see a landing page prompting them to get started. They would then go through a series of screens where they would input body measurements, current weight, and target weight, before being prompted to create an account. For these screens we opted to use a bottom screen to allow for greater reachability, as well as pictures/videos to be displayed demonstrating the proper method of taking each measurement.

Diary

When we first started work on the design for Body RX, we were given user stories that required a content feed, as well as a daily checklist for users to track their body measurements, food intake, and photographs of their weight loss progression.  Originally we designed for the feed and tracking to be in separate tabs, however late in the design process the client requested that exercise videos be added to the app, so we decided to roll the content feed and daily tracking together. This is also where user profiles and historical data can be found.

‍

I wanted to make the design easy to implement, and flexible enough for my client to add fields in the future. Using nested symbols in Sketch, I created a reusable cell consisting of an icon, a label, and action button that was used for both daily to do items, as well as actions in the profile settings.

Rewards

In designing the product cards I referenced the images used on the BodyRX website and found that there were multiple styles of images at different ratios. I wanted to make sure that the cards would be flexible enough to accommodate for various dimensions. Initially I chose a card style similar to that of reddit, with a filled image and a background blur. But when I started pulling images from the website I found that the types of images used were inconsistent — some being full images and others being isolated product shots with no backgrounds — which drastically impacted the visuals of the cards. Next, I tried to replicate some of the imagery I found on the website, but I noted that each of those elements would require a custom design and would be more difficult for the client to manage independently.

Ultimately I decided to go with a masonry style, allowing each card to display the full image regardless of aspect ratio, with the added benefit of holding more content on a single screen so users wouldn’t have to continuously scroll.

‍

Body RX is currently under development by the team at Mobile App Hero.