Institute for Integrative Nutrition

UX Design of customizable websites for Health Coaches who graduate from the Institute for Integrative Nutrition

cyberknitics

As a Freelance UX Designer at the Institute For Integrative Nutrition (IIN), I worked on developing templates for websites given to Health Coaches alumni. This was a complete overhaul of existing websites that required a full content audit and rebuild.

User Research —

I started my user research by interviewing Health Coaches who relied on the existing templates. They generally noted that the outdated feel of the websites made it more difficult to attract business. Many sites suffered from sprawling, disorganized pages and mismatched styles. I made a list of site features and asked the coaches which ones they used regularly and which ones they had ignored or disabled. I asked about outside services they used for their businesses to inform what potential utilities we might add, such as scheduling and managing a newsletter.

I also worked with business developers and educators at IIN to prioritize business goals and optimize content. The overall objective was to provide a customizable website that was ready to go live within just a few minutes. It should come preloaded with content and images that align with the IIN philosophy, so that the coach can simply add their name to get started.

Site Architecture and Wireframing —

Working alongside the business development team gave us insight into how to bake the marketing strategy directly into the site architecture. For example, we developed a user flow around the contact form to optimize conversion of visitors into customers.

user flow

One unique challenge of this project was developing a cohesive website design with dynamic content that is also fully responsive. This meant creating a strong structure, and just enough constraints to maintain business goals and accessibility, while allowing for personalization.

user flow

I created a modular system for wireframing to show default states and addable sections. Each wireframe contains a legend in the top left corner to depict where it sits within the site architecture.

user flow

During this process we also created wireframes in the form of storyboards to illustrate user flows.

user flow

Customizable Visual Design —

Once the structure of the site was in place, we wanted to develop a system for the user to edit the visual design of the website. For example, instead of the user controlling every style on the site, they could pick a color palette. We also created a system for typography “skins”, where the user can select a set of pre-paired fonts that would populate all the font styles on the website.

user flow user flow user flow user flow

Finally, to communicate the design to the development team, I created a series of visual style guides instead of mockups. This allowed us to account for differences in content without needing the pre-existing content.

user flow