Oregon Extension | Jackson Vaughan

Context

Getting to know the "OE"

Life on the Mountain

The Oregon Extension is a small live-in campus in the mountains of southern Oregon. Due to its isolation, during the height of COVID it was one of the few places where a community of around 30 students and faculty could interact normally by maintaining a strict quarantine bubble. Because of this, I worked there not as an outside consultant but as a participant observer.

Most of the other students were my age, so I lived in the same cabins and, by faculty request, spent the first month following along in their curriculum. This immersive experience was both fun and gave me deep insight into the OE Program’s values and character as a client.

Problem Space

Digital Footprint

A key concern for the Oregon Extension is recruiting students for the next semester. While their Instagram account effectively showcases slice-of-life moments on campus, their website is needlessly complex and aesthetically lacking.

Refining their visual presence would reduce barriers and better attract young people accustomed to high-quality design in a competitive digital landscape.

User Research

Student Interviews

Approaching the website redesign meant understanding who the primary users of the site were and what their experiences of it were so far. I conducted several interviews with students asking them about their experience learning about and applying to the OE, with a special focus toward website interaction. A few themes came up: 

Colin

"Most of the stuff I heard about from the OE was by word of mouth, from Hope students who had been super enthusiastic about it, and that I’d sat down and talked with, or through [Staff] Seaton or Star. But like the website itself I wasn’t able to find as much of that information."

Matilda

"I would sometimes check the website to try and see what the readings were and get more information, but I think I mostly got most of my information from the conversations, and emails with [student coordinator] Star, and it felt like more of a personal connection than like 'Here’s a website, here’s the information'. Which I preferred because it felt like 'We want you specifically' not like 'We want students'."

James

"In terms of pain points involving the website, it wasn’t the easiest to navigate. The home page felt kind of empty, because none of the stuff there—I clicked on all those various links and none of it was what I wanted, like I was trying to find a packing list. It took me longer than I’d like to admit to find a packing list."

Insights

While the website itself was clearly not very effective by itself, people did appreciate the human connection that the faculty and staff afforded the students. OE faculty were not relying heavily on the website to provide information, but rather bore most of the weight of it themselves through college visits and zoom presentations, or benefited from the alumni network spreading the "good word" on their behalf. While often a positive experience for students, this creates somewhat of a bottleneck for a limited crew of permanent faculty at the Oregon Extension

Intervention

Solution Guidelines

Through these interviews and my own observations I saw three distinct channels for improvement of the site:

Clarity

Improve overall navigability and content organization strategy. Align visuals with messaging.

Modality

Improve mobile and non-desktop experiences.

Connection

Increase warmth and human touch in website with the addition of more images and testimonials.

Benchmarks

Educational Programs

Interlochen, University of Illinois Chicago

I looked to Interlochen (an arts boarding school) and UIC (a state university) as benchmarks because they both have similar goals and data sets to the OE site. Both sites are good examples of balancing calls to action, visual hooks, and more detailed information for a pluralized audience.

Photo-forward, Nature-focused

Banff & Lake Louise Tourism, Plantible

The natural world surrounding the OE is a critical part of both the curriculum and the appeal for college students looking for a beautiful change of scenery. Banff and Plantible's sites were both good examples of leading with bold imagery in a way that the OE could also leverage.

Information Architecture

Breaking down the existing content

As many conversations with students revealed, people were confused about where to find things. Certain pages were nested within others, didn't have the information they thought they would, or were dead ends that failed to point them to other pages that they might be looking for.

In light of this, I concluded that reducing "silo-ing" of information and instead having fewer pages with more sections—relying more on internal navigation with anchors—would prevent the tedium of having to dip in and out of pages to try and find what they're looking for. I began by auditing the site to itemize discreet pieces of content, then re-organized them into more sensible buckets.

User Sessions

Seeking user perspectives, I invited students to participate in a card-sorting and creation exercise, asking them to group virtual sticky notes as they would expect to find them.

I also encouraged them to contribute new ideas for information or content that they wished were on the site today.

Results

After building out wireframe versions of the site using the IA models developed by session participants, I drew from each of their strengths to synthesize my own model that best met the three guideline values I had set for the project.

Look and Feel

Going back in time

One notable aspect of the Oregon Extension experience is the fact that during the school week students are expected to relinquish their phones and internet access on their computers is severely curtailed outside of online research.

This policy is meant to encourage a more basic way of living free from distraction. It provides a rare opportunity to simulate the experience of past generations while still paying attention to the issues of today in their curriculum.

Past Meets Present

In keeping with that goal, the program director encouraged me to draw inspiration from the Works Progress Administration national park posters, which were done in the 30s to advertise great national parks. Part of the charm of those posters was the fact that they were hand-painted and created using imperfect analog techniques, an effect that isn’t readily created by digital means.

The challenge of this project from an aesthetic perspective was then to convey that sense of the past but also include beautiful contemporary photography of the program. In other words, balancing the old with the new.

Process + Iteration

Content Restructure

In reorganizing the content of the site, I focused on consolidating many isolated pages into fewer, more comprehensive ones.
I also tried to introduce more links to other parts of the site where relevant. This approach reduced the cognitive load on users, allowing them to find relevant information more quickly and efficiently.

By grouping related content together, I eliminated unnecessary clicks and simplified the site’s navigation. This not only streamlined the user journey but also ensured that key information was presented in a more intuitive and accessible manner.

Responsive Layout

[data-wf-bgvideo-fallback-img] { display: none; } @media (prefers-reduced-motion: reduce) { [data-wf-bgvideo-fallback-img] { position: absolute; z-index: -100; display: inline-block; height: 100%; width: 100%; object-fit: cover; } }

Though the website’s “responsivity” may not attract applicants on that fact alone, it does seem more likely that a negative experience with accessing the OE page outside of a desktop or laptop could turn away students accustomed to more aptly calibrated mobile sites.

Ensuring the website is responsive and user-friendly across all device sizes not only meets their expectations but increases the chances that someone will engage with the site for longer.

Focus on Visuals

With such a “place-centric” program as the OE is, placing high-quality images at the forefront is crucial to capturing the essence of the experience. Photos of students hiking in the mountains, walking the Oregon coast, studying in their cabins, or bonding around campus chores instantly evoke the sense of adventure, community, and learning that the program offers.

Those visual elements create a more immediate emotional connection, allowing prospective students to envision themselves in these moments, which is far more impactful than reading about them in lengthy text alone.

By focusing on strong imagery paired with meaningful descriptions, the website becomes not just an information hub but a compelling invitation to apply and experience the program first-hand.

Results

Design System

Overview

The final design seeks to balance historical aesthetic touchstones of both “The West” of the US and the Oregon Extension’s itself--while avoiding an overly “retro” approach or one that relies too much on skeuomorphism--with contemporary photography and an open and user-friendly interface.

Visual Motifs

The site invokes the style of the WPA national parks posters by using an illustration of a mountain using 2-tone contrast relief.

The OE was first started in 1975. By using texture overlays and blend modes, digital photography appears more like vintage film photography from the 1970s, with higher contrast and more saturated colors, harkening back to the inception of the program.

Color System

A color scheme of natural colors aligns with both the palette of the aforementioned national parks posters as well as the 1970s.

Typography

For the site typography I used ITC Souvenir as a display typeface and paired it with the subtler Libre Franklin to balance the lower end of the type scale.

Libre Franklin, a web redesign of the classic Franklin Gothic, serves as a nod to both the history and enduring relevance of the land the program sits on. Originally created in the early 20th century, Franklin Gothic was designed to be bold and modern, and Libre Franklin retains this spirit while being optimized for contemporary web use. It has a timeless appeal, making the content accessible and engaging, but remains a typeface with deep roots in American design history.

Complementing this, ITC Souvenir was selected as a homage to the program’s own history; the de-facto program sign, unchanged since the 1970s when it was crafted out of wood, uses ITC Souvenir as its typographic reference. This choice not only connects the website to a specific piece of the program’s physical history but also evokes the era in which the program itself was founded in 1975, as Souvenir was an exceedingly common typeface in that decade.

Project Assessment

Clarity

To improve clarity, I streamlined the website's structure by consolidating content into fewer pages, reducing unnecessary complexity and making information easier to find.

I eliminated redundant copy, ensuring that each page communicated its purpose effectively without overwhelming users.

Lastly, I introduced contextually relevant links throughout the site to break down information silos and guide users intuitively through their journey, anticipating their needs and facilitating a more cohesive experience.

Modality

I made sure the design was fully responsive across a comprehensive range of common breakpoints, allowing it to adapt seamlessly to various devices. By specifying interactions tailored to the unique affordances of each device type, the design maintains usability across different screen sizes while also leveraging the strengths of each modality, whether it’s touch, mouse, or keyboard input.

Connection

I focused on enhancing the emotional appeal and relatability of the website by placing photography front-and-center. This visual approach helps prospective students connect with the essence of the program on a personal level.

I also integrated testimonials into the content structure, allowing real experiences from past participants to resonate with visitors, attempting to replicate some of the way alumni word-of-mouth has worked for the program so far to attract students.

Improving the Oregon Extension website and brand identity