Date: Summer 2018
Programs: Adobe Illustrator, Dreamweaver + Brackets ( CSS, HTML, JavaScript )
The Project: While interning at Saint Louis Public Radio, I needed to redesign the About page and the Staff page for the station.
The Challenge: The previous pages contained too much text and had nothing visually engaging to keep visitors clicking. The Station wanted to create an engaging and informational page for users to learn more about them, and direct them to pages about giving or events. The also wanted a way to display all of their staff in one place.
The Before:
Planning the About Page: I started off with a few wireframes to see what elements would be best. The goal for the project was to make the page more user focused and visually showcase the station and their content. I then designed a couple of high-fidelity examples to figure out the style and colors for the page. My team decided that the links on the side would look better in contrast to the navigation that would go on the top of the site.

I added an image gallery in my last mock up in order to show more of the station's content, and laid out areas for their podcasts by showcasing each logo.
Final About Page: There are several more opportunities for the user to explore the station, there are more pictures to keep the visitor engaged and less large blocks of text which usually turns users off. Please view the live page here! *Note: the station went under a redesign in 2020, but elements of my layout where included.
Planning the Staff Page: The staff page took less wireframing and planning. I came up with a simple and clean way to showcase the entire staff while cutting down on large blocks of text. There were originally two separate pages (shown below) showcasing people on staff. I wanted to put everyone in one place and make it user friendly and engaging.
The Before:
Final Staff Page: I designed a layout with CSS Grid that allowed everyone to be shown on one page. When the page loads, someone's bio from each category is selected randomly so that everyone gets a chance to be showcased. Please view the live page here!

You may also like

Back to Top