Company
SheKnows Media

Duration
May 2013 - July 2016

Role
Lead Product Designer

Category
Content Site

Brief

StyleCaster Media originally had 4 media properties; StyleCaster, BeautyHigh, DailyMakeover and The Vivant. With this refresh, contents from all these sites were getting migrated into StyleCaster.com to strengthen the brand and increase breadth and depth of fashion, beauty, lifestyle and entertainment content for young women. The site rebrand and redesign would set the tone for the new direction and would act as a vehicle to attract premium advertisers and additional readership. 

Process, Role and Challenges

The design kickoff happened in late October, 2015 and the site was set to launch by Jaunary of 2016. With extremely aggressive timeline and compeletely brand new stakeholders, I had to navigate through set of challenges to get this site live on time.

As a sole product designer covering everything from UX, UI to prototype, I created most of the skeleton work within 3 weeks time and iterated visual design along with editorial creative director in the remaining month and half. In addition, we were creating entirely new templates for special features as well as video pages which didn't exist in the site.

My duties entailed driving stakeholder conversation for product design and iteration, choosing the new typeface with creative director, giving technical design directions to offshore development team and design the property in its entirety from start to finish. 

Result

With little bit of push back for various reasons, the site was successfully launched in February of 2016. The site was well received in the industry and was nominated for The Webby Awards in fashion category. The site also attracted premium advertisers such as Tiffany and gained steady increase in readership. Currently, StyleCaster serves over 5 million monthly uniques.
 

Discovery Phase

After having initial kick off with various stakeholders, I began to analyze competitors in the space and created the list of pros and cons.
I presented these findings back to stakeholderers to verify the things that we want to build or remove for the refreshed site.

Buildling Skeletons

After collecting enough insights from stakeholders on their needs and wants, I began to create structure for the site. This was my second redesign for StyleCaster.com (first redesign happened in late 2013) so most of the design pattern was already in place. However, there were couple of new pages that we needed to build from the scratch.

UI/Visual Design

When all the wires were approved by stakeholders, I began to plug in photo assets and tweaked all the details until everyone was satisfied.
To kick off, the team selected typefaces, defined the font sizes and line spacing for various modules, set maximum image width for inline slideshow, set maximum image width for feature stories, and defined color scheme. When all the elements were decided, I began to iterate layouts for feed page, menu, article pages, slideshow, video section and many more. In conjunction, I also designed newsletter template, facebook instant news template, apple news template and google instant article template.

Prototypes

Before handing over to dev, it was imperative for me to creative motion prototypes to communicate better. This was especially critical since devs were all located in Russia and it was difficult to get the point acrossed just with guidelines with words. In addition, motion prototypes also helped significantly during stakeholder meetings to explain about the future builds. All of these are created in after effects. I prefer using Framer these days.

Feature Story Prototype

Video Channel Prototype

Video Article Prototype

Mobile Slideshow Prototype