Making Content Clear
Tarot.com IA and Navigability Proposal
With nearly fifteen years of history and millions of members, Tarot.com had become a maze to navigate. Lacking a clear hierarchy and any wayfinding elements, the site was confusing to work through even for employees who were exposed to it daily. If that was the case, then there was significant cause for concern on behalf of the site members and, particularly, visitors who had no experience with the intricacies of the large amount of content on-site.
A sitemap couldn't be found for either the long-standing desktop version of Tarot.com or its relatively more recent mobile alternate. Consequently, I first set about auditing the content to get a handle on just how much and what varieties of content was present and accessible on the site.
While the desktop site appeared organized at first, with content structured by modality (e.g. Astrology, Tarot, etc), that organization disappeared once you ventured past that first level. There were multiple secondary groups of content in each modality, often times with vague labels (e.g. Zodiac Central as the branded name for the pages about the various astrological signs) or no labels at all.
The latter hindered users from easily identifying the type of page they were on, such as constantly published article content versus standalone reference pages. Overly-general and short URLs (which can be a justifiable SEO method) meant that a user couldn't ID these pages based on address. Extremely similar page templates made it difficult to visually differentiate between the two. Lack of breadcrumbs or wayfinding elements ensured that a user couldn't look at a single reference point to find their location on the site.
Secondly, the articles brought to light another question of content hierarchy: where do they belong? Is Tarot.com a content publisher primarily, and do articles deserve a standalone, top-level landing page? Or, are articles secondary to user needs compared to the various content verticals and as such ought to be grouped under each of these categories separately?
The question of hierarchy and priority was to remain the complicated issue as the work on the proposal moved forward.
On the mobile side, more questions emerged, as the content appeared to be an ad-hoc collection of reference pages, mobile versions of our high-traffic desktop pages, promotional partner content, and links back to the desktop site. From an IA standpoint, one issue was the most glaring.
Entire swaths of content were live and indexed, but could not be navigated to on-site from the primary landing pages or using the global navigation. You had to know the URLs. These dark, hidden chunks of content ultimately represented some forty percent of the size of the mobile site.
At the time, mobile strategy and the nature of Tarot.com's mobile presence moving forward was in development by stakeholders, and the desktop site still represented the overwhelming majority of traffic and revenue. After the audit was completed and the sitemaps created, I chose to focus on making incremental improvements to the desktop site until project stakeholders came to a resolution on the mobile front.
Armed with an actual sitemap and list of bad UX suspicions, I formulated my plans for a rudimentary user test to vet those suspicions and reveal any problem spots I had missed. Any testing would have to be extremely cheap and not require any intensive software or hardware to setup, as stakeholders viewed user research and iterative testing with antipathy.
I ultimately chose an in-person, two-stage process with five people who did not have Tarot.com accounts and skewed towards the site's marketing demographics: two women in their thirties, one woman in her early fifties, and two twentysomethings - one man and one woman.
The process began with an unstructured user test to navigate around Tarot.com as they saw fit. I took notes and recorded the test via a tablet's built-in camera and microphone. While not an optimal solution, it would at least yield actionable information for almost no cost. After the user test, I conducted a card sort with the individuals using the site's existing navigational scheme as categories.
Several things became very clear. The usability tests revealed that not only were navigation and findability an issue, but the homepage of Tarot.com was a confounding roadblock in and of itself. Even the analytics bear that last point out: while naturally a high-traffic page, it has a significant bounce rate, and the majority of clicks are to the Today page (a primary navigation item and the highest trafficked page on the site).
The testing along with the card sorts showed that users primarily organized the site by divination modality (Astrology, Tarot, etc), and weren't certain what to expect with the Love and Wellness menu sections. The Fun and Games section, a legacy feature from a past aborted change in content strategy, similarly confused people - both in regards to brand expectations (“Do I have to pay for these?” and “Is this an online gaming site for tarot and astrology?”) and taxonomy (“What makes that different from the Readings and Reports?”).
From these results, the exact nature of my IA proposals took shape: create an evolutionary improvement in the site's masthead and content hierarchy to make navigating the site more efficient and then overhaul the homepage to better communicate Tarot.com's overall value proposition and introduce the many elements of the site.
Testing revealed that the eleven top-level navigation items were a problem (“Do I use Astrology, or Horoscopes, or Today?”), and the large number of links within them without any subheadings or structure was confusing. Crd sorting revealed further confusion, as content placed under both Readings & Reports and Fun & Games was often mixed up (in addition to previously mentioned usability issues), and the Love and Wellness headings proved to be a jumbled up red herring.
Early sketch wireframes explored a number of different ideas, but eventually the big redesigns were shelved in favor of a more evolutionary approach, both for the needs of the site's demographic and practical project scope - the site had recently undergone a very significant redesign. There simply wasn't going to be interest in anything radical.
One of my very early goals at Tarot.com was to introduce breadcrumbs and a site search (and the clear content hierarchy and controlled vocabulary to support them both, respectively). Now, there was an opportunity to introduce them both while at the same time markedly improve the usability of the existing global masthead's other elements.
Tying this all together was a consolidated primary navigation menu. Mega dropdowns with organized links and content were the goal, which would in turn reduce the number of top-level links by over 25%. Fun and Games would become a subheading under Readings and Reports. While I wanted to jettison the Love and Wellness links altogether, cooler heads prevailed, and they were brought under a single Lifestyle link. Along with Career content, Love and Wellness would now be subheadings in the larger mega dropdown.
While it can be argued, due to the breadth and depth of its content and the nuanced ways that content interacts with itself, that Tarot.com can never be a simple site, my goal nonetheless was to simplify and clarify wherever possible.
This can be seen in the topmost user navigation bar. Previously, the nav bar always showed the full compliment of user-related content, regardless of logged-in status. Logged-out visitors were redirected to a sign up prompt when they clicked on what was a logged-in-only page.
My wireframes eliminated this distraction by introducing separate logged-in and logged-out nav bars. Additionally, logged-in users would see a slimmed-down set of links: the rarely used and sunsetting Orbs feature was removed altogether, and all user-related content was categorized with headings and descriptive labels into two menu items, one for user and account management, and the other for all ecommerce transactions.
All this was flipped to the right side of the page, in accordance with burgeoning UI custom, and the former API-driven social media buttons (which remained at the direction of the marketing department) were redesigned to fit the visual design and layout of the page better.
With the masthead's wireframes complete, I moved onto proof of concept UI comps using the V3 layout with the nested search feature. While forcing the user to click to reveal the search bar isn't optimal, this particular layout met a number of other criteria: the previously mentioned social media links remained prominently displayed, the secondary navigation menu linking to the About and Contact gateways remained in place, and - once activated - the search functionality could be prominent and clear. These factors made it the clear choice.
When compared the the jumbled mass of frequently-duplicate links in the wall-of-text menus that languished on the live site, the mega dropdowns looked to be a marked improvement in organizing site content and visually focusing in on that content (helped along with a semi-opaque blackout which would cover the rest of the site while users hovered over the primary nav and its submenus).
Again, clarity and simplification were the goal when possible, even in a content-heavy layout like the Tarot.com global masthead. Primary navigation menu headings were made larger and given clear dropdown indicators in the form of carets. Superfluous and confusing navigation headings were consolidated, both in the primary and user navigation menus, thereby reducing cognitive strain. A secondary navigation menu has been given a prominent location under the primary and next to the much-needed breadcrumbs. Dropdown menus are no longer a mass of links, but are instead given structure with subheadings and expository labels as needed.
When activated via the secondary menu link, the site search becomes clear as day, and the predictive search feature along with a monitored and curated controlled vocabulary would ensure that search terms leads users to exactly the Tarot.com content they are looking for.
Taken all together, I believe these proposed features represent a logical and evolutionary step forward that would begin to address the issues of unclear content hierarchy and poor navigability on the site.
With the issue of the global masthead resolved, the remaining time left on this project was spent on addressing the navigability, layout, and value proposition problems on the Tarot.com homepage.
As previously mentioned, the homepage gave testers some problems, chiefly in regards to its purpose and, secondarily, in the lack of any messaging about what Tarot.com is and offers. In specifics, the very large hero carousel that was present until mid 2014 was severely lacking in context. It was often unclear what you were clicking through to; sometimes you arrived at a product for sale, and other times you were taken to a recent blog entry. Content below the fold was an equally disorganized mess consisting of piecemeal portions of other pages.
The Today page acts as the real de-facto homepage on Tarot.com anyways. It's the most-visited page on the site and captured a good deal of traffic when click maps of various pages are checked. This means there is a real opportunity to be had on redesigning the Homepage, as it seems to lack a clear purpose and direction other than to theoretically drive traffic to other sections of the site. This seems to have been attempted with a extraordinarily large number of links and modules - throw a bunch of content at the wall and see what sticks. It is a strategy that does not appear to be working and is in need of a significant change.
Given what would be the limited practical scope on the project if it moved forward, any overhaul of the Homepage would have to fit within existing site code standards and visual style guides. Much like the masthead, this was not the right time to tear things down and build from the foundation up.
In approaching the structure and focus of the Homepage, I had several goals:
The wireframe seen here represents a limited proof of concept based on early paper wireframes. Were this proposal accepted, further work would have been done to both refine the specific layouts of the individual modules and the larger overall flow of the content (e.g. do we leave the brand distinctives as its own module, or is it better brought into the very first headlining module?).
In addition, further additions such as satisfied quotes and endorsements could have been worked in as module-buffers, and the reinclusion of psychic channel partner content would have likely been an advertising priority. Still, this early wireframe would be a good conceptual foundation for further iterative designs that would result in a much more effective Tarot.com homepage.
This isn't sexy work. It's not flashy, or expansive, or cutting edge. But what it does represent is the incremental, iterative quality-of-life improvements that make thousands of users' day-to-day interactions with a digital interface more efficient and effective. And those are important. They add up.
As it turns out, the actual details of this proposal were never seen by stakeholders. The proposal as a high-level concept was brought up, tentative interest was expressed, and then it was tabled as other projects ramped up. But that isn't to say it was a waste or nothing was learned from it.
If anything, this project goes to show that testing is important, needs to be done, and can be done even when there is neither a budget or official sanction for it. Even just five people can give you important, actionable data to work from. Secondly, although improvements to the desktop site's information architecture and navigability never happened, this proposal lived on spiritually when work on the mobile site ramped up. And that may ultimately prove to pay more dividends than the desktop site could.
In a world cluttered by confusing websites, too-clever apps, and mountains of unnavigable content, ensuring your customer can easily, effectively, and efficiently interact with your digital product makes a very real—and financial—difference.