To create a stand-alone homepage experience that captures the branding of Watch! Magazine while falling under the CBS.com core template.
JIRA — Project Management
Sketch App — Product Design
Prototype — Webflow
Slack — Collaboration and Communication
Brandy Mayer — Product Owner
Amanda Fong — Senior Product Designer
Mark Rigney — Developer
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.
Minimalistic and clean
Type font size is small
Colorful and bold
Weekly Carousel Filter
Quick CTA to Watch
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:
Must only use current asset images
Stay within the 980/1230 adaptive grid
Articles must fall within the current CBS template
Must be built within the non-responsive framework
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.
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.
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.
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
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