Navigator
55 Years of Print
to a new normal.
The Navigator is a student-run magazine and news outlet. In 2020, Vancouver Island University announced that the 2020/2021 semester would adopt an online hybrid learning program. This left the future of the magazine in question as well as the jobs of the magazine's design team. In a time where the value of design seemed extraneous, our design team and I redesigned the brand and website as a means of telling new stories in a new normal.
Type
Website
Identity Design
Timeline
3 Weeks
Tools
Adobe XD
Adobe Illustrator
Featured
Typewolf
Fonts in Use
Result
thenav.ca
BACKGROUND
The Navigator Student press has been Vancouver Island Universities newspaper turned magazine, for over 52 years. Every year the publication prints out 8 editions, with weekly articles on their website. During its 52 volumes, The Navigator became a beacon of guidance and community for the university.
CONSTRAINTS
With any company that has been around for 52 years, Navigator has a very established brand. They also have a very established readership at Vancouver Island University. Readers had an expectation of what the Navigator brand meant to them and so this became a challenge to overcome.
Additionally, we received board approval to start this project and hire a developer 3 months into the 5 month period of time we had set out to re-design the visual identity and website. This left us with less than two months to research, strategize and implement a new website and identity.
UNDERSTANDING THE NAVIGATOR BRAND
We began our initial research by spending most of our time getting familiar with the Navigators brand identity and vision. The primary objective of the project was to convert their website into the primary touchpoint a user has to their brand, and so this had to be done with the utmost amount of respect and care to make sure users didn't lose trust in the brand. To summarize our understanding, we used a phrase the Editor in Cheif at the time said “When you're lost, look for the Navigator."
↓ Photo of Previous Website
TARGET AUDIENCE
From the surveys we conducted with readers of the Navigator and the Data we have from the social media analytics, the majority of the readers can be segmented into two user groups:
- Current University Students, most commonly within the bachelor of the art department of VIU
- Faculty members of VIU
INSIGHT
From our research, we identified three areas in which the Navigator brand and website could improve upon:
- Stability in Brand and Visual Identity
- Improving accessibility through mobile-first
- Creating a reader-friendly experience using UX practice
STABILITY IN BRAND AND VISUAL IDENTITY
Because the Navigator is student-run, the brand is often left to Graphic Design students to annually redesign as a branding exercise. We quickly realized this creates fluctuations of users trust in the brand. To counter this we designed our visual identity heavily based on what the Navigator had looked like in the past. But also looking to what the current writers want the Navigator to be.
We picked a font that felt established yet contemporary to act as the brand's logo and masthead. From there we picked complementary typefaces that would provide contrast the masthead without feeling too serious or stark. We also looked at typefaces that would be readable for long periods of times on articles.
Historically the Navigator has always switched between a blue or red colour to use as a primary brand colours. So to follow this historical dichotomy, we decided on Coral and Teal colour palettes with off-white and dark purple to accent the two. This would bring all of the elements of the Navigator's Visual Identity to a unified sense of brand.
Brand Palette
Eklektyk Regular – Headline typeface
Obviously – Subhead typeface
Degular - Text Typeface
IMPROVING ACCESSIBILITY
THROUGH MOBILE-FIRST
From the data that we had collected from the previous website, a large portion of readers were using their mobile devices to read articles. These users were often students finding a quick minute to read a single article. Our users on desktop, however, were often spending more time on our website, often reading multiple articles. This insight lead us to design mobile-first before designing a more immersive reading experience for users on desktop. This allowed us to create a website that is more accessible and easily scalable on any mobile platform or web device, while simultaneously improving the accessibility and reading experience for both user groups.
CREATING A READER-FRIENDLY EXPERIENCE
USING UX PRACTICES
By utilizing fundamental editorial design skills on a digital platform we set the blog post template to use a two-column system. One in which images and pull quotes would stick to the top of the margin, and another for body copy and inline pull quotes. This mimics the experience of reading a magazine spread in such a way that also improves the scannability and usability of the website.
When designing mobile-first we decided that a carousel would be the best way to remove visual clutter while following a mental model our primary user group would understand. Swiping left and right. Throughout the website, patterns are often reused or flipped. By doing following all three on the homepage, we're reducing the cognitive load for the user, improving the usability of the reader's experience.
WIRE FRAME
With the research and UX strategy compiled I went on to designing the wireframes and high-fidelity website prototype.
High-fidelity
METRICS
On the day of the website and rebrand launch, the new website saw a 241% increase in readership. We're still collecting data on the website re-design, so please come back to this case study at a later date!
WHAT I LEARNED
This has probably been the largest continuous project that I've directly played a lead role in. From acting as the Creative Director in the strategy and branding phase to personally taking on the UX Strategy and UI design of the site. This was also my first time working alongside a team of developers, a copywriter, a board of directors.
Once the main touchpoints had been completed, I stayed on as the brands Creative Director to oversee the output of social media content, video content and newsletters. The Navigator is in a transitionary period, from print to digital and for me to be able to coordinate and strategize this transition has been a huge learning process as a designer.
Currently, we're undergoing our third round of revisions with a team of developers to make sure that when I'm out of school and I've left my position as Art Director the website will be in good hands.
We were terrified about losing our jobs at the beginning of this project. We had thought that the value of design had completely ended for the company. But instead, we used design to spearhead the brand's transition from 55 years of print, to a new normal.