The HealthSparq.com redesign was a fairly large UX, design, and programming effort over the span of about 10 weeks. I built it to support the goals of the internal marketing team (who would ultimately be using it often) and to align with a new brand redesign initiative that was underway.
I wrote up a more complete story of this project on the HealthSparq UX blog, and some insights on content strategy and tools here ("Building a Better Content Workflow").
Roles
User Experience Design: information architecture, user flows and paths, content modeling and workflow.
Visual Design: as there was a new brand initiative happening at the same time, I took the agency's visuals and created a wholistic solution: custom "content blocks" that allow great editorial freedom and flexibility, while retaining maxiumum control by the designer. This worked great on mobile as well as providing for bold visual design.
Back-end development: custom development on the wonderful Statamic CMS, leveraging their new "Replicator" feature to support the "content blocks" concept. I also set up the server inititally, and started a git workflow for involving other designers.
Front-end development: a heavily customized Foundation front-end stack served as a starting point. I leveraged Jade for templating in spots, and used Grunt for compiling. Scott Vandehey helped greatly in the last few weeks crushing bugs and detailing out the mobile navigation.
Planning
Our initial user flow and site map combo diagram.
Training
A visual "explainer" for the marketing team to help communicate some of their options regarding content blocks. It's a very different way of building a site and thinking about content; I was inspired by Medium's flexible content UI.
Documentation sample. I assume editorial users don't know anything about HTML, and try to limit their options as much as possible. The content blocks concept addresses this to a large degree, but there is still a need for inline content training.
I try to build training into everything I do when designing systems.
You can see the live site at healthsparq.com, and don't miss the "backstory" blog posts that dive deeper into the project process and planning.
