Provata Health

Provata Health is a revolutionary health & wellness company built by international award winning physicians & scientists specializing in health promotion & behavior change science. Provata health is revolutionizing workplace wellness by uniting their “Healthy Team Healthy U” program—the culmination of 25 years of clinical trials in health promotion and behavior change science with innovative digital technologies.

Project Summary

Client: Provata Health, United States
Project: Provata Health Marketing Web Site (Static)
Project date: Summer 2015
Project duration: 4 weeks
Project URL: https://provatahealth.com
Services: Front-End Development
Responsibilities: Building a fast and responsive marketing Web site for the startup, with strong focus on art-directed animations to reflect the uplifting spirit of the company
Technologies used: HTML5, SVG, CSS, JavaScript
Libraries/Frameworks: jQuery (custom build), GreenSock Animation Platform (GSAP)
Screenshot of the Provata Health marketing web site homepage
The Provata Health Web site homepage.

Background

In March 2015, Alex Goldberg, Provata Health CEO, got in touch with me regarding building a marketing Web site for his startup. At that time, Alex was already determined to hire me for this job because he saw me as a perfect fit for it. (<3)

We jumped on a Skype call for the first time a few weeks after his initial e-mail because I had been touring the world at that time, giving talks at conferences. Alex was happy to wait for me to settle back before we started working on the Web site.

Right from the start, we established a strong sense of direction as to what Provata wanted from the marketing Web site and what impression they wanted to give their prospect users and clients visiting their Web site for the first time. There was a strong emphasis on creating playful but not exaggerated animations, that reflected the uplifting spirit of the company and its positivity and goals.

Alex had a vague idea of how he wanted the pages to “move” to reflect that. He entrusted me to communicate his ideas by animating the illustrations that are provided on the site. But just like the illustrations serve a visual purpose, we needed to make sure the animations did the same, and that each animation was suitable for the illustration it is applied to.

Content First

The Web site needed to be finished as soon as possible, including providing a time frame for testing and Q&A. Provata’s content strategy team had already provided the content for the Web site, which drove the design, which eventually drove the development process. Starting content-first was one of the most important points of srength during the entire development process. We had real content to work with, which meant that the design catered for that content, not for some placeholder Lipsum text. I found this particularly great. Starting content-first is one of the most important steps in creating successful designs.

Process & Communication

Alex was my main contact during the entire development process. He kept direct tabs on every step of the development and design and gave direct feedback. I provided him with one or two weekly live testing sessions where he got to experience the live Web site during every phase.

All main project communications took place in a Slack channel dedicated to the Provata internal team. I was invited to that channel, and that’s where I discussed the design and requested any necessary design assets from their designers. Design assets were sent to me in the channel. We also had a shared Dropbox folder where we placed all the design assets as well as the source code I worked on.

More advanced, UX-specific discussions as well as the results of Provata’s internal Q&A sessions used to happen over Skype. Sometimes minor content changes were made; other times minor design tweaks were made—all based on the results of the initial tests made on the design.

Time Zones

...can be difficult to work with, but definitely not impossible. Given my flexible time as a freelancer, I am usually able to shift my working hours to accommodate to any resulting time differences. When my clients are based in the US, for example, I shift my working hours so that I am available at times that work for both myself and for my client: later in my afternoon coincides with the beginning of the work day in most American states, which makes it possible to have a few hours every day to work with my client’s team to get work done in great sync. Of course, I’d get more work done during the rest of the day as well, and so I always had updates to share them with the team and to discuss.

Testimonials

At Provata, we focus on creating dynamic, interactive, and engaging digital health experiences. So we wanted our marketing website to reflect that. Sara expertly incorporated SVG techniques to deliver a final product beyond our expectations. She is an incredibly knowledgeable and diligent developer. She captured the spirit of our company brilliantly. Anyone would be fortunate to work with her.

Photo of Alex Goldberg

Alex Goldberg

CEO Provata Health

http://provatahealth.com

A Few Technical Details

Animated SVG Illustrations

Possibly most of the focus of the site on the technical level revolved around SVG and SVG animations. The marketing Web site contains quite a lot of SVG illustrations, and animating them was the main focus of the interactivity on the site.

I used the GreenSock Animation Platform (also known as GSAP) to animate the contents of the SVG images. The animations are triggered on scroll.

In order to access and animate the contents of the SVG images all the while keeping the HTML content clean and uncluttered, I embedded the illustrations using the <object> element. object elements allow you to access the contents of the SVG DOM using JavaScript from the main page, and that’s what I needed to be able to animate the illustrations.

SVG Infographic with Text Fallback

The object element is the perfect way to embed an SVG infographic. Ideally, the contents of the infographic would be readable by both visual and non-visual readers as well as by assistive technologies; that is, the text better be searchable, selectable and accessible. By preserving the text inside the SVG using the SVG text element, I made sure the text remains as such: searchable, selectable and accessible.

Where SVG is not supported, providing the data/content of the infographic as text would also be ideal. Luckily, the object element allows us to provide any kind of fallback we want. So, if a browser does not support SVG, the browser will display whatever we give it between the opening and closing object tag. I requested the content of the infographic to be sent to be as an actual text file, and provided the text content as the fallback. That way, if the SVG fails to load for any reason, the user would still be presented with the contents of the infographic as plain text. Perfect!

<object id="graphic" data="img/svg/results-graphic-mobile-accessible.svg" type="image/svg+xml">
	<div class="object-fallback">
		<h1>Healthy Workplace. Healthy Body. Healthy Mind.</h1>
		<!-- ... -->
	</div>
</object>

When the viewport is small, the text inside the infographic becomes easily unreadable, so the graphic had to be switched to show the minimal version on smaller screens.

Using JavaScript, we can art-direct the SVG to show the proper version of the infographic based on available screen estate, by switching the source in the data attribute on the object.

<!-- load the appropriate SVG in the above `object` based on viewport size -->
<script>
    var graphic = document.getElementById('graphic');

    function changeSource(){
        var url = graphic.getAttribute('data');

        if (Modernizr.mq('(max-width: 767px)')) {
            if(url == "img/svg/results-graphic-mobile-accessible.svg") return;
            else {
                graphic.setAttribute('data', 'img/svg/results-graphic-mobile-accessible.svg');
                sources.style.display= "none";
            }
        }
        else {
            if(url == "img/svg/results-graphic-desktop-accessible.svg") return;
            else {
                graphic.setAttribute('data', 'img/svg/results-graphic-desktop-accessible.svg');
                sources.style.display= "block";
            }
        }
    }
    changeSource();
    window.addEventListener('resize', changeSource, false);
</script>

Unlike the new <picture> element, the object element does not allow us to provide multiple image source files to display depending on varying contexts. This is why we currently still need javaScript to make the switch. If you’re interested in learning more about this subject, I’ve written a more detailed article about the whys and hows of art-directing SVGs embedded using object that you can check out here.

Like what you read and think your next project could benefit from my skill set? Get in touch. Let’s build something great together! Hire me