Department of the Interior
THE PROBLEM
User Interface is how the website interacts with the user, including the user-device interaction, interface logic as well as aesthetic aspects.
U.S Department of Interior’s website has poor navigation and visual design. The visual design for a full-size version of desktop looks good, but with changing the size in different devices white gaps around some pages will appear and with this aligned grids and hierarchy which is used in the website, finding information is difficult. The most significant problem is the lack of information architecture on the website. Regarding to this inconsistently visual design and using inconvenience hierarchy users didn’t like to browse in this website more than two minutes.
HIGH LEVEL TIMELINE
Two weeks
MAKE OF THE TEAM
Individual project (Redesign government branch website)
KEY GOAL
The federal executive department of the U.S. government is responsible for the management and conservation of most federal lands and natural resources, so it is important to understand users experience and improve the usability for this them.
My Role
Research, Ideation, Visual, Interactive Prototype, Redline evaluation, Info architecture, wireframes, sitemap
I am the UX designer student in UCI bootcamp and I choose this website as a project for redesign and user research experience. Since it was a personal project I was only one who worked on it.I provided wireframes and mockups for the website and based on my research findings and design recommendations from my instructors, I decided to improve their designs. To uncover assumptions of the website’s users and to develop user personas I used the set of proto personas I created to communicate designs and how impacted website users.
Persona
Alex Zabihi
Male
39yrs
Married
Orange County
Project
“Nature heals us as nobody can”
Pain Points
Doesn’t like the website has a lot of steps and not user friendly. Doesn’t like a website which asks many question for registration.
Goals
He really likes to get more info about what site seeing are available for national parks. He likes hiking and explorer the new trail and campaign all around the U.S. Get warning of trails are close or open specially in rainy or snowy day and provided people with the map or some apps related to that
Bio
Alex is a project manager in Orange County and he wants move to Texas. He doesn’t have any information about the type of activity that he can do there, because the nature is completely different with California. He decided to connect with some locals.
UNDERSTANDING THE USER
I aimed to improve my user experience, site mapping & information architecture, develop branding, and interaction experience between website and users.
I conducted 5 seconds user test included 3 users through the Home page wireframe. The purpose of this test was to understand how each user interacts with the new design and to aim this purpose I had some question about how much clear the object, branding trustworthy, the design, recall procedures, and to know more about intended audience.
User's Feedback "Home Page"
There is a strange tooltips on social medias icon and it is hard to see. There is a big cursor appears when you click on search button.Toggle font size only works for hero section in home page. There is a button for those who suffered from dyslexia but there is another button next to which is unfamiliar with users experiences
BREAKING DOWN THE PROCESS
In order to reach my goals for redesigning the website I break it into smaller sub-projects and I wrote down all action steps included below:
I analyzed the U.S Department of Interior’ website and I defined my website’s target audience, so based on that I found out what is the most impressive part of website for users and what is not. I prepared the documentation process about my changing desired design based on user needs and then I did setup my goals and started to redesign the website.
THESE WERE SOME MAJOR LEARNINGS OR POINTS I WANTED TO CALL OUT
Redline Evaluation
The first step I took for this re-design was evaluating the current website in an attempt to better understand the primary goals I created a series of redlines to help engineers understand and code the designs to specifications. With redlines I could focus on specifications of design elements and components and allows me to easily identify areas that can be improved.
Information Architecture (Card Sorting)
In order to build a new framework base on new visual layout, and also improve the navigation through the menu I used affinity diagram and card sorting method. I started by listing each primary and secondary navigation item and ask the people to arrange them into a hierarchy that was clear and organized for them. I eliminated some categories by rearranging hierarchies based on users’ viewpoints.
Information Architecture (Site Mapping)
Based on my redesigned IA, I focused on improving the main navigation menu. I performed a sitemap as an essential part of the design to make informed decisions on how the website should look and feel and goal is to make it easier for the user to navigate through the site and have the comprehensive navigation.
Style Guide
Create a style guide helped me in order to highlight the brand vision and revitalize the appearance of the website. I decided to go with neutral green and blue colors to show a freshness and life.
UI Grid - Gutter - Column Rule
Define the columns and grids is the easy way to have an organized design. I merged the grids to my page layouts with margins to make it easy for the users to find everything in its proper place.
Maze.design User Testing
In order to meet users goals and achieve the most successful interactions I did a maze test.
LESSONS LEARNED
As a beginner I know my design was far from perfect, but here are 3 things that I learned from doing my first ever redesign project:
First of all I learned that sometimes it’s not a problem for me when I look at the website but it is a problem for user. I interviewed someone and asked their experience, I was surprised to find out that many users were actually bothered by problems that I wasn’t aware of, so I believe that if I understand users it will be a core for redesign or even design a new product.
Second one is I should pay attention to the details that customer want me to do and also the design details for example details about choosing the right color, font, space, and etc.Now when I am browsing some website or see the apps, I start dissecting its information architecture, color coordination, as well as button location, and think what makes it good or how can it do better.
The third things that I learned is about creativity. Most of the time after I find the problem, creativity help me to have a better outcome.
See Prototyping
