At OHO, we talk a lot about the importance of telling stories on your website. After all, it’s a powerful technique to demonstrate what your brand is about: you can convey outcomes and successes, showcase authentic people in relatable situations, and cross-promote other aspects of your brand and relevant website destinations.
In the past we’ve given advice on ways to effectively tell your brand’s story from the point of view of a content writer. But how will your users find those stories? What compels a user to engage with the story you’re telling?
Digital Storytelling Through Design
Ideally, we want a user to happily discover a story as they browse the site: a photo or headline catches their eye, and they’re intrigued enough to click for the full story. The story leaves a lasting, favorable impression, imparting new information or otherwise inspiring or influencing the user as they continue to engage with the site.
Will all this happen? Hopefully, but it’s not always guaranteed. We can, however, improve the user’s experience by presenting them with engaging moments on key pages that evoke similar emotions, even if they don’t click to read the full story.
Widener University — The Inside Track
One of Widener’s established brand themes was that of “The Inside Track,” which speaks to the university’s strong student outcomes and advantages in the job market.
We wanted to translate this theme to the website by breaking down the full story into short, meaningful snippets illustrating the pathway to their planned career.
Why it works:
- It reinforces the “Inside Track” brand positioning as a visual interpretation
- It’s eye-catching! The subtle animation displays each pathway point one by one, while the arrow animates a pathway that ends at the outcome
- Student success is promoted in a tangible format — this student graduated and is on track for the career they dreamed of
- It’s a quick read, so there’s less commitment to reading the full article, but it presents a very good summary
- The bold tone of each concise headline is inspiring and engaging
- It communicates to prospective students multiple aspects of what Widener offers: programs, facilities, internship opportunities, mentoring, clubs
- Showcases actual students, giving a sense of Widener’s student life
- The call-to-action is motivating. It leads to the article’s page, which presents the full article and a video for the same story, bringing additional visual storytelling.
- Including the recent year of graduation feels current and authentic, and thus more relevant to incoming prospective students
Bryant University — Student Profiles and Connected Community
With Bryant, we aimed to represent student life more dynamically to prospective students by highlighting students’ strong connections to faculty, alumni and each other. We also wanted to showcase the activities that define a student’s campus experience while tangibly clarifying Bryant’s unique learning approach that combines liberal arts with business education.
In this approach, users can pick from multiple student profiles from the homepage or landing page and reveal more details about the student’s chosen major, minor and extracurricular activities. Upon clicking through to the full profile, the user is connected to other student profiles through shared involvements, illustrating a well-rounded picture of student connection.
Why it works:
- Featuring a diverse group of actual students presents an authentic view of student life, allowing prospective students to see what type of people attend Bryant
- There are multiple opportunities to cross-promote aspects of Bryant. The “More than a Major” section highlights extracurricular offerings, while the detail page links out to academic programs
- The detail page reinforces the learning approach (2 majors + 1 minor = career path) which connects combinations of programs to what students can do with them
- Provides relevant content and illustrates the relationships between students within the Connected Community section
- It’s sustainable. This approach is meant to work across a wide variety of stories, and new ones can easily be added to stay fresh and current, all while enriching the connections between older stories.
Dartmouth College — The D-Plan
When we partnered with Dartmouth College to redesign their admissions site, one of the main objectives was to interweave student storytelling throughout the website. The Dartmouth team wanted to provide prospective students with an authentic view into what it is like to attend the college.
To accomplish this, first-person stories and photo galleries from existing students feature prominently on the homepage, degree pages, and elsewhere on the site, adding personality and legitimacy to the testimonials. Visitors can easily view profiles of student bloggers that contain a wealth of information, from bios, to story collections, as well as each student’s unique D-Plan (a summary of coursework and experiences that define their time at Dartmouth).
When users view a student’s full profile, the can see a timeline view of the student’s D-Plan and collapse or expand each year to get a complete sense of what their own experience at Dartmouth might be like — season by season.
Why it works:
- The student profiles — and the D-Plan — are a consistent design element throughout the site, providing multiple opportunities for users to engage with them
- The seasonal transitions found throughout the site are carried over to the Dartmouth experience represented in the D-Plan through color and iconography
- Each student profile features curations of stories written by the student, with large photography to draw the user in
Digital Storytelling, Moment by Moment
As these examples illustrate, you can employ a wide range of approaches to integrate digital storytelling into your website. When creating these moments, it’s important to keep them scannable, relevant to the page content and user needs, and generally engaging. By doing so, your storytelling can become a powerful influencer in demonstrating your brand positioning and what makes your institution special.