Body Case Study

Back To My Body Case Study

Project Summary

Every meal, every workout, every moment made for you. Diet and exercise plans made for post-natal mums. Back To My Body came to us to help them essentially finish off their product with us overlooking their researched and tested prototype for our advice and views and then to add user interface design to their product using all their personas and research/data they collected prior.

Brief

Problem

BTMB(Back To My Body) already designed a wireframe prototype that wasn’t working to their intentions and they received heavy feedback from users. Their user flows weren’t seamless, heavy route from their landing page to dashboard homepage. Also they really had no proper user on board, it was just a sign up button and a few questions before having creating an account and landing on the dashboard for the first time. We had to add visual design to their product. Creating clean UI which would be relatable and comprehensible for women from the ages of 25–40. BTMB didn’t also have a brand as such, which we had to create as well.

Process

Research/Audit

Firstly, we looked through their research and data they collected regarding specific points highlighted on their landing page which they wanted to target from their user stories and personas. After consuming the information we needed, we had that in mind when auditing their wireframe prototype they completed.

Onboarding

We noticed that their onboarding wasn’t working, as it wasn’t telling the user about the product, difficult way of selecting a plan, user payment information and setting proper goals. One other problem was as soon as the user pressed ‘Sign Up’, they were presented a plan/pricing to choose straight away(even tho there was a trial period). We felt this was too forward and having the user enter their details first seemed more ‘getting to know the user’ rather than ‘asking for money’ on the first transaction so to speak.

Another issue was the onboarding page had too many questions on the one page and would scroll which is considered bad usability due to, too many questions and input fields on the one page.

These were the exact problems we had to rectify, so we started there first. We weren’t able to condense their onboarding as we needed to add these features as they were too critical.

Landing Page

Their landing page was a little too focused on CTA’s and trying to implement their goal of users signing up to their platform where they forgot to actually talk about the important ‘W’s. Who they are and Why they are doing this. We helped structure their landing page to platform in 3 sections to tell users about their product. We also proposed to add a feature list of the benefits of what the user you would receive in a small and concise manner with fitting icons. Another idea was to add a few video testimonials as they already had a few mums giving good reviews. Using those reviews in a personable and relatable manner would connect the user more in trusting the product and therefore onboard. Pulling these videos in from Facebook helped the sharing component as well for their marketing plan.

Dashboard

They didn’t have a dashboard as such rather than 2 tabs/pages that had all the information/graphs/inputs/meal plans on these two pages. For us, it was an easy fix, design a proper dashboard environment. We essentially split up the pages/tabs into 5:

  • Diary(Containing Meal Plans and Exercises)
  • Shopping Lists
  • Your Progress (tracking their goals)
  • Your Profile
  • Settings (account mainly)

Essentially the 2 main features of the whole product was showing meal plans and exercises, so we focused most of our mental energy and thinking around these two which would live in the Diary tab. We opted to use cards with a header image for each meal as it’s a better visual and shows condensed but important information like calories, time and the three options ‘Like, Love, Avoid’. The Like, Love, Avoid system is simple. The user clicks Like and the meal will be kept in the system and show again at a later date, the user clicks Love and the meal will show more often and the user clicks Avoid and the meal will never appear again. So adding a little customisation for different meals.

Each card was clickable and more information about that meal would appear for eg. instructions, ingredients, prep time and nutritional information regarding the users levels. The exercise tab would show the exercise title name, how long the exercise should be done for, reps and an instructional image (which the client had created) all again in a card design style to keep it consistent. But we had to make the exercise card look unclickable with only showing the information and image provided on the card. Within these sections we added a calendar tab to progress to previous or past days to see what your meals/exercise were ahead or had been completed.

The other tabs contained goals and progression graphs to track how well or how behind you were. If you were meeting your intended goals or falling behind. Your profile section is where you can change your goals of maintaining/losing weight, personal information etc. Shopping List tab is where you can tick off all the groceries/ingredients you needed for the meals that week(Also able to print as a PDF). Settings tab to change account information, switch plans and change profile picture etc.

Click here to see our initial full wireframe prototype that we tested

Brand/UI

Creating the user interface for the product had to be very clean but attractive for mums to engage with the product and brand. From testing and research we had conducted in the early stages we found that most mums were reacting to more light purples and richer pinks with soft typefaces. Imagery was chosen to show mums being active with their child to show that exercise can be done with your child present with you.

We chose typefaces that were from google.fonts that had thin strokes and serifs for legibility to show a more serious nature but in a less formal way. Using whites/silver/greys and very light blues were used as backgrounds and white space to give the forefront content more perspective and easier to consume. We created icons for the tabs which were colourful for the touch of playfulness and lively feel. We also wanted to add colour to all graphical data and charts and design them in a way where it was easily consumed and alive.

Designing the logo was more of a side matter as it wasn’t part of the budget and scope but it obviously had to be done. We implemented the created style and strategy from the visual UI towards the logo. Soft thin typeface with a rich pink icon that could be used on it’s own throughout the product. The icon had already been designed which was a heart within a lotus flower which we had to use.

We tested the landing page with the strategy we created and got feedback that full size imagery of active mums was working better within the header section with left aligned headline and CTA rather than having a filled navbar and the headline/CTA being centred. After testing the landing page designs and completed all the skins for pricing page/contact etc. we went onto designing the dashboard. We designed the cards to revolve around the delicious imagery and icons with legible space for the titles. Basically followed the common form and methodology of a dashboard design as some BTMB users may not have been exposed to a traditional dashboard environment. Keeping it clean and minimal won’t get in the way of graphic and informational data that could distract the user and make things clutty.

Interaction

When designing these interactions within the dashboard, again had to be minimal and have that subtle effect. Cards would pop and the icons would animate when clicked. Data would slowly appear and transition. Nothing too heavy and cool, just basic interactions.

Tools Used

TypeForm to ask the audience vital information.

Invision to grab and collect inspiration and fitting examples, prototype/client feedback/user feedback

Pen and Paper to for quick rapid wireframes getting them out of our head and seeing if they could potentially work.

Sketch to design wireframes and all the user interface artboards.

Invision to prototype/client feedback/user feedback.

Principle to create animations and micro-interactions for the UI.

Mixpanel for A/B Testing and tracking results.

Zeplin for the developer handover.

Active Campaign for email marketing, sales and CRM.

Results

BTMB is currently being developed but their marketing landing page and email campaigns are running and they have accumulated over 4,000 email subscribers/sign ups in the first month of their landing page going live before they launch their product. BTMB has seen success from the data driven landing page design we suggested and are very confident the dashboard designs would create user satisfaction, help user goals and reduce problems that they might run into.

*Note We will update this result section once the full development has been finished and we start monetizing results.

Visual Arts Research

Description:Visual Arts Research provides a forum for historical, critical, cultural, psychological, educational and conceptual research in visual arts and aesthetic education. Unusual in its length and breadth, VAR typically publishes 9-12 scholarly papers per issue and remains committed to its original mission to provide a venue for both longstanding research questions and traditions alongside emerging interests and methodologies.

Coverage: 1982-2017 ([Vol.] 8, No. 2 - Vol. 43, No. 2)

Moving Wall: 3 years (What is the moving wall?)

The "moving wall" represents the time period between the last issue available in JSTOR and the most recently published issue of a journal. Moving walls are generally represented in years. In rare instances, a publisher has elected to have a "zero" moving wall, so their current issues are available in JSTOR shortly after publication.
Note: In calculating the moving wall, the current year is not counted.
For example, if the current year is 2008 and a journal has a 5 year moving wall, articles from the year 2002 are available.

Terms Related to the Moving Wall
Fixed walls: Journals with no new volumes being added to the archive.
Absorbed: Journals that are combined with another title.
Complete: Journals that are no longer published or that have been combined with another title.

ISSN: 07360770

EISSN: 21518009

Subjects: Education, Social Sciences, Art & Art History, Arts

Collections: Arts & Sciences VIII Collection

0 thoughts on “Body Case Study

Leave a Reply

Your email address will not be published. Required fields are marked *