A product’s support hub should be useful and well designed.
A poor support experience unquestionably affects the integrity of the brand and the likelihood of conversion.
THE PROBLEM
Millions of users flow into the TurboTax support space from a third party search engine (ie Google) into a post or article, and then right back out again — presenting a missed opportunity for deeper engagement and (eventually) conversion.
Search Engine
Search Results
TurboTax Support Site
Back to Search Engine
Design Hypothesis
If the support space were to be transformed from a passive library of clunky tax articles (to be quickly browsed and discarded) into a smart, engaging, reliable tool with an intuitive interface delivering a pleasurable experience users will invest in developing a relationship with it, and thus be more inclined to convert overall.
RESEARCH
Data shows that websites are more often accessed via mobile devices than stationary (desktop). And yet my research showed that nearly all support websites, when viewed in mobile, are simply condensed versions of the stationary layout. Therefore I focused my design strategy on mobile apps instead. App design is thought of as a separate field than web design, however it is rich with long-solved design solutions for the small, vertical screen.
MOBILE SUPPORT SITES
MOBILE APPS
DESIGN AUDIT
Overall, the common elements on the page aren’t being grouped together. The eye doesn’t know where to go intuitively. The page is visually noisy and generating fatigue. However, the page is suffering also from a greater overarching problem — a battle between the site’s overt function (to answer questions) and its covert function (to convert users).
BEFORE
HEAVY DIVIDER is unnecessary
BREADCRUMBS are just visual noise, could be made more practical
TITLE is being forced to yell to compete with the severe lines, corners, and strong contrasty elements
CONTENTS could be leveraging visual cues to orient the user
KEY TAKEAWAYS module must introduce another set of visual elements just to stand out on the page
MOBILE
CONTENT TEXT is dense and doesn’t utilize any interaction design strategies or elements to make the information easier to digest
STATIONARY
BEFORE
HEAVY DIVIDER is unnecessary
BREADCRUMBS are just visual noise, could be made more practical
TITLE is being forced to yell to compete with the severe lines, corners, and strong contrasty elements
CONTENTS could be leveraging visual cues to orient the user
SIGN IN WIDGET is scattered and clunky
LARGE PHOTO is working against clarity
ADS design just adding to the visual noise
KEY TAKEAWAYS module must introduce another set of visual elements just to stand out on the page
CONTENT TEXT is dense and doesn’t utilize any interaction design strategies or elements to make the information easier to digest
Overall, the common elements on the page aren’t being grouped together. The eye doesn’t know where to go intuitively. The page is visually noisy and generating fatigue. However, the page is suffering also from a greater overarching problem — a battle between the site’s overt function (to answer questions) and its covert function (to convert users).
DESIGN AUDIT
BEFORE
AFTER
THE REDESIGN
MOBILE
I resolved conflict by defining the page’s primary objective as ‘answering the visitor’s question first, fast, factually and without interference.’ This forced the conversion strategy to take a more passive or “soft sell” approach by utilizing incremental conversion techniques, like using the new optimized and pleasing experience to demonstrate brand and product, then offering benefit for deeper engagement.
STATIONARY
AFTER
ELEVATED BEVEL HEADER delineates the main TurboTax (marketing) menu functions allowing the support space to exist secondarily below
BREADCRUMBS collapsed and made purposeful with clickable expanding link
ICONOGRAPHICAL visual assistance harnessing left brain function
ILLUSTRATION injects color, joy, and context without requiring much space
SIGN IN WIDGET cleaned up, softened and raised in elevation as well
ADS given their own unique visual language
KEY TAKEAWAYS can now stand out subtly while maintaining airiness
SECTIONS are cued visually without heavy type and made interactive.
STATIONARY | SIDE BY SIDE
BEFORE
AFTER
