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:

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 is cluttered, with large amounts of information being compressed into a very small space

Information Design
The information presented here repeats itself, or doesn’t help the user access the information they need

Hierarchy and Typographic Treatment
With so many varying typefaces and hierarchical treatments, the site is very overwhelming and takes time to interpret and understand

The Occupational Outlook Handbook: Before

Wireframing a Solution

Rather than attempt to completely overhaul the entire website, I decided to wireframe several key features of and focus on the homepage of the site, allowing me to lay the foundations of new opportunities that the website currently lacks.

The Occupational Outlook Handbook: After


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.


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

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.

Moving Forward

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.

This project for the Occupational Outlook Handbook was focused towards a visual wireframing 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 draft prototype that could help solve core usability issues through implementation of grid and proper use of typography. |