A FRESH TAKE ON HOME LIFE

The Spruce

Timeframe:

Nov 2016 - Feb 2017

Role

Art direction
Creative direction
UI/UX design lead
Color palette
Design QA & Final sign-off

In 2016, Dotdash (formerly About.com) was in the process of creating new stand-alone brands by moving all of its content to newly built, beautiful, responsive sites from scratch. This was due to the business experiencing a decline in site traffic and Ad revenue. I was tasked to lead the designs for this project once again and work with a new cross-functional team . This was my 3rd redesign project in the same year!

To accomplish this massive task in just 3.5 months was extraordinary. The project kickoff and team workshop identified the goals the design needed to accomplish in-order for it to be a success. The following design principles and brand attributes were established after stakeholder interviews across the organization and then allowed key teams to vote for the most important goals the team absolutely had to achieve on launch day.

BRAND ATTRIBUTES THE SITE DESIGN SHOULD REINFORCE:

  • Natural, down-to-earth colors, textures

  • Unadorned images that translates honesty

  • Subtle embrace of flaw and imperfection

  • Avoid layout repetition (vary image sizes and layout configuration)

DESIGN PRINCIPLES

  • Emphasize breadth of The Spruce content

  • Embrace different activities and mindset of users

  • Design for active users not passive browsing

  • Inspire and encourage

  • Lead with visuals (show, don’t tell)

  • Build something beautiful and compelling but don’t over-polish

  • Cultivate feng shui for Ads

  • Be playful and fun

 

Early Brand Explorations

My team and I began visual explorations for representing the new brand. Early sketches of the logo mostly had visuals of trees due to the brand name “Spruce.” After testing various ideas, we found our answer for a logo that seemed to work. While the brand identity was coming to life, I again led the explorations of the entire site and all templates that would make up The Spruce experience. Below you can see the early explorations of article, document cards and homepage creation process.

 

Early logo explorations for The Spruce

Application of early logo studies and color on site navigation

Early mobile explorations of top of the project page experience (including color, logo, and typography)

Visual of a masonry layout of cards and the imagery we wanted on The Spruce

 

Signature Brand Attributes

 
 

Mapping out responsive behavior of component as needed for the developers to implement

 

Final layouts