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.