The Occupational Outlook Handbook: Redesign

The Occupational Outlook Handbook is a multi-page, government-sponsored website that is a subset publication of the Bureau of Labor Statistics. It draws upon government data to provide users with information regarding career options, growth, salary, benefits, and much more. The link to the current website can be found here:
https://www.bls.gov/ooh/

My redesign incorporates traditional graphic design principles that allow for an overall better user experience. The color palette now features a muted blue that alternates with each hero, organizing the reading experience for the user. The navigation through the site is linear, with emphasis to the fold of the screen, affording scrollability for the user. Lastly, I chose Google’s Noto Sans for it’s broad language support, being that users may come from other non-English speaking backgrounds.

UX/UI Design

Problems and Missed Opportunities

The layout itself is not very functional, with large amounts of information staggered across the page, making it very difficult to navigate. It’s not efficient to use either, as users that want to use the handbook to search for potential career choices or simply browse information are overwhelmed with too many options with the webpage’s cluttered layout.

This site is a demonstration of the Hick-Hyman Law, a user-experience design principle that proves users bombarded with choices must take time to interpret and decide, giving them work that they don’t want. Users may leave the website feeling unsatisfied, as the learnability of the site requires a large amount of time in order to start using the site efficiently.

Redesign (Wireframes):

Tackling an entire website redesign would require an entire team of designers, developers, copywriters, and project managers. Rather than attempt to completely revamp the OOH, I decided to wireframe several key features of the website, and focus on the homepage of the site, allowing me to lay the foundations of new opportunities that the website currently lacks.

Homepage

My redesign for the OOH Homepage features a three-row, two-column layout, effectively streamlining the user’s experience by making the information understandable through clear hierarchy, typography, and layout.

The OOH is a fantastic resource, but it’s strongest function, Search, wasn’t being fully utilized by the website. With this layout I made sure the search had a full hero catered towards this. The layout also highlights “Featured Occupation” and “Select Occupations By” which allow users to use other methods of finding the exact information that they need.

Search

As mentioned before, the Search functionality of the old website was subpar, using Google’s search styling, and overall just a confusing user experience.

Following a cleaner layout and more organized look, my redesign allows users to navigate their search results with much more ease and efficiency.

On the left hand side of the search results more functionality was added, with tabs of recent, related, experience-level, and check boxes for part-time and full-time added to aid users in their search.

Categorical Search

The Employment page was redesigned with fluidity of use in mind. The original OOH Employment Page displayed a wealth of information, but its clunky layout that overwhelmed users with information made it difficult to navigate and use.

This redesign features the site’s search capabilities in the top left corner, allowing users to continue to search for other information on the site. It also features a more structured layout and allows for users to use the site without feeling overwhelmed.

Employment Information

The Categorical Search function parses different categories of employment in order to allow users to find an area of interest and continue to view possible careers they might be interested in. The original design featured small thumbnail images unintelligible by users, taking up attention from the user, but not using it efficiently.

The redesign continues to feature the search in the top left, but also uses the “Featured Occupation” hero used on the homepage. This feature was added to allow for users that wanted to browse their options to also sample some careers that might interest them.

Frequently Asked Questions

The original FAQs page of the OOH was cluttered with text that made it incredibly difficult to navigate.

This redesign aims at sorting the information into categories into a sidebar, allowing for users to parse through topics relating to their interest / concern, making it much easier to navigate through the FAQs.

These quick keyframe redesign iterations give a glimpse into fundamental layout design issues with the site, and attempt to give a rough idea of how they can be utilized more efficiently.

Redesign (Homepage):

The Occupational Outlook Handbook is a resource intended to helping users find career, education, training, and salary information for hundreds of different occupations. This redesign refocuses the website OOH mission statement and streamlines the cluttered web page to make it more navigable and efficient. The redesign follows a two-column, three-row layout with heros featuring Search, Featured Occupation, and Select Occupation.

My redesign incorporates traditional graphic design principles that allow for an overall better user experience. The color palette now features a muted blue that alternates with each hero, organizing the reading experience for the user. The navigation through the site is linear, with emphasis to the fold of the screen, affording scrollability for the user.

The audience that I was designing for is very broad, and from a wide spectrum of age groups. Referencing the U.S. Web Design Standards, I tried to make the design as interesting as possible while still aligning it to the style guide.

Integrating a flexible typeface that stayed consistent while being widely available across many languages was very important. I chose Google’s Noto Sans for it’s broad language support, being that users may come from other non-English speaking backgrounds.

Takeaways: Considerations and Critiques

This project for the Occupational Outlook Handbook was focused towards a visual redesign with graphic design principles of hierarchy, typography, and color being applied to guide the user through editorial experience. The project’s goal was to develop a prototype that could help solve core usability issues through implementation of grid and proper use of typography.

In the future, I’d hope to be able to conduct proper user testing to fully flesh out a complete website redesign, which would allow me to continue to iterate designs based off of concrete validation.