Acton Academy

Completed at: Tahiti Blue Interactive

Project Type: Web Application

Scope: Interaction Design, Visual Design, User Research

Tools: Fireworks, Axure, Quicktime

Acton Academy is a 1st through 12th grade school located in Austin, whose curriculum encourages its students to be curious, independent, and life-long learners. 

The school's students and teachers use a web application to manage daily coursework. With its high school population increasing, an update to their web app was needed to show student's coursework tailored to their post-Acton plans.

[unex_ce_button id="content_z6hiefn7q,column_content_gb176yjn4" 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 50px 15px 50px" 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/voces" button_link_type="url" button_link_target="_self" has_container="" in_column="1"]PREVIOUS PROJECT[/ce_button]
[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/texas-campus" button_link_type="url" button_link_target="_self" has_container="" in_column="1"]NEXT PROJECT[/ce_button]

Define

DISCOVERY SESSIONS

An initial meeting with the client defined the project parameters including user goals and tasks. A second meeting was had with six students to discuss the current approach to coursework in the web app. The badges (roughly equivalent to a grade or class in a traditional schools) would be getting an overhaul to more closely show their post-Acton plans. We discussed with the students this system and their likes and dislikes about it. A final meeting with the students included them drawing out their ideal approach to the badge update.

Design

Wireframes

After finishing the initial discovery phrase, wireframes were created and iterated upon with the client. These early wireframes included 1) a "Mission Plan" page that would include, at a glance, all 4 years worth of high school badges with the students able to add badge deadlines and update badge progress and 2) a "Year" page with similar functionality but was pared down to include only 1 year. The images below illustrate the flow for the "Year" page.

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

Validate

Usability Testing & Prototype

Once the wireframes were approved, I outlined a series of questions for a usability testing script and created the below prototype which was used in the testing sessions with 9 students. The prototype was created in Axure and all testing sessions were recorded in Quicktime as an easy reference point to create a summary of the testing findings. 

  • gallery-image

Launch

Final Designs

In the testing session one bit of feedback we received was the amount of information on the "Year" view page was overwhelming. With an academic year including 6 sessions, the final updated designs included an additional "Session" view to minimize the information presented into "Badges I'm Working On" and "Session Goals Met."

[unex_ce_button id="content_nzfnv8pqv,column_content_07g65vp2n" 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"]PREVIOUS PROJECT[/ce_button]
[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/texas-campus" button_link_type="url" button_link_target="_self" has_container="" in_column="1"]NEXT PROJECT[/ce_button]