Alaska Historical Society
Alaska History Day - Website Design
The Client
AHD, currently run by the Alaska Historical Society, is the Alaskan affiliate of the National History Day program - an educational curriculum and competition for middle and high schoolers fostering research, writing and critical thinking skills. Students create a project in one of several categories - documentary filmmaking, physical exhibit, etc. - which can then be entered in a statewide and national competition.
Role
Lead:
Client Liaison
User Research
Team:
Information Architecture
Interaction Design
Timeline
8 Weeks
The Problem
No Single Source of Truth (Plus 550,000 Square Miles of Alaskan Wilderness)
Although the program has been around for decades, it has never had a dedicated, independent website. Our team, consisting of four students from the Seattle-based School of Visual Concepts, was charged with designing that site. Among the features desired by the client, it needed to allow teacher curriculums, contest instructions, etc. to live on a single platform regardless of the program’s current sponsor or the participant’s location.
We knew from the client that there were two main challenges:
Disconnection
Since its creation in 1989, AHD has passed between a number of sponsoring organizations. Each of these transitions has slowed the program’s growth as the new sponsor had to reestablish a curriculum and operating structure.
Our design needed to give the program a single source of truth.
Isolation
Only 18% of Alaskan communities are accessible by road. Most states’ History Day programs can promote the program, coach teachers, and hold their contests in person. Alaska cannot. This also created a digital access issue - bandwidth-hogging media content could make the site inaccessible to remote communities with slow internet.
Our design had to be both comprehensive and lean.
This meant the main problem we needed to address in our site design was efficiency - the organization and presentation of our feature set. We needed to figure out which portions of those features were most important to the program’s prospective teachers and students, and how to delivery them as smoothly as possible.
Or, in a single question:
How can our site design get the most buy-in from potential participants?
Research & Ideation
Simple, Fast, Efficient
With this project’s short timeline, our user research needed to be quick and dirty. Our team conducted half-hour interviews with four current and former Alaskan teachers and one former Alaskan student, covering their tech use, experiences with the program, and thoughts on the classroom experience as a whole. I was responsible for writing the initial interview script, which was then tweaked with feedback from the team for the actual sessions. At the same time, my teammate ran a competitive analysis of the websites of five similar programs.
We Discovered 3 Key Points We Needed To Address:
Teachers Needed Accessible, Convenient Resources
The one constant narrative point we heard from our interviewees was simple:
Teachers. Are. Busy.
They found the additional workload of assembling a curriculum for the AHD program to be a major pain point. We therefore determined that quick and direct access to a teacher toolkit was key to the design. This took the form of a block of quick links on the homepage, with one leading directly to a hub for all the tools a teacher would need to get their class started with the program. Within each resource page, teachers would find a simple, accessible list of relevant resources for download.
The Quick Links block found on the home page
Educator resources are broken up by category
Educator pages provide resources in a straightforward, accessible format
The Sales Pitch Was Key
When it came to selling the program to both teachers and students, the demands were distinct but overlapping. Teachers needed to know the program was worth the effort they would need to put into it. Students needed to be inspired by the types of content they could create - our interviewees reported that seeing the work of previous students was the single biggest factor in getting kids excited for the project.
To this end, we made that “sales pitch” a key part of the site, with testimonial blocks featuring prominently on key pages. Our team member in charge of content design added a sales pitch to the main contest page. I designed a set of swimlane scrollers for the category rules & examples page that could feature past projects for students to browse through as they got started, or for teachers to bring directly into the classroom. In order to preserve bandwidth for remote communities, I conceived of these as downloadable files so that users could be notified of file sizes before loading multimedia content.
The Categories & Sample Projects page featured examples of past projects to get participants excited
Swimlane scrollers on the Categories page display previous contestants’ projects
Competition isn’t Everything
Another refrain we heard repeatedly from our interviewees was that the soft skills the program taught were valuable whether or not students submitted their projects to the competition. To support this, we included page designs for research resource directories to help the site serve as a one-stop-shop for students building their projects. To save space and reduce scrolling, I created those listings as small individual cards that could be expanded to access additional information. In order to push that same message of improvement from the teachers’ end, we also included a section for professional development webinars in the teacher toolkit section.
The Academic Resources page with openable resource cards
The Teacher Toolkit section featured a page for skill development workshops
Refinements
Debates on Architecture
The overall architecture of the site was an ongoing question for most of the project. Even as we narrowed down our feature list, we maintained a debate between a task-based model which I had championed, and an audience-based model. We built out a separate lo-fi wireframe set for each one, with the intention of running them through a round of A/B user testing before moving the winner to refinements and then usability testing.
That’s where we ran into a snag. The project had begun in August, and as soon as the school year began our user pool almost completely dried up (remember I mentioned teachers are busy?). With time running out and usability testers thin on the ground, I was able to convince the rest of the team that there was sufficient existing research to justify dropping the audience-based model and moving directly to usability tests on the task-based model. Those tests resulted in some minor reshuffling of features, but that task-based model became the final end state of the project. While it featured an increased number of pages over the audience-based model, it dramatically simplified user flows and gave the site a much less complex structure.
The audience-based architecture attempted to anticipate the needs of our expected user groups
Our final, task-based architecture had an increased number of pages, but much simpler user flows
Designing for Responsiveness
We approached the project from a mobile-first perspective due to our expectations of the userbase - students, teachers, and judges on the go and reliant on mobile internet. We knew from our research, however, that users on laptops and desktop workstations would make up a significant chunk of our userbase. With the short timeline of the project limiting our options for replicating a page-by-page design for wider screen widths, our solution was to provide examples and guidelines of how our designs should scale as screen width increased.
I collaborated with my teammate Andrew to scale our homepage design to a desktop screen width, while still relying exclusively on SVG imagery to maintain our goal of reducing the overall size of the site. Once we had a basic format, I then drew up mockups for the category and resource page templates at desktop screen widths. Next, I scaled those sizes back down to a smaller (1024px) screen width to account for legacy devices that might be in use at schools struggling with limited tech budgets. Finally, I included a component reference sheet which served as a sort of ad-hoc design system, documenting the purpose, sizing and spacing, and breakpoint behavior for every component included in our design.
The homepage at 1280px screen width
A shot of the component reference sheet I drew up
Results
In its end state, our design included full page designs for the entire mobile version of the site, plus a set of page templates for the major page types, like category pages and resource pages. In addition to the component documentation described above, I wrote up a set of design annotations, while my teammates assembled a visual style guide and content guide.
Stakeholder response was positive, with elements like the logo design already included in the program’s current web presence.
As for the site’s deployment, watch this space! The design is currently with the developers with a target launch in late spring 2024.
Leanna Prax Williams, Alaska Historical Society
I am so excited to see this get put into place and built out.
Levels one and two of the mobile site, plus mobile and desktop page templates
Reflections
I found this to be a really interesting project since it centered entirely around the question of “how”, without the “what” component that played a large role in my other case studies. With the basic feature set determined by the client, most of our time was occupied by the information architecture and interaction design aspects of the design process. I certainly learned a lot by spending so much time hyper-focusing on those specific areas.
The project also stood out to me because of how collaborative it was. Many of the components I mentioned putting together took their final forms while two or three of us sat in a Zoom call, with me assembling a component and saying “okay then, what if it looked like this?” while my teammates gave feedback. That process of doing individual work separately, then grouping up to collaboratively hash out specifics and tighten things up is really my favorite pattern for team work.