HomeGrammy AwardsNFLWatch! MagazineCBS Internship ProgramJoymodeAbout

Watch! Magazine

PROJECT goal

To create a stand-alone homepage experience that captures the branding of Watch! Magazine while falling under the CBS.com core template.

Tools

JIRA — Project Management
Sketch App — Product Design
Prototype — Webflow
Slack — Collaboration and Communication

ROLES

Brandy Mayer — Product Owner
Amanda Fong — Senior Product Designer
Mark Rigney — Developer

Research

I start the project off by doing research around some of the most notable magazine publications. These brands include Glamour, Harper's Bazaar, and Vogue. I then create a mood board via Invision Boards and annotate special features about their product.

Glamour Magazine Mobile App

Minimalistic and clean

Clear

Type font size is small

Tab Structure

Notifications

Harpers Bazaar Mobile App

Colorful and bold

Weekly Carousel Filter

Score Only

Vogue Magazine Mobile App

Interactive Scroll

Floating Hamburger

Quick CTA to Watch

Tab Navigation

Challenges / Limitations

Prior to starting the project, there were some limitations and challenges that I had on the design and development side that might hinder the design process and solutions available for this project. These include:

Design

Must only use current asset images
Ad requirements
Design responsively
Stay within the 980/1230 adaptive grid

Development

Articles must fall within the current CBS template
Must be built within the non-responsive framework

Iterations

After gaining inspiration from my research, I jump straight into rapid visual ideation phase using Sketch. I collaborate with the Experience and Development team to get feedback on usability and technical use cases that may be overlooked.

Amanda Fong Watch Magazine Wireframes

Ideate

IT’S ABOUT GENERATING THE BROADEST RANGE OF POSSIBILITIES

The magazine's digital properties present readers with richer pathways to continue the journey beyond the velvet rope. Timely, behind-the-scenes videos and photo galleries bring the reader closer to their favorite.

Low-Fidelity Wireframes

Once the team and I have decided collectively on a solution, I then create low-fidelity wireframes to map out the content. Some requirements included staying within the adaptive grid of CBS.com's framework. I also had to use existing assets in the current CMS which limited me from altering the aspect ratio of the content images.

Visual Design

During the visual design phase, I apply Watch! Magazine's branding including colors and fonts choices. Although this site is not developed responsively, the design and experience remain consistent across devices.

Homepage - Desktop

Homepage - Mobile Web

Global Menu Flyout - Mobile Web

Prototyping with Webflow

I built a prototype of the desktop experience to present to stakeholders of what the finished product would look like. The development team was able to use this prototype to generate specs and clean code for the final product.

View Desktop Prototype

Result

The project shipped in July 2017 while meeting the business goals and requirements of the initial proposal. It's now live on the CBS.com core desktop and mobile platform.

view live site
next
Joymode
Desktop
Product Design
View Project
04
Joymode
Desktop / Mobile
07 . 2017

Amanda Fong

Amanda Fong