Role
Product Designer
Team
Melinda Yao
Skills
Information architecture
Competitive analysis
Prototyping
Competitive analysis
Prototyping
Tools
Figma
Timeline
Sep - Dec 2024
Overview
Special Editions is a branch of Columbia Daily Spectator, serving as a platform for exploring topics that resonate deeply with the university's diverse population. Like Black History Month, Commencement, and Homecoming, Special Editions curate issues that delve into significant themes and moments within the Columbia community and beyond.
TL;DR
Our design has shipped, and it is a special feeling to a real impact of my design. Feel free to visit our Special Editions page!
Scope
As our capstone project, Melinda and I chose to revamp Special Editions. The focus was not so much as to change the content of the page, but more so to explore ways to improve the landing page. We wanted to drive more traffic from the main CDS page into the Special Editions and encourage more readers to these articles.
Challenge
What is an effective way of displaying a bunch of unique articles?
The original version looked like a final project from an Intro to HTML course... The box images took up the whole screen, so it was oversaturated and hard to see the bigger picture. There was no visual hierarchy, making it confusing for visitors. Additionally, the page didn't remotely feel like a branch of the Spectator–its colors, fonts, and everything about it screamed "Not Spec."
So what?
Visual hierarchy & white space & brand identity
Since each article introduces a unique topic or event, we needed a clear layout. We also wanted to highlight a newly released article that gets published monthly. We also aimed to incorporate Spectator's colors.
Competitive analysis
I looked into Morning Brew since its target audience is young professionals in the MZ generation, which is similar to Spectator's target audience. I focused on Brew Markets because it offers a more focused scope in the market, just like how Special Editions has a distinct focus aside of the main Spectator page.
There were certain aspects that we could learn from Brew Markets:
1. Clean structure – though it had significantly more articles than Special Editions, Brew Markets didn't feel hectic or oversaturated.
2. Visual Hierarchy – its hero section introduced the most recent article. Other articles were accessible below the hero.
There were certain aspects that we could learn from Brew Markets:
1. Clean structure – though it had significantly more articles than Special Editions, Brew Markets didn't feel hectic or oversaturated.
2. Visual Hierarchy – its hero section introduced the most recent article. Other articles were accessible below the hero.
Lo-fi mockup
The effective usage of white space guides the reader's eyes to images and headlines, making the user flow from the main page to individual articles more intuitive. I incorporated a gird-like layout so that a reader can look at more content without scrolling through.
Exploration
Half-way through the project, Head of Product requested for an incorporation of digital archives as a part of the Special Editions page.
Digital archives and Special Editions were two completely different entities, so we had to figure out a way to put them in the same place but make them distinguishable. We decided to try differentiating the shape of article boxes; since archives looked more like actual newspapers, we preserved the verticality for the archives.
Digital archives and Special Editions were two completely different entities, so we had to figure out a way to put them in the same place but make them distinguishable. We decided to try differentiating the shape of article boxes; since archives looked more like actual newspapers, we preserved the verticality for the archives.
.png)
Click-through rate
Increasing visibility from CDS main page
Another goal for this revamp was to encourage a higher traffic to Special Editions from the main page. We thought of a way to increase visibility, and selected an eye-catching color for Special Editions on the main hero.
