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.
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
Created and distributed style guide for font and color use
Provided product team with landing page specs
Discussed possible opportunity for rebranding whole site
Goals of Brand
The goals for Savviest included:
Delivering a brand that was professional but still fun.
Target audience is early 20s to early 30s of all professions.
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.
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.
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.