government website redesign
focus on information architecture, navigation, and starting UI elements
Embedded Files
us dept. of energy
us dept. of energy
For this school project I had to redesign a government website. The unit focus was on information architecture, better navigation design, and beginning UI elements.
SCOPE
Information Architecture
Navigation Restructure
Responsive UI Redesign for Mobile & Desktop
TIMELINE
5 weeks
This was a 5 week school project where we were given the challenge to create a new information architecture and a new UI navigation prototype for a government agency by analyzing the pain points that users experience when navigating the website.
I collaborated with another classmate for the user research for this project. Once we completed our research, I continued on as the solo designer for the UI design, prototyping, user testing, and design iteration phases.
First Round User Testing Findings
First Round User Testing Findings
We began by conducting 5 one-on-one user tests to check the usability of the current DoE website; each test consisted of two tasks. Even with 60% success rate, we found that it took a significant amount of time to complete the tasks, and it left users confused and frustrated.
User Persona
User Persona
Through our testing research, we discovered that the average user was a male in his middle forties looking to make energy saving updates for his home.
Problem Statement
Problem Statement
Tom, a small business owner, needs a way to quickly find DIY project solutions on the Department of Energy website to make his home more energy efficient because hiring someone to do the job is not in his budget.
Design Question
Design Question
How might we help US Department of Energy organize their content in order to create a navigation that is easier for users to find what they're looking for?
After we completed user interviews and documented our findings, I began doing a Heuristic Evaluation using the 10 Usability Heuristics for User Interface Design from NNG. Below is an image of part of my analysis of the homepage. We found the information to be consistently hard to find, the navigation was a pain to use, many pieces of content were duplicated or in an illogical place, and users were generally unable to find what they needed.
I followed up the Heuristic evaluation with a card sorting exercise.
I did this process with four different users and looked for consistent sorting patterns and things that couldn't be sorted.
I used this information to guide my redesign of the navigation and re-architect the information hierarchy.
Once I had solid data to work with from the card sort activity, I worked through creating a new site map to give myself a plan to work with and plan out the new navigation.
I was the solo designer on the project from this stage forward.
With research and initial testing tasks completed, I began working on the UI Design for the project. To the right is my initial layout for the homepage and navigation.
This project targeted the navigation usability, I focused on things the Department of Energy might want to communicate as well as what a user might be looking for and how they'd get there.
From there I started working on the visual design elements and building a UI Style Guide to apply to my low fidelity wireframes.
With my design elements coming together, I started applying the UI to my low fidelity wireframes. I went through several iterations and referred back to my research throughout the visual design process.
I ended up adding a lot more visual elements throughout my redesign process. However, in my first and second iterations, I took out way too much content which caused my users to get stuck in testing. In the final version I added more context to the layouts and some of the content back in.
Second Round User Testing & Findings
Second Round User Testing & Findings
I ran user testing again with 10 new individual users. I used the same tests as the first round for consistency. I added rounds of A | B testing for certain elements of the design and layouts. I discovered the following:
Users were able to complete the tasks 100%
Significant decrease in the time it took to complete each task
A | B testing led to changes in layouts, colors, and typography
Users were able to flow through the website with no hiccups
Desktop before & after
Desktop before & after
Mobile before & after
Mobile before & after
Final Thoughts
Final Thoughts
The redesign would not have been successful without multiple rounds of testing and iterations. This project made me fall deeply in LOVE with user testing. I went into it with firm ideas and plans of what would help the user and I was proved wrong in every single test - I absolutely loved that. It was inspiring and helped me push my designs further than I imagined they would go.
Page updated
Google Sites
Report abuse