Due to non-disclosure agreements, I cannot mention the name of the client. Some screens may be altered, reproduced, or scaled down for the purposes of honoring the agreement.

PROJECT
Website redesign proposal / resource center

ROLE
UX Designer

RESPONSIBILITIES
Research, User Testing, Wireframes, Information Architecture, Prototyping


The Opportunity

Look at almost any union site, and you will quickly realize that this is an industry that is slow to priotize UX and best modern design practices. Our team was given the opportunity to explore and present a website redesign to help a well known union better serve it's existing members, while attracting new members at the same time.

The current website fulfilled various needs, but most important was the need to download contracts for specific jobs union members were working. There were hundreds of contracts—some digitized and some scanned contracts dating back to the 70's. The contracts included various forms, agreements, rate sheets, timesheets, and checklists, for different types of users and production types. A key stakeholder would emphasize that "contracts are the heart of everything we do".

Despite already having a document center, users would complain about not being able to find what they were looking for. Contracts were scattered throughout the site and buried under layers of navigation, with no custom search.

The current site was hard to manage and had too many unnecessary and outdated pages. At our kickoff meeting the stakeholders made a point of wanting a site that was "thin, streamlined, efficient, elegant". Union members were extremely busy. They needed to find what they were looking for and get back to the job at hand, or look for the next job. We needed to think of the user experience in terms of time well spent. We came to the conclusion that a well organized resources center was critical to the site's success. This would be only one of many aspects of our design proposal.

Research

The team conducted extensive interviews with both stakeholders and union members. Surveys were also sent out to thousands of union members. Among the list of pain points regarding the current document center:

  • Confusing navigation and iconography
  • No heirachy, hard to scan
  • Did not utilize space well
  • Inconsistent naming conventions
  • Not mobile friendly / responsive
  • Poor search capabilities
  • Not helpful to see too many contracts

We identified six different user groups in total. Identifying all the different user types informed how we could help each group and prioritize each groups needs. It also allowed us to provide an alternative way of searching for contracts, instead of just by production type.

We researched other unions, as well as other organizations and institutions that held prestige and a strong sense of community—a core principle of the union's brand. These sites served as more of a reference point for information architecture and language, as opposed to design inspiration for layout and interactions. We looked across many industries for great search tools and resource centers, including museums, libraries, business enterprise sites, and other popular member organizations.

Affinities research

Conducting a resources audit

A full and detailed content audit was necessary to make searching for documents easier. Although not the most glamorous of tasks, it was absolutely necessary and highly valuable. The audit gave us a deeper understanding of the document content and the taxonomy we would create.

I clicked through every page of the site, recording each document I could find into a spreadsheet, tagging them with relevant properties that could be applied to a search query. Properties included the document type, production type, role, date created, and location. All in all, the audit revealed almost 400 documents. The site search function provided little help, had no advanced functionality, and revealed mixed results because the documents had never been properly indexed and tagged.

Resources Audit

Our Solution

With our resources audit fully complete, we began sketching with a full understanding of all the document types and user types. We identified three main ways to find a document:

  1. A smart search
  2. By production type (8 total)
  3. By role (6 total)

The fundamental architecture of our resource center utilized a prominent search bar at the top and a card based layout below. The entire card was clickable and the layout transferred well to mobile. The card based layout had tabs above that sorted the documents by production type or role. The right siderail featured FAQ links, popular resources, or other member specific content.

The current navigation consisted of small icons that were confusing and required mouseover to read the title of the content. We wanted to concentrate on making the page easy to scan and extremely simple, without needing instructional copy. We exposed all the category titles and created space for descriptive copy on each card.

Landing page comparison

Clicking through to a category page displays a list of available document types as expandable accordion components. We originally listed all the individual documents and provided filters in a left column, but we found that this caused users to feel overwhelmed.

Category page iterations

We discovered that seeing long lists was not ideal, and that providing shorter lists and drilling down reduced time spent scanning the page. Selecting an accordion component would reveal the list of individual contracts that could be downloaded, bookmarked, or display a short summary.

Category page comparison (document type selected)

Other key features and interactions included:

  • Predictive search
  • Search within a category (production type or role)
  • Establishing naming conventions and tagging documents for improved SEO
  • Breadcrumb dropdown navigation
  • Number of documents in a contract category visible
  • Bookmarking documents
  • Reducing instructional copy
  • Removing image banner links that looked like ads
Key features included breadcrumb dropdowns to easily navigate to other pages without going back a full step and a predictive search that would suggest resource documents as the user typed.

We new the importance of real content, we made a point of creating mockups without lorem ipsum text, and we used actual resource documents that were accurately populated.

A birds-eye view of our Sketch files that we used to prototype in Invision.

Next steps

The client was extremely pleased with our approach. This was only one of the concepts that we explored as part of our redesign proposal. Other parts of the presentation included a new homepage, sitemap/information architecture, and new website support features. This project is still currently in development, therefore I can only give a high-level overview.

Previous project
Next project