Voces Short Courses

Completed at: Bardgette Designs

Project Type: Website

Scope: Information Architecture, Visual Design, User Research

Tools: Sketch, Quicktime, Zeplin

Voces Short Courses is a new conference highlighting the nearly two decades of expertise of the Voces Oral History Project which documents the contributions of Latinos in WWII, Korean War, and Vietnamese War.

The website for the conference would include the speakers, classes, and let attendees register for the conference.

[unex_ce_button id="content_z6hiefn7q,column_content_rca92v24d" button_text_color="#ffffff" button_font="semibold" button_font_size="13px" button_width="auto" button_alignment="center" button_text_spacing="2px" button_bg_color="#1b9bc4" button_padding="15px 70px 15px 70px" button_border_width="0px" button_border_color="#000000" button_border_radius="0px" button_text_hover_color="#dbdbdb" button_text_spacing_hover="2px" button_bg_hover_color="#13617a" button_border_hover_color="#000000" button_link=" https://www.daniellebardgette.com/acton" button_link_type="url" button_link_target="_self" has_container="" in_column="1"]NEXT PROJECT[/ce_button]

Define

DISCOVERY SESSION

I met with the client to discuss the background on the website including who is the audience, website goals, branding guidelines, technology requirements, the total number of site pages, project budget, etc.

  • gallery-image
  • gallery-image
  • gallery-image
  • gallery-image

PROJECT COST ESTIMATE

After gaining a better sense of the scope, I put together a project cost estimate with a breakdown of the development and user experience costs. This process included a back and forth with the client to meet their budgetary costs.

PROJECT TIMELINE & PROCESS

Once the project estimate had been solidified and contracts signed, I met with the client again to review the project timeline and my process for the project.

DEFINING THE AUDIENCE

The client had a general understanding of who their audience was, we wanted to confirm some basic demographic information on them. I put together a survey that was posted to the client's social media pages and distributed to their email list. The survey findings showed us at a large percentage of the responses were from Texas and individuals aged 60-69. We also used the survey as way for individuals to signup for future updates about the conference.

Design

MOBILE WIREFRAMES

I created mobile wireframes for the four major pages for the website: Homepage, Schedule, FAQ, and Registration.

DESKTOP WIREFRAMES

Then the desktop wireframes for the website. This is the flow for the registration page where attendees would sign up for the event, pick workshops to attend, and choose a lunch type.

  • gallery-image
  • gallery-image
  • gallery-image
  • gallery-image
  • gallery-image
  • gallery-image
  • gallery-image
  • gallery-image
  • gallery-image
  • gallery-image
  • gallery-image

Validate

USABILITY TESTING & PROTOTYPE

After a round of updates to the wireframes, I created a prototype and did usability testing with 6 people who were representative of our initial demographic survey. Our testing session including asking about general technology and social media usage as well as understanding of the pages in the site. We found folks generally understood the intent of these pages: Homepage, Schedule, FAQ, and Registration page. The early design did reveal that there was confusion about the relationship between the organizer for the event Voces Oral History Project and the actual event Voces Short Courses.  

Launch

FINAL DESIGNS

Based on the usability testing findings, we updated the designs. The final and live version of site is here: http://vocesshortcourses.org/

DESIGN & DEVELOPMENT HANDOFF

To help with the development handoff, I uploaded the final designs to Zeplin. This program lets you annotate designs and when any design element is clicked on, the CSS styles for it appear.

  • gallery-image
  • gallery-image
[unex_ce_button id="content_nzfnv8pqv,column_content_kod10nnnn" button_text_color="#ffffff" button_font="semibold" button_font_size="13px" button_width="auto" button_alignment="center" button_text_spacing="2px" button_bg_color="#1b9bc4" button_padding="15px 60px 15px 60px" button_border_width="0px" button_border_color="#000000" button_border_radius="0px" button_text_hover_color="#dbdbdb" button_text_spacing_hover="2px" button_bg_hover_color="#13617a" button_border_hover_color="#000000" button_link=" https://www.daniellebardgette.com/acton" button_link_type="url" button_link_target="_self" has_container="" in_column="1"]NEXT PROJECT[/ce_button]