Department of Interior.

Responsive Web Redesign.

At-a-Glance

The goal was to enhance the user experience by using modern UI elements and visuals, while maintaining the composition of the original webpage.

My role

UX Designer

Timeline

3 weeks

Tools

Figma, Mirro, InVision, FlowMapp

Problem

Improve the usability of the U.S Department of Interior website

Solution

Redesign of the website for a more modern and simplistic way to find necessary information efficiently.

Process

First I began by analyzing the current state of the DOI website, then planned and conducted 6 usability test for the current site. To further analyze the website I performed a Redline Annotation, Heuristic Evaluation, created a new Site Map and more. After research came the redesign, I made sketches, along with low-high prototypes for desktop & mobile. Lastly user test were done on the prototypes for more design iterations.

DOI Site Redline

Creating a redline annotation analysis is the first step in understanding the user experience and frustrations. I have conducted redline annotations on multiple pages on the website to determine the heuristic issues that needed to be addressed immediately.

Heuristic Evaluation

The DOI’S website was cluttered with too many navigation items, while the overall experience felt flat and one-dimensional. To solve this, I planned to reorganize the site map and also develop a new look with the goal of making the visual design more friendly, intimate, and visually stimulating.

User Testing

Objective 1

1. Locate and enter the Bureaus/Offices
2. Select Bureau of Land Management
3. Go back and locate another Bureau

Objective 2

1. Locate and enter Newsroom
2.Locate and enter the Blog

Our participants showed mixed results on current how the current navigation was formatted. One thing stood out amongst almost all participants was that the experience felt felt flat, it lacked any character or appeal to the user.

Card Sorting

I had three participants take part in an open card sorting activity. The results varied and the data that I’ve received prompted me to create a secondary navigation system.

New site map allows the users to navigate the website with much ease compared to the original site map. I’ve removed redundancies and changed the wording where it was appropriate.

New Site Map

Making a Style Guide

While making a Style Guide for this website I’ve considered the following elements and made these changes:

  • Colors - Limited color scheme was selected to reflect the seriousness and the goal of the website.

  • Typography - I’ve changed the typography to make the look of the website more modern and up to date.

  • Buttons

    • Desktop - Bigger than Mobile buttons, these have active and hover states and are available in two different sizes.

    • Mobile - These are smaller buttons available in active and default states, however, compared to Desktop, these buttons only have one size.

  • Tabs - tabs are available in one color and two states, such as active and inactive.

  • Alerts - Generic error message.

  • Icons - These icons include the social media as well as microphone, magnifying glass and the website logo.

  • Spacing

    • Desktop - Using a 12 column grid to achieve the most equal spacing on the desktop.

    • Mobile - Using a 4 column grid to achieve the most equal spacing on the mobile.

Prototyping

  • Size and location of navigation logo and ‘DOI’ text.

  • Primary menu text changed to white (better contrast, easier to read)

  • Search bar icon UI updated

  • Moved menu ‘down arrow’ to the right-side of primary menu text rather than below, more conventional for users.

  • Menu drop down changes:

    • Changed drop down menu corner radius to 10’, to keep it uniform with the design. 

    • Added ‘hover’ effect when scrolling through menu, to provide feedback to users and make it feel more flushed out.

    • Minor location adjustments.

  • General: Making UI uniform across board

  • Added color gradient to blue back background boxes

  • Changed hero image opacity, and color of hero image text

  • ‘About’, ‘B&O’, ‘Priorities’, ‘Newsroom’ boxes all readjusted, last version was too rectangle, made them more square.

  •  Added quote to ‘Buffalo’ picture

  • Footer:

    • Changed placement of text, made better use of space overall.

    • Image size and placement changes

    • Social Media Icons moved

      • Text above social media added 

Prototyping Mobile

Creating mobile version of this design was a great challenge of skills and knowledge of UX and UI. I was able to put newly learned lessons to action while creating smooth transitions and animations. I am gearing the mobile version towards the younger generation who would be using it.

Final Design

Reflection

Throughout my time working on the DOI’s responsive redesign, I’ve learned the importance of keeping designs consistent and organized. Spending extra time on design systems and style guides is key to keep designs consistent across multiple screen sizes.

 Check Out More Of My Work

Tulip

Wild-Heart Sanctuary