Content and visual design
Role: Design, Content, PM
Introduction
Indeed's documentation website, Doc Hub, is the central repository for design system documentation. Users can go there to access best practices, how-to's, and a whole host of other resources to ensure they can implement the Indeed Design System (IDS) correctly.
However, the site hadn't been touched in quite a while. Pages weren't always standardized, which hurt understanding and comprehension. The site looked old, which created uncertainty in our users.
I was tasked with refreshing the visual aspects of the site as well as standardizing and improving the interior content pages, helping our users find information more efficiently on a site that looked modern and up-to-date.
Research: Workshops and Ideation
We began with an internal workshop and brainstorming session. From these sessions, a rough structure began to appear.
Each major template/section of the site received multiple iterations. This is an example of a final-ish pass of the component overview page, a listing of all the components within the DS.
We began with an internal workshop and brainstorming session. From these sessions, a rough structure began to appear.
We had a working session at Indeed's headquarters in Austin, TX, with relevant design, management, and content stakeholders contributing ideas. We quickly hashed out ideas borne from the previous six months of user testing, user interviews, site surveys, as well as stakeholder interviews. We came to a few key conclusions.
The homepage had too much information and not enough action. Users wanted to come to the site and do something, not read something. Second, interior pages had great content, but that content was hard to learn. Finally, the site was extremely text heavy, and our users really keyed in on images, rather than text.
With those lessons in mind, I began iterating on the current pages, coming up with 20-25 designs for each section of some possible places where we could make improvements.
Site Audit: Current state
The old homepage and site design featured a left rail navigation with some minor updates to induce action. This was a v1 I created, helping users get more quickly into the site via primary buttons to the foundation and pattern libraries, the section of the site most accessed by our users.
The old component page, with quite a few design problems that we gleaned from testing. Navigation would get lost, the page was clunky, and the content was non-standard, meaning users couldn't skim easily to find information they needed.
The old homepage and site design featured a left rail navigation with some minor updates to induce action. This was a v1 I created, helping users get more quickly into the site via primary buttons to the foundation and pattern libraries, the section of the site most accessed by our users.
The homepage featured here has more actions and got users to information more quickly, but it was rather large, took up a lot of screen and mental space, and wasn't quite as efficient as I would have liked. Further, the navigation on the entire site featured a left rail with headings and opened closed.
While not inherently bad or wrong in any way, the problems began when a user would open the components header, where our 50+ components would push the rest of the navigation down to the very bottom of the page. Overall, the homepage needed to be cleaned up and simplified further, and we needed a solution for this really, really long list.
The component page featured similar navigation problems. The main navigation featured global icons that would link out, while also having a tabbed structure that controlled the interior page. This confused users. Additionally, pages had slightly different language, headings, and structure across the entire component set, making learning and trusting the system a really difficult task.
Design and Implementation: The New Doc Hub
Top of the homepage, encouraging action
Lower half to the homepage, linking out to slack channels for help.
A more obvious and page specific feedback mechanism allowed us to gather information on specific pages, rather than a global approach which was confusing and hard to track,
Top of the homepage, encouraging action
We made quite a few changes.
The homepage now highlighted specific libraries that our users needed. Users were able to access other resources outside of Doc Hub to answer their questions. Further, Slack links were clearly defined as to who does what, so users felt confident the channel they clicked on could successfully answer their specific question.
We switched from a left rail to a top-rail navigation structure. Users no longer had to manage opening and closing drawers, snapping navigation up and down in a really jarring fashion.
Interior pages received a refresh as well. Working with our partners in content design, we used a CMS to create templates for each pages, collating and organizing the entire site into discrete units that could be standardized and easily edited. We then pulled individual information off individual pages and put it into the CMS, making managing and reorganizing much simpler and faster. We added micro-targeted feedback mechanisms on each page. Users would now be able to give us feedback on specific pages without being intrusive or distracting to their original purpose.
All of this resulted in positive metrics after launch. Our UEQ score meaningfully improved in all metrics, especially in attractiveness and efficiency. Importantly, we spent less time managing individual pages and more time thinking holistically how our entire information ecosystem functioned as a whole.