MY ROLE
UI Designer

BACKGROUND
Powering A Nation is a website dedicated to education about energy. The website uses a variety of multimedia assets to tell these stories: videos, articles, infographics, and photo stories.

THE CHALLENGE
Despite the variety of content in the website, the current home page lacks hierarchy and does not accurately depict the type of content each link includes. The viewer is simply shown a gallery of photos that all have the same size and visual weight. There was also no way to call attention to a specific post. I needed to show a wide variety of information (photos, charts, text) in a way that made it clear what the user was seeing and clearly showed distinction among each specific item.

THE SOLUTION
Use color blocks and a grid format to display the information, but to avoid making the layout look cluttered, use negative space effectively and maintain a clean style. Develop a sense of hierarchy among the grid items using colors, photos, and simple graphics.

THE PROCESS
I began by sketching out possible ways to display videos, infographics, articles, and photographs on the home page. I experimented with different layouts that emphasized the content within each story and provided visual hierarchy. Some of my initial designs relied on colors from the photos and videos, which I found to be a little overwhelming for the user, and which also made infographics, articles, and quote seem a lot less important.

I decided to make the images black and white and use more of the yellow accent color to guide the viewer’s eye. This gave me better control of where the user’s eye went.

RESULTS
After redesigning this website, I developed a better understanding of how to use mobile-first design principles to create products that are appealing and engaging in mobile, tablet, and desktop format. I found ways to use a bold accent color like yellow effectively while still maintaining a professional and clean look. I was challenged to find new, unique ways to display information and learned how to present a wide variety of multimedia in a way that was not cluttered or overwhelming for the user.

coalmobile01

coal01

coalmobile02

coal03