U.S. Department
of the Interior
My Role:
UI/UX Designer
The Challenge:
An overabundance of information, lack of clarity, and poor user flow make the DOI.gov website difficult to navigate.
The U.S. Department of the interior conserves and manages the Nation’s natural resources and cultural heritage for the benefit and enjoyment of the American people.
Team:
Team of 3, the individually
1-month sprint
The Solution:
Improve the usability of the website by redesigning using modern UI components for a more modern aesthetic.
User Research:
Heuristic Analysis
After taking some time to analyze and evaluate the DOI website home page, we concluded:
-
The navigation needs clarity: Search icon gets lost next to accessibility icons.
-
Accessibility icons can be a link below in the footer
-
Overall, labeling links in the tabs with clarity, condensing and making important and relevant information a priority, and adopting a better visual hierarchy will make it easier to navigate the site.
User Research
We found that the original aesthetic of the page is bland and often has too much text on a single page. The navigation from page to page is confusing as some key elements are either unclear or not working. Sympathy, personal connections, and goals of NPOs determine if users want to make donations. Most think seniors are not tech-savvy. Donation is one of the most important function in an NPO’s webpage.
Card Sorting
After our team performed a card sorting analysis and then recreated the DOI’s site map based on our conclusions that there is an overabundance of information on the site. Our aim was to simplify it and make it less overwhelming for the user to navigate.
The Approach:
Heuristic Evaluation, User Persona, Competitor Analysis, User Testing Questions and Findings, Proposal, Miro Board, Trello, Figma(Lo Fi and Hi Fi Prototypes for Web and Mobile), Style Tile & Style Guide, Navigation, Iterations, Storyboard, User Flow
User Research:
Heuristic analysis, user persona, user motivation, competitor analysis, storyboard
Prototyping:
Card sorting, user flow, wireframes, prototypes, prototype testing, style guide, user testing
Testing & Iterations:
Iteration of mobile and web prototypes, v2 prototype testing
Conclusions:
Next steps and final thoughts
Style Guide
Wireframes
User Testing
It was vital that we did user testing to identify where we lacked in our initial wireframe prototypes so that we may improve our design.
Final Product:
Clarity and simplicity when designing navigation is vital. For a user, finding the page they are seeking is essential in their process while navigating a website for web and mobile. Labels and language used, information layout, and hierarchy are important factors in successfully designing a website that is pleasant and easy to use.
Conclusion: