top of page

VOV Website

Voices of Oswego Veterans | 2017

Collaborators: Gaetano Bruscino and Madeline Hagen

Overview

—

Given the logo, Veteran images, transcripts and audio recordings, my creative team and I had to put together a cohesive, responsive, working website for the Voices of Oswego Veterans. The goal of the website was to challenge stereotypes of veterans, specifically student veterans on SUNY Oswego’s campus. Each podcast page was designed to individualize the featured veteran and their story. We had to decide on the overall mood as well as, organization and grid structures that would be conventional yet unique to a podcast website about veterans.

Audience

—

Understanding the audience and their needs were key in the development of this website. Our target audience is SUNY Oswego students. Secondary audiences include the veterans, their family and friends, and anyone else who is interested in this topic. We constantly user tested from our target audience to make sure that we were meeting their visual and experiential needs.

Process

—

The initial process included a few steps. We first needed to identify common stereotypes so we knew what preconceptions users may be bringing to the website. Our goal was to say upfront that the website would be filled with stories told by the voices of the veterans, not of others.

We moved on to the research phase where we looked up other podcast websites that had nothing to do with veterans and then a few that did. We compiled a list on conventions that were common throughout the websites that a user would expect to see because they needed them. This list included logos, navigation, individual podcast pages, an archive and about page, audio scrubber bars and others. We then compiled a list of addition information that might be needed for our particular audience. This list included unique terminology and geography sections, biographies of the veterans and pull quotes for individuality. We also decided to add in a related podcast section on the bottom of the page to promote site exploration.

​

UI Organization and UX Testing

—

We looked at different article UI patterns when deciding on how to organize the podcasts and came to the decision that a card system would work best for the homepage. Cards work well for when a user wants to browse or scan content but not necessarily commit right away. They also rely heavily on images which could be another deciding factor on the choice between one podcast or another.  Initial mockups of the cards were heavy in color and user testing told us that the button was confusing and that users wanted to click on the image or on the largest heading. Our final design was light in color to match the mood of our website and included links on the image. The largest heading was also turned into a link and there is a hover action where a user will notice a color change and an underline to make the link obvious. We also explored a few different grid structures on the individual podcast pages. It was important to us to have the right hierarchy and that information was where the user wanted to see it when they wanted to see it.

Initial Card Design

Final Card Design

For the Audience

—

Some extra elements were added to each podcast page specifically for the audience and their needs. Not every user would have full knowledge of geography and military jargon so we added in maps and a terminology section. We also included short bio of the veterans, along with a pull quote from their podcast to further individualize each person. Finally, we added a "Back to Top" button for the audience to use when open transcripts make the page height very long.

Final Design

—

Wireframes and mock ups were the next step. Revisions led to a final mock up that was marked up in HTML and CSS. The final website design had accessibility in mind and portrayed the open mood that we were going for.

Made to Grow

—

Card article lists are a great option for a website if it plans to grow. We took this into consideration knowing that there may be future volumes of the podcasts. We also implemented this idea of growth on the podcast page through volume accordions.

 

Next steps include promoting the website on social media. Facebook is a great option because it is a platform that thrives off of the idea of community. The posts can also link directly to the page, which is convenient for the user.

HTML

—

  • Homepage HTML

  • Mercado HTML

  • Frisbe HTML

  • Footer HTML

  • Initial Metadata

CSS

—

  • Header Image/ Caption/Button CSS

  • Card CSS

  • Button CSS 

  • Round One Grid CSS

  • Section CSS

  • Map graphics

  • Round One Spacing CSS 

  • Resize Images

Other

—

  • Homepage Image

  • Most of Copyright

  • Set up Presentation framework

  • Create Map graphics

  • Pick out Pull Quotes

  • Working Mock Ups

  • Final Navicon

  • Final Artwork

  • Social Share Graphic

My Contributions

—

​

bottom of page