BACKGROUND

See Stories; is an Alaska-based nonprofit focused on teaching storytelling workshops for youth and supporting teachers' professional development.

The nonprofit had outgrown its website, so we re-designed it to reflect its growth and showcase its successes, community impact, and potential.

PROJECT DETAILS

Team project, worked with a content designer and two UX Designers.
Client, See Stories
Three months.
Designed at the UX Certificate Program, School of Visual Concepts, 2021.

my role

Led User Research and UI Design. Acted as client's point of contact and was heavily involved in Interaction Design and Information Architecture. Conducted user & client research, created visual guidelines and co-led wireframes and desktop prototype.

Original See Stories branding and website

ABOUT SEE STORIES

A nonprofit focused on creating an inclusive community that shares Alaska's diverse stories and lived experiences through storytelling.

Providing film and podcasting workshops for youth and professional development courses for teachers.

The CHALLENGE

See Stories's current website is getting in the way of its growth, as it hasn't caught up with all the new services, partnerships, and impact they've had. When teachers, funders, and students come to the website, they don't get the complete picture of who See Stories is.

Even though the organization is growing, its team remains small, so the website becomes essential in reaching more teachers and students as well as broadcasting Alaska's diverse stories to a larger audience.

Homepage Re-design

SHARING
SEE STORIES STORY

The re-design highlights its mission right away, so users understand what SeeStories does without scrolling down.

Added an impact section and brought testimonials to the homepage to highlight their effect on the community.

Created "The Latest" and "Welcome to Our Community" sections to feature their new services, recent work, and student videos.

I used gradients and wave-like elements to guide the user and reduce cognitive strain.

Educators' page: Listed all the services available
to them, as well as, upcoming workshops

Youth Workshops' page: Added information on past
workshops, as well as the type of workshops they teach

Content Library: Created a compendium of their past work, and re-designed their interactive map by region

Pages: Educators + Youth Workshops + Content Library

CURRENT LANDSCAPE

After user research I learned, that there's a disconnect between their website experience and their in-person experience. In-person users get to experience their impact first-hand. The problem is when the website is the first point of contact. Because the current site has a lot of missing information and the information that is available is almost impossible to find.

We used a combination of methods to asses their current website's state:

+ Heuristic Analysis
+ Site Analytics
+ Competitive Analysis
+ User Research

Findings:

1. Teachers are the main user:

See Stories serves students and teachers. However, teachers are the first point of contact; they go through the website to either look for professional development courses or a workshop to bring in for their students.

2. The site's structure confuses users:

Its information architecture doesn't follow navigation, interaction, and categorization conventions. Labels aren't clear, links don't work, and there's no consistency throughout.

3. See Stories is more than storytelling:

The nonprofit connects Alaska's residents with their cultural heritage, experiences, and history from their own perspective. It serves as a community glue that brings them closer.

design direction

NEW site's structure

We re-organized information to make it skimmable and added multiple ways to navigate within site.

Dropdown menu to give users a glance of the page's content

Re-labeled sections and reduced the number of pages

Created multiple paths to navigate within the site

Added filters to make finding content easier

EDUCATOR FOCUSED

Teachers must earn professional development credits throughout the year to remain certified. And their inboxes are usually full of alternatives, so for them to consider See Stories, they have to be able to skim through their offerings effortlessly.

From UX research we learned teachers are desktop users so we designed with a desktop-first approach.

Used teachers' lingo and listed number of credits

Added info about the type of workshops they provide, so teachers had everything they need to bring one in.

Responsive, with a desktop first approach

CONNECTING COMMUNITY

See Stories created a network that connects students to the Alaskan community, sharing their residents' diverse and otherwise untold stories to an even broader audience, and giving them access to other growth opportunities.

So we emphasized community and involvement over donations.

Quotes from research participants

Get Involved section

A new visual approach

As See Stories grows, maintaining a consistent voice and look across platforms will help them position as a trusted resource for teachers, students, and Alaska's residents.

I freshen up their visual identity to highlight their Alaskan origin and authenticity.

‍

On what makes them proud about See Stories

Propposed changes to logo

Updated Visual Guidelines

Accessible Color Combinations

behind the scenes

We conducted a remote usability test with 13 participants. While we learned users understood what See Stories is all about just by glancing at the homepage. We fell short at maintaining our web site's elements consistent. This was particularly confusing for participants using the interactive map. We didn't have clear labeling, navigation buttons, and states. Participants were unable to navigate the map.

We added navigation labels, button states, and text callouts to ground users. After re-testing the map interaction, See Stories current map was graded by participants with a 2.6. Our re-designed was graded at 8.4!