Digital Style Guide

After almost 130 years of business, Kroger finally hired it's first AOR to truly brand the company. When the brand book was handed to us we noticed major gaps around "how" and "why" to apply these new brand assets in the product space. Me and two others took it upon ourselves to collaborate with the brand, design system, and product teams to develop the Digital Style Guide to direct branding within the app and website.

1/5

Development 

1 - Test existing brand book guidance in blue sky concepts

2 - Gain leadership alignment on blue sky concepts

3 - Identify major themes from concepts

  • Color Application/ Color Blocking

  • Brand Assets (Kroji & photography)

  • Elevation

  • Typography

  • Working With Other Brands

4 - Workshop themes with key stakeholders

Open workshops with design team to gather wants and needs, opportunities, other ideas, and concerns.

 

Goal: Leave with alignment on high-level guidelines for each top covered in each workshop

5 - Draft Guidelines

Created actionable guidelines with specific direction on how to and not to apply elements,  and ensure assets meet standard for our spaces and apply UX & UI best practices.

6 - Surveys for feedback

7 - Revise and edit as needed

8 - Finalize & publish

9- Socialize 

10 - Maintain & evolve

Impact

Before DSG

Native Homescreen

Role: Designer
 

View more project  details here

Before.jpg

Store Locator

Role: Designer

After DSG

Pickup - Logged In - Post-Order Copy 12.jpg

Desktop Before DSG

Old-Desktop.jpg

Desktop After DSG

2 - Desktop Copy 5.jpg

Mobile Before DSG

Old-Mobile.jpg

Mobile After DSG

2 - Mobile Copy 5.jpg

Native

2- Native1 Copy 5.jpg
iOS-Savings.jpg

Savings Center

Native Only

Role: DSG Art Direction

iOS DSG Savings Center Signed Out.jpg