Photography research & production
When you’re working with the National Parks Service, there’s never a shortage of beautiful imagery. But since we couldn’t use it all, we had to sift through to find the best of the best. The best as in best quality photography, but also the best as in what would look best in the digital
Oxford University Press
celebrating 100 years of the national parks service
To bring the 100th birthday of US National Park Services to the forefront, Oxford University Press partnered with Filtro Designs to develop and design a digital user experience that would treat fans to a swath of amazing, scholarly content associated with the National Park Service.
My role
UX & UI designer
Managed engineering team to build website
Coordinated both Visual Quality Assurance and Functional Acceptance Testing
Client acquisition & relationship
Development
Year
2016
Goals and background
My relationship with Oxford University press dated back for many years, so in 2015, when the National Parks Service was on the cusp of its centennial, they came to us for a big idea and an even bigger execution. They were looking for a way to celebrating the occasion and to use it as a platform for the promotion of their archives, along with some new, engaging content.
It was an exciting opportunity for us to venture into both unfamiliar and fertile territory. It was a chance to share Oxford’s rich and historic library with a newer, younger audience, and allow them to take advantage of the relevancy of a moment, as per modern digital best practices. The goal was to provide users with new ways to discover relevant Oxford content and provide fun, unique and genuine ways to celebrate the occasion.
The problem
We start our discovery process by asking a lot of questions. Here are some of questions that guided our process and led us to the decisions highlighted in this case study.
-
How do we build a platform that presents Oxford’s scholarly content in a visually-interesting way?
-
How do we promote the richness and exclusivity of Oxford’s content?
-
How do we give Oxford a clear presence within the experience, while still making it feel like a celebration and not an ad?
-
How do we make sure to touch on all of Oxford’s 10 distinct products?
-
How do we make the platform editorially accessible for Oxford’s marketing team?
Research brand and content
In the first phase, we worked with the Oxford team to collect and categorize all content that would be relevant to the National Parks System. Needless to say, there was a lot to sift through! But while all of it was relevant to the cause, we couldn’t simply throw it all together.
Oxford’s role would be to celebrate the centennial by using its library to educate users and allow them to experience the wonder of National Parks in a fun, engaging and never overly-promotional way. We needed to pick out the best pieces and organize them so that each leg of the user experience was a new discovery, and nothing would ever feel overwhelming or repetitive.
Powerful Interactive Maps
Flexible page layouts
Content Cards
rich stories incorporating imagery
widgets to promote related content and Oxford products
Define high level functionality and requirements
Now that we knew what kind of content we’d be working with and what purpose that content would serve, I could begin deciding which kinds of functionality would best bring that content and the entire experience to life.
We knew we wanted content for all 450 of the national parks, so we designed individual cards to determine the theme for each piece and what it would look like. Cards are a flexible UI element that displays information in many different ways - a perfect metaphor for what the site hoped to accomplish.
Content cards
When you first start with a project, you need to get down to the core guiding themes that will inform all of the pieces that break out to create the content and the user experience. So we started with the smallest elements of the project and the little details.
The micro structure
In order to properly brand the experience and make sure that users knew who was providing it, the Oxford logo needed to prominently live on every page, but in the least disruptive way possible. The logo was treated in a way that would make it stand out to users as they journeyed through content, but also feel like it was sewn into the fabric of the overall design. By creating a strong visual connection between the National Parks content and branding, Oxford’s presence never felt intrusive or stamped on.
Identity
color palette
A great color palette will be beautiful enough to invite the user’s eyes to scan as much of the page as possible. A modernization of the Oxford brand called for bright colors, but in order to match the aesthetic of an American park, we wanted the colors to be as cool and organic as they were vibrant. Solid greens and blues, with some beiges and grays mixed in, struck a symbiotic balance between our need to pop and our need to feel natural.
cool green
hex 2BC394
sand
hex EAE8E1
beige
hex C0B9A1
oxford navy
hex 211E36
stone
hex 283033
warm gray
hex 657175
Typography
Typography presented another opportunity to strike that desired balance - a noble and historic brand, now living in a modern and digital space. Abril-text, a serif font, provided the noble elegance that one might expect from a brand like Oxford, while Aktiv-Grotesk kept the experience fun and light-hearted. A perfect metaphor for the National Parks System, with its timeless, understated beauty.
The macro experience
Once we developed the basic foundation for the content and small details of the site, it was time to zoom out and start visualizing the user experience and journey.
The wireframes helped us connect all the content together. Although this is a large website, the core content types are fairly simple. Ultimately, this structure gives total flexibility to OUP’s marketing to combine cards and craft engaging stories.
Wireframes
Sitemap
The site map shows how content cards can be used on individual parks and stories.