See Stories
Alaskan Youth Film Workshops
Summary
See Stories is a non-profit that teaches young Alaskans about native culture through film workshops and lesson plans. They build connections with their community by sharing stories and nurturing creativity. They host workshops for high school kids, teaching them how to research and create amazing videos about Alaska history.
The website did not reflect their current service offerings or showcase their mission and vision. It was difficult to navigate. Our team of 4 created a new website design to tackle these issues.
Duration: 15 weeks
Platform: Responsive Web
My role: Information Architecture & Usability. I focussed in areas that I had less experience to grow my skillset. I also worked on accessibility and prototyping.
Reading time: 8 minutes
Problem
See Stories ownership is concerned that teachers can’t find their website and don’t know about its programs.
They have an identity crisis, wherein their goals don't match offered products, and the current website doesn't support their proposed growth.
Design
People are confused about what the organization does, often leaving without exploring all the pages. How might we change the site structure and content to engage with users?
Goals
Match organizations vision to site structure. Create a solution that highlights their central offerings, with a focus on student made productions.
Solution
A focus on core values. Through card sorts and tree tests, we created a new navigation system that showcases See Stories' services while highlighting their values. We focussed on their mission, and from there, we updated their site hierarchy, workshops pages, story map, and news filters.
Outcome
We created a clarity and focus for the See Stories website experience.
Focusing on their mission and vision allowed us to achieve our goal while designing with a content-first approach.
Users were able to understand what the website was all about and navigate to the sections they were trying to find.
Discovery
The teacher persona
Busy teachers are busy. Charlene is a See Stories user and is often someone that has very little time on their hands–a teacher. The average teacher in Alaska is someone in their 40’s (74% female identifying), often accessing professional development information through a desktop computer. They find class ideas online, want to give their students access to real world experience, and agency to follow their interests. They want to be able to access a teacher focussed resource that will help them with lesson plans, workshops, and professional development.
The state of the current website
We spent a fair amount of time trying to figure out exactly what See Stories did. The non-profit's founder had plans to take the organization in several directions, but had a lot on their plate with fundraising and onboarding new employees.
Our team facilitated an affinity brainstorming session to search out growth areas when designing for a teacher like Charlene.
Affinity brainstorm where we grouped similar ideas together so we could begin to understand See Stories.
Concept model of See Stories in the domain of 'non-profit'. We needed to map out See Stories' relation to other oganizations and people to understand their role, interactions, and limitations.
Mission and vision unveiled
Since they had so many past and future projects planned—from podcasts to video workshops, to corporate training facilitation, we needed to uncover what their future plans were.
We interviewed a previous workshop attendee and board member to get a better understanding of the non-profit's history, goals, and motivations. From here we were able to get a sense of what See Stories role was within the government system as well as their connection with teachers and youth.
Ideating
Site navigation and context
Initial site navigation didn’t portray the content of the site. It was important for the client to showcase their new services.
Through our open card sort and tree test, we were able to create a hierarchy of content that made sense for users like Charlene, separating educator and youth pages, and renaming or consolidating sections (“Story Maps” became “Stories” and “Testimonials” combined with “About Us”). We created paths and updated category labels to funnel users to their desired location.
Open card sort from a participant with their chosen categories.
Card sort analysis. A notable discovery here was the amount of people that didn't know how to categorize the 'story map', which we would relabel.
A new path
"Get Involved" page?
In our initial iteration we had a "Get Involved" page, which housed donations, volunteer info, job opportunities, and project partnerships. Initial testers became confused by the amount of information on the page.
Combining "Get Involved" with "Home".
We found that this content overlapped with other page’s goals, so we removed the page and added a get involved section on the homepage instead. This would help cut down on overall site page count.
Splitting up educators and youth content.
We added a designated educators’ and youth sections. Previously, all offerings were compiled into one section called projects which didn’t communicate the content and requuired users to dig for content.
A look into accessibility
See Stories wanted their site to be accessible for all even though their current site had a few issues. After applying the companies first choice of color palette, I checked the contrast on our content to make sure it was AAA/AA WCAG compliant.
It turned out a lot of the colors were not WCAG compliant, so we had to rework and retest. We adapted our color palette to have more contrast and fit with their Alaskan inspure color theme. We matched our goal of AAA compliant on small text throughout our redesign.
Future sight
Delivering the final website design to the client was great but we understood that we needed to help them in the future as well. They wanted to be able to take our design vision and use it for social media posts, advertising, and branding.
We created a brand guideline so that new hires for their organization can understand the language and voice—better representing See Stories. We handed this off with the final designs.
Even though 84% of See Stories users accessed the website via desktop, we also wanted to create a responsive design for mobile.
Usability Testing
We conducted a remote study, which we divided into moderated (2 participants) and unmoderated sessions (15 participants) to test the clarity and findability of the information architecture and overall content.
Our goal was to understand whether our main features were intuitive, findable, easily accessible and if they, in fact, communicate what the nonprofit does.
We used a Figma prototype in Maze and used Zoom calls for the moderated tests.
• 87% of participants were able to get an accurate idea of what See Stories does.
• 86% of testers were able to easily find where workshop pages were located.
• 100% of testers were able to navigate to the educators page to learn more about professional development and workshops.
• Only 12% of users were able to find a specific workshop so we'd need to adjust the hierarchy of CTA's.
Before & After
<Slide>
Results
Vision unveiled. See Stories wasn’t showcasing their services and mission on their website.
Our goal was to show how See Stories provides professional development courses and workshop resources to website visitors like Charlene, the teacher. We wanted to do this by highlighting youth and teacher sections, while creating an intuitive navigation system. We strongly suggest that we achieved that goal.
Reflections
By working on usability testing and information architecture, I was able to work through some of my weaker areas and grow as a designer. In the future I'll be able to add real world insight to my projects.
We're in it for the long haul. Since it was a volunteer job and we all loved See Storie's purpose and goals, we could see ourselves maintaining contact, and helping them out down the road with design changes.
