Problem
Our client’s smoking-cessation website had very low engagement and retention despite having daily trackable activities and content for registered users. Also, due to business requirements, the database had to be removed, so accounts would no longer exist. Our challenge was to create a site that increased engagement despite no longer having activities or membership to retain users.
My role
I led the UX and UI design and partnered with various teammates on content strategy. The team included the client, lead engagement strategist, developers, copywriter, and lead account executive.
Process
Starting with research
In order for our team to create an informed content strategy across the three quit-smoking phases, I poured through the site’s quantitative data with the lead engagement strategist to determine site traffic, user behavior, and engagement with KPIs. Since the account database would no longer exist, we also audited all of the trackable activities metrics to learn how people were using them and which ones should be converted to articles and preserved on the site.
We learned which pages and sections of content were important to keep, modify, or remove, and how they fit best on the homepage and subpages to support multiple user journeys. For example, an infographic about creating a smoke-free house had poor visitation, but sparked a discussion about where people actually are triggered (on the way to work, out with friends on the weekend, etc.) and we found existing content that could be broadened to address these situations. No one used a tool for tracking daily cigarettes despite it being heavily promoted on the site, so we removed it. Content about “cravings” was a dud, but “urges” was a strong keyword in SEO, so we updated the content and a page that focuses on that subject receives good traffic.
Guided by this data, we conducted card sorting exercises with our clients to determine how user engagement with existing content could be melded with their business needs to inform the content strategy and information architecture across the website.
Architecture
I sketched two layouts and version A, which uses an isotopic (Pinterest) grid, was the clear winner among the internal and client teams. I also validated the sketches with 6 smokers and they shared the same opinion almost unanimously and for the same reasons - it lets you see everything at once but is easy to filter out anything irrelevent.
I concepted the isotopic grid layout as a way to encourage browsing through the affordance of lazy-loaded article cards peeking from the browser bottom. To further encourage browsing, I partnered w/ the visual designers to implement a series of static and animated graphics that would bring the content to life.
The prototype here shows the wireframes in action. It’s a very simple and efficient experience, where users can navigate to any of the 33 articles on the site with one click and return with just one more. The article cards include a number, which coordinates with the filter, to show which step in the quit journey the content is for. I only designed 3 article page templates, which were versatile enough to handle all of our content.
I also included a global search bar, which includes results that can be filtered using the same filter pattern from the homepage. I worked with the developers and copywriter to match terms and map all of the content so that the search would have accurate, efficient, and robust results.
I used micro-interactions and transitions throughout the experience to give it a modern, app-like feel, appropriate for our overwhelmingly mobile audience.
Another way to drive engagement is with the “Your GetQuit Check-In” module. This provides a fun, animated, and chronological way of discovering relevant content. We concepted this module in a remote whiteboard session as a team, basing the content requirements on our content audit.
Despite not being able to track user activity through accounts, we devised a way to show users which articles they had visited by using cookies and applying an icon to those article modules.
Layouts
Finally, I gave the website a new, fresh, modern visual redesign using the primary and secondary brand colors, typography, and by creating custom illustrations. The illustrations were important to give the site a fun and uplifting tone, and we partnered with our digital production team to animate some of them (just for fun, and to help guide users down the isotopic grid homepage).
Outcomes & Results
Our lead client’s quote in reaction to the site is that it would “put this website in Pfizer’s hall of fame.” The feedback was universally very positive. Part of the business reason for the website redesign was to create something that would require only the most minimal budget going forward, not including optimization, so unfortunately we’re not continuing to work on it. However, the metrics we’ve seen show a positive impact, including increased time on site, page views, and unique visits.