Vivo Class Website

Web Design & Development

The Problem

Our current Vivo Class site had become outdated and needed re-designing in order to help market the new product and generate sales leads. This would also be used as an area for current subscribers to login.

The Process

I started this project off by separating the content and laying it out on paper. I wanted to quickly experiment with wireframes to test site maps and layouts, in order to eliminate any unnecessary content and find a structure that made all the information more digestible.

With the product almost due for a soft launch, the project had a very limited time window. We decided to use an existing website framework to avoid additional pressure on our development team. The plan was to launch the site quickly and make further iterations in response to user activity and feedback.

The website framework, Slides, used animated panels to present the content and worked well with my proposed structure.

In order to create a more suitable experience for our users, I spent some time testing the restraints of the framework so as to push the default style of the template. For example; some default mobile styles were not user friendly and we needed to move towards something more accessible and visually engaging.

I used paper prototyping to demonstrate the user journey. I then developed this into several iterations of working prototypes which helped us to finally settle on an MVP.

Most of the website content worked well with the slides animations, however the deeper levels of the feature pages required a bespoke structure, due to the more intricate content. I chose to use larger images and more spacing on a fixed page to help create something more simplistic and concise.

The Outcome

The website launched late January 2016. In the run up to launch we encountered a problem integrating Slides with our older products’ online framework, which meant I needed a developer to change the code to make it more compatible. After these modifications, I found that the responsive mobile states offered incredibly varied experiences. The scrolling, interactions, slide transitions and sidebar had become disabled, which made the site difficult to navigate.

These changes also affected certain aspects of the design, and I was required to make several typographic changes to key areas of the site to improve legibility. We managed to fix the high priority navigational issues and are presently working on fixes for the less problematic issues in the mobile experience.

After launch we encountered a user experience issue that was causing an overwhelming number of email leads to flood in. Our marketing team reported that 95% of them were already existing customers.

Users were mistaking the ‘Get Started’ button for a quick login; I felt the language was misleading and should have indicated that the form is for signing up for more information. We have since decided to update the copy and try out some alternatives and test to see which works most efficiently.