While attending the UX/UI Bootcamp at Georgia Institute of technology, our team was tasked with redesigning a government website - During research and discovery, our team realized that the majority of users over 85% were coming to the site looking for specific information. With participants tests and navigation tests, we learned that the site had contrast issues that made titles challenging to read, often frustrating users. Our team organize the content, gave a modern look, and highlighted the search bar making it easy to read and navigate.


Users were overwhelmed by the vast amount of disorganized information on the site. How might we redesign to be a go-to hub for information about green living and alternative energy sources?


Prioritize search feature, introduce a new navigation system, and redesign with a modern twist.

  1. Research & Discovery My team performed user interviews and tests, established personas, designed flows, annotations, and color testing.

  2. Intuitive Navigation Through testing and card sorting, we were able to fully grasp the size of this site and give it a more logical organization and eliminate repetitions.

  3. Redesign Inspiration I was inspired by a user quote - when asked what energy means to them. They replied, "energy is the difference between light and dark." Also, our approach was to focus on mobile-first. We made sure the content flowed on mobile devices as well as it did on full-sized browsers.

  4. Design System I chose an immaculate and minimal design inspired by users.

  5. Sketches, Wireframes and Prototypes Sketched out flows, used Adobe XD to build wireframes and prototypes implementing the minimal design system.

My Role

Our team of four completed interviews collected survey data and performed usability tests. We analyzed the research data together. I ideated, sketched, and prototyped the solution, and develop the design system.

Timeline: 4 Weeks

Research & Discovery

Conducting interviews with users and watching them navigate the site led us to conclude the DoE's primary users go to the website for a specific reason, and their main frustration is finding the information they set out to get. Due to the immensity of the site, they often rely entirely on the search function to find the information they need. This finding led us to redesign the home page with the search bar featured in a primary and central location.

Here is what some interviewers had to say:

"This is confusing. I would not think this is a drop-down menu. I mean, there is no indication." Drew Conners
"Is this it? No right? I don't think this is it" (When an article loaded improperly for the second time)
Beckah Beckmen
"That is too many clicks. I would not know to click that"
Courtney Dobec
balck and white

Our test subjects also found it difficutl to read, especialy the homepage highlighted articles. The titles are displayed over busy images making them hard to read.

On highlighted articles, the titles are displayed over busy images making them hard to read.

Primary articles are apparent, with a nice contrast between text and background.

User Persona & Flows

Although a user persona is considered a bit outdated, it is a tool, and it can prove useful in inspiration and steering design decisions, even more so when complemented with a scenario to shows tangibility and realism. From testing, after completing the test subjects ware asked if they saw an article they wanted to click on the site, almost all wanted to explore the save money category of the website.

user persona 1

Samantha Kurz | 42years
Middle School Physics Teacher
STEM Club leader


Sam starts her school day by reading to seek inspiration and to find engaging information to intrigue her pupils. Also, she recently bought a home and is determined to make it energy-efficient and to save money on utilities.


Research findings,
which test subjects repeated.
  • Goals
  • Make complex information fun and engaging.

  • To leave greener pastures to future generations.
  • Impact the world with her teachings.
  • Inspire students to care about the environment.
  • Needs
  • Inspired students.
  • Eliminat her carbon foot print.
  • Flexible teaching plan.
  • Pain Points
  • Implementing clean energy techniques in her busy life.
  • Her teacher's salary is not competitive.
  • Class control, managing 8th graders.
  • Visits Dayly
  • Class Dojo
  • Gmail
  • Real Simple Magazine
  • Pinterest
  • Rides the train


I compile the flows around everyone's ultimate use of the search bar.

User Goal Find specific information/article.

Task Flow

User lands on the home page.

Users types in the search filed.

User perfects the search by clicking a category if they can't see immediately what they are looking for.

User finds the information needed.

Wire Flow

user flows

User Flow

user flow step by step
user flow step by step
user flow step by step
user flow step by step

Annotations, Heuristic Analisys

To better understand the frustration of the users. My team did a heuristic analisys and discovered layout inconsistency throughout different sections of the site. There are four different menu systems with no clear indication on how to go to the starting point. The site is massive in content with multiple micro sites catering to a wide variety of users. But yet the search option is almost hidden.

Link to the full Heuristic Evaluation

Design System

Redesign Inspiration

The idea for the redesign comes to me form a user interview. "Energy is the difference between light and dark, warm, and cold." That simple sentence captured the essence of energy, in our opinion. So I decided to center the design to this statement. Kept the original blue and green colors associated with and use them to signify the two main parts of the site "science and education" and "save money."

I put together an emotional profile of the people I am designing for when going through the research data to assemble the user persona. I realize the majority of our users are environmentally conscious people concern with green source of energy, their carbon footprint, and global warming. So it was a no brainer that the website needed to feel clean, light, and airy.


Moodboard & Inspiration

I start the design process with a full understanding of the competition. In this case, researching the web representation of other government departments, as well as other content massive sites catering to the general public like Smashing Magazine, AIGA, Netflix.I also looked at a lot of news sites like The New Yorker and USAtoday. All these websites had in common an established hierarchy and the well-calculated use of white space.

moodboard images

Sketches & ideation

I started with paper sketches from scratch, ignoring the original layout of the site. I wanted the logo to be this bright, glowing light embodying the biggest ball of energy we as humanity have seen - the sun. But through talking with collegs and testing with users, I began to understand that energy is more than just light. It is also power. It is a connection. So I moved on to more ambiguous shapes to represent the site.



Making it digital.



We decided to simplify the logo for quicker recognition and got rid of the tag line as well to be able to enlarge it slightly.



The colors are freindly and reflect an energetic feeling



A clean, easy to read serif font that has a vaariety of weights.


cards treatment


Icons are a simple stroke, in black on white.



Mock Ups



light view mobile
dark view mobile screens

Category page

light view mobile
dark view mobile screens


Keeping the same clean, modern look but scaling it for mobile.

light view mobile
dark view mobile screens


UX Writing & Cardsorting

Heather Lutz


Marcus Moraru


Devin Arch