Reimagining Community Support
An unbranded mobile-first website aimed to provide a platform for community conversations, as well as information and resources about the stages of lung cancer. This was a very exciting project that required a complete toolkit of experience: research, planning, testing, designing, and collaborating.
A Site Map That Drives Interaction
The updated sitemap improved upon the old site’s singular focus on the members actual stories. The goal was to re-write, and re-order, the content so that most of the articles were coming from a voice of someone with cancer. This offered an opportunity to take a user on a journey through science-focused content, to a lighter lifestyle article, or back to a page featuring someone’s specific story. The site could now present even more information, while keeping a community focused voice.
Like many content creation projects, articles are organized my date, author or popularity. However, with this site, there was not going to be a constant flow of new content — the one time launch is the whole site. This meant that we had to organize user flows that simulated a wide range of articles that keep the site feeling like a dynamic experience.
This was achieved with a carefully constructed linking strategy. Right rail and footer modules would provide site-wide access, essentially making the main header navigation a secondary tool.
Positivity. Life. Hope. These are the main emotional connections that will result in a user feeling that they are in the right place. Creating a bright color palette and a simple layout was a must. But the site needed something more to set it apart from the contemporary trends of bold color. Some of the patients where painting and creating art. Featuring these illustrations as an underlining motif helped give the site a soft, kind personality.
Build Kit & Interaction Designs
Creating a plethora of micro-interactions and tactile touch points makes an experience more engaging. However, it was vital to keep in mind that many of this site’s visitors have lung cancer. So there is a threshold for fancy interactions, where overdoing it feels inappropriate.
With users spending so much time on industry-leading products like Facebook, Instagram, Twitter, Google, and Apple, there is a subconscious expectation. Using these tech leaders as an influence, this site would now emulate what users see daily.
Production: The Rule of 12 Columns.
As it is often the norm, the development team was not in-house. Communication was restricted to weekly sprint check-ins with project managers. For the carefully crafted vision to be carried out in code, it was important to create a thorough hand off, with the details spelled out in the lexicon of a developer — not a designer.
Understanding the 12-column layouts is critical in scaleable, multi-screen design. Developers typically begin coding a website in single column. From this single column (mobile) layout, the site's modules expand into a multi column layout. The number 12 is divisible by 2, 3, and 4. This means that a 12-column layout has maximum flexibility, and can solve most design challenges.