SAVVIEST

Landing Page

Project Snapshot

I was asked to help with branding material. I set off to adjust their branding colors to being more professional and modern, and utilize layout design and graphic design to alter the landing page content.

RESPONSIBILITIES
PROGRAMS USED
DESIGN PROCESS
OUTCOME
  • Redesign landing page layout

  • Utilize created style guide

Sketch, InVision, Realtimeboard, Zoom

  • Understood goals of brand

  • Research modern layout design

  • Reference previous branding materials and layout design

  • Design several new layout designs

  • Blended designs together to formulate final product

  1. Created and distributed style guide for font and color use

  2. Provided product team with landing page specs

  3. Discussed possible opportunity for rebranding whole site

Goals of Brand

The goals for Savviest included:

  1. Delivering a brand that was professional but still fun.

  2. Target audience is early 20s to early 30s of all professions.

  3. Have different brand colors than other technology companies.

Previous Landing Page

COMMUNICATION AND VISUAL CONCERNS

Here are images of the previous landing pages and the "Why Savviest" link. My largest concerns for these pages included:

Concern: The call to action buttons are too similar to the background. This is problematic for marketing, accessibility, communication, visual continuity, and aesthetics. 

Solution: ​Slightly alter the brand colors to account for modern and fun personality of company as well as create a style guide to ensure consistency.

Concern: Font weights and sizes are inconsistent. This is problematic for communication, visual continuity, and aesthetics. 

Solution: Create a style guide for font sizes and weights for specific purposes to ensure consistency and to limit cognitive overload.

Concern: The alignment of the page. This is problematic for communication, visual continuity, and aesthetics. 

Solution: Use a grid and column layout system to ensure alignment.

Concern: The page layout spacing. This is problematic because it makes the user scroll through many screens to acquire basic important information. It also makes it tough for the user to understand that information is related.

Solution: Make related information more united through their proximity with one another.

Layout Exploration

In addition to the brand personality the product gave me, I began to explore what sort of emotions do I want the user to experience when they arrive at our landing page. The answer: confidence, trust, and enjoyment. There I began exploring various UI styles, mood boards, and layout designs. Below are a few exploration pieces.

Also check out the Savviest Brand Style Guide.

Final Page Layouts

After various landing page design iterations I found a solution that tackled all of my communication and visual concerns.

Final Notes

This was an excellent project in that I learned quite a bit more about creating style guides, layout design, and branding. I presented my work to the product team and they have decided that this is the beginning of a redesign of the entire product. Due to this, the landing page is planned to be developed in several months when the rest of the product's designs are ready.