logo

Mango Health Custom Responsive Website

  • Mango 1
  • Mango 2
  • Mango 3
  • Mango 4
  • Mango 1
  • Mango 2
  • Mango 3
  • Mango 4

Background

Mango Health is a team of designers, technologists, and clinicians with a passion for helping people lead healthier lives. Their products include apps for iOS and Android that help users build good habits around daily health regimens.

Mango Health is based in San Francisco, and is funded by respected VCs including Kleiner Perkins, First Round Capital and Baseline Ventures. Their apps have been featured in top publications including the LA Times, SELF and Fast Company.

Shortly after working with a third party designer to create a look for their UI, Mango Health engaged Flower Press Creative Studio, LLC to handle final design and development work for their marketing website.

The Problem

“Our first-generation website no longer represents our App effectively. We need a new modern, responsive site with compelling graphics and imagery to get people excited about our App.”— CEO, Mango Health

The Solution

MangoHealth.com is fully responsive marketing website that and uses color blocking and soft-focus background images to create depth and texture. It includes easy-to-read summaries of features and functionality, custom slideshows and interactive elements to demonstrate Mango Health’s App.

mango-001

Process & Research Methods

Visual Design

Early concept screens for MangoHealth.com were created by a third party design firm, the same firm responsible for designing the Mango Health App. Mango Health engaged Flower Press Creative Studio to convert the concept screens to a working, responsive site.

Concept screens were prepared for different viewports, but we needed to extend them for desktop, tablet and mobile to include all pages required for development.

mango-002 mango-003

Stakeholder Interviews

Marketing, brand positioning and content strategy were figured out before our involvement in MangoHealth.com. So, our primary research method for completion of the site were ongoing stakeholder interviews. With each design iteration we gathered feedback from a group of five internal stakeholders through video conference meetings and walk throughs. This was handled in a group setting or one-on-one as scheduling allowed. The project went through four rounds of design before the final page list was complete.

Key Takeaways:
  1. The new website was modern, clean and well-presented
  2. Selling points and benefits were clear
  3. Photography and copy was on-brand

Build & Launch

MangoHealth.com was built using custom responsive HTML/CSS. The site uses HTML5 with Bourbon/Bitters/Neat mixins and GruntJS. Pages include multiple media queries, breakpoints and image conversions for different screens. Slideshows on the homepage and about us page are custom written in Javascript. Interactions for the slideshows were tricky to achieve, but the overall effect is memorable. The Mango site uses a build system created in Python which generates a static version of the site for quicker load times.

Results

The Mango Health App has a 4.5 star rating and over 4500 reviews in the App Store, and a 4.5 star rating and over 10,000 votes in the Google Play store. After launch of their marketing site in 2015, Mango Health saw an increase in downloads and improved use of new in-App features.

“The new site is much more representitive of our business and has increased the strength of our online community.” — CEO, Mango Health

Project Credits – Visual Design: Khaiersta English, UI Development: Eric Baldoni, Back-End Development: Matt Rabe, Eugene Iaroslavtsev, Project Management: Khaiersta English