UX Design of customizable websites for Health Coaches who graduate from the Institute for Integrative Nutrition
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.
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.
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.
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.
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.
During this process we also created wireframes in the form of storyboards to illustrate user flows.
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.
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.