Menu

Soy for Life

Project Overview

Soy for Life want to raise awareness about Soy and it's health benefits. The current website lacked structure, content and basic userflow. Despite a limited budget, the team at Soy for Life wanted to decrease the bounce rate and improve page views. With the current bounce rate on the homepage over 80%, the primary goal was getting users to stay.

Original Version of the Soy for Life website.
Post-It Notes that are strategically laid out. Post-It Notes that are strategically laid out. Post-It Notes that are strategically laid out.

Research

To better understand why the bounce rate was so high, usability testing got done. The goal was to understand what users first impressions were. The testing revealed that the site looked dated, lacked content, was difficult to find information and didn't feel trusting. Not a single user was able to identify Soy for Life as a leader in the industry.

Site Analysis got used to build an understanding of where users were navigating to on the site. Video Tracking and Heat Maps revealed what users were trying to achieve when they arrived on the site. It turned out that Users have interest in finding products and recipes.

Card Sorting got done with the current site's navigation. Using Post-It notes, tests got run to determine if the menu structures made sense. Participants grouped the pages in a way that easiest for them to understand. Reoccurring themes developed almost immediately.

With no competitors from the Soy industry in Canada, other food industries got reviewed. The reviews revealed how other organizations handled awareness of their products and health benefits.

Based on the research a heuristic evaluation got created. It outlined:

  • User frustrations.
  • Lack of a predictable User Flow.
  • A lack of trust from the user.
  • How User Friendly the site appeared.
  • Potential solutions.

Paper

The limited budget meant finding a unique way to map out a sitemap and build wireframes. The solution? Post-It Notes and Cue Cards. With a sharpie in hand, Post-It notes became the sitemap. This allowed for a easy understanding of all the content available and where it belonged. In meetings, the Post-It Notes made it easy to change pages or add specific instructions.

The first round of wireframes relied on cue cards. Each section of the new home page would receive it's own card with an explanation of the block. This made presenting to internal teams easier as tweaks got done on paper rather than a screen. This accelerated the approval process as each meeting would result in sign off. Paper made it easy to brief in new people on the project by providing an interactive experience.

Cuecards used to display the site's sitemap. Picture of Document used to display the site's final sitemap.
Cuecards of the Soy for Life Paper Prototype.

Workshop

With the wireframes approved, the next step was a workshop with the client. We reviewed the personas that had gotten developed earlier, confirming the demographics hadn't changed.

The sitemap got revealed which resulted in a healthy conversation. The client wanted to understand why certain pages got grouped together. As the theory got explained, the sitemap became finalized.

The wireframe got presented next resulting in more back and fourth. The cue cards were the perfect tool to communicate the new design. The client could add notes , create their own sections and remove other sections. A final approve on the wireframes also occurred during the workshop.

Prototype

A Prototype got built to test the new home page structure. Using UXPin, an interactive prototype got created based on the approved wireframes. The current site design got used as a base template. The template made the entire experience feel consistent.

Usability Testing was then used on the prototype. This was to verify that the proposed changes would improve the user's experience. The new results were significantly more positive. This final validation gave confidence to moving into creative.

Laptop featuring the Soy for Life Prototype.
Code being viewed on an iMac

Development

The original site had gotten built with Wordpress, HTML and CSS. This meant that the same tools needed to get applied for the revisions on the site. Wordpress Custom Fields got used to create the new fields that became needed for the template.

With a new backend structure, PHP and MySQL got used to integrate the changes with the new template.

Project Results

With the site nearly ready for launch, the full results aren't known yet. Soy for Life is happy and confident that the new changes will keep users on the page. Usability Testing has yielded positive comments. The tests signal that it's become easier to find content and navigate the website.

Final version of the new layout and structure.