U.S. Department of Energy(RWD)
Project Overview:
This was a project focused on building a Responsive Web Design for U.S. Government Agency, specifically to research the UI pain points that users experience while interacting with the website.
Problem:
The U.S. Department of Energy website needs a new responsive web design, so that users can navigate smoothly around the website and find the needed information quickly.
Solution:
A Responsive Web Design of the website with modern UI elements, new sitemap and simple navigation system so that users find necessary information efficiently.
Team:
Vedha & Mary Cameron
My Role:
User Research, User Experience & Interface Design
Tools:
Adobe XD, Miro, InVision and Photoshop.
Time:
5 Weeks
User Interface Analysis
Existing Website:
Redline Annotation:
Color Accessibility Test(Text)
Some captions failed the test because of less contrast
Color Accessibility Test(pictures)
Too many dominating colors in the pictures
User Research
User Interviews:
We tested 5 participants, ages 35-55, and did Usability Tests( Guerilla Testing) by assigning tasks like Making the home energy efficient, Weatherizing.
During Usability Tests we discovered that majority of the people have difficulty finding the information. They also found the Navigation was confusing, and some captions were not clear.
Interview Transcripts:
“The website is very informative but not easy to find. Also search bar is not obvious."
-Hari, 40
“It took me few mints to find the info because of the poor navigation. Few captions on the pictures are clear. But its a very useful website”.
- Chris, 45
Existing User Flow:
User Persona:
User Insight:
The user visits the Energy.gov because she wants to make her home energy efficient and save some some money.
Definition & Ideation
New Site Map:
Using the Key Take away and User Persona, I created a simple User flow. Card sorting was done to re-organize and design a New Site map. It starts with a welcome screen showcasing all the important information
UI Style Guide:
A new style guide was created to incorporate modern UI elements and make the website more welcoming and attractive.
Fonts:
Brandon Grotesque, and DIN san-serif fonts are chosen, because of the airy pleasant feel it gives while reading. This will encourage the users to read more information on the website without eyesore.
Mood Board
I chose these new pictures to represent energy.
A fresh green, a warm solar yellow and a earthy grey color gives a warm welcoming vibe.
Logo Design
The existing logos colors were adjusted to create enough contrast and match the Mood Board.
Design
Low-fi Prototypes:
Hi-fi Prototypes:
Testing & Iteration
Usability Test Plan Dashboard:
Product Under Test:
U.S. Department of Energy website prototype was tested in both mobile & Desktop to check the Navigation system. The Navigation was tested from the "Homepage" to "Save Energy, Save Money" page, also about us page to find how user friendly it is.
Participants:
Two users tested for both prototypes and both of them are homeowners, who are really interested in finding some energy saving tips for their home. They all are tech savvy's and uses their laptop, phone all the time.
Responsibilities:
Users were suppose to find the information's related to Energy efficiency, using the menu bar on the home page.
Objectives:
To find the contact info of the Department of energy.
To find energy saving tips for home.
Results:
Users were able to find the info very quickly.
Same users who tested before the RWD and after found the website impressive and easy to access.
Couple of buttons needed re-linking, which was iterated.
Final Thoughts:
Responsive Web Design plays a vital role in accessing the website. However in the Digital world, phone, laptop, iPad and many gadgets are used for finding information. So creating a website that is user friendly when accessed for any device got the best reachability.
Site Map Re-design helped a lot in organizing the information and prioritization resulting in smoother Navigation.
