Adding fun UI to a wacky brand

The client requested a sub-brand, E.G. Smith, to be completely different from other brands. They wanted designs to emphasized the eclectic 80s style in a very “boring” standard eCommerce world.

Notes from Client:
Founded by Eric G. Smith in 1984, E.G. Smith is the home of the coveted Original Boot Sock. Our socks and legwear are knit and hand-dyed in our American workshops. We design exclusive seasonal collections and partner with brands who share our passion for the heritage and enduring style of the authentic E.G. Smith brand.

Tagline: Never settle for less than The Original.

Target Market:
This brand is a cult 80’s-90’s brand that is enjoying an underground revival. Businesses like Urban Outfitters are seeking it out. We want to elevate it to a position of aspirational, vintage cool. Definitely a unisex branding opportunity with focus on Millennials.

There are some adjectives the client used:

Cozy | Nostalgic | Quality | Organic | Authentic | Pure | Original | Classic

Hypothesis:
While the inner pages can remain very standard eCommerce, the store front should be bold in color, strong in type, and heavy on flat minimal illustration.

Competitive Analysis:
The client directed both the creative director and myself to start with Dr. Bronner as inspiration. From there, I did a competitive analysis for similar brands that are quirky, eco-friendly, and colorful. I looked outside the direct competitors to unexpected websites like events and even children education, which tend to be more playfuol.

Pattern Library Options:
For all my clients and projects, no matter how urgent the project, I always present a pattern library for approval from client. This can be called a style tile for urgent project or a pattern library, for a larger more comprehensive project. In this project, I kept the UI pretty much the same but showed variations in colors, type, and image usage. I worked with a creative director who created several of the icons she thought would work for this project.

Pattern library option 1

E.G. Smith pattern library v1

Pattern library option 2

E.G. Smith pattern library v2

Sketches:
While a client looks over the pattern library, I often sketch my ideas for the site on paper. This helps to make the design process even quicker once I get approval.

drawings

Design Options:
Designing the homepage helps to define many of the patterns and components necessary for other pages within the site. This includes margins, paddings, and type hierarchy. It also shows how UI components look when put together because sometimes, the pattern library or style tile may appear abstract to the clients.

Design option 1 & 2

Design option 3

Final Mockups:
In the final designs, the client came back and decided to keep the design in the same template as the other brands. However, they loved the color and its playfulness that they asked to somehow keep these “fun” and “wacky” feel into the template.

The UI components from the proposed pattern library were reused as well. This really helped to get the project in a few weeks. While the overall design research and brainstorming took about a month, the actual UI design only took 2 weeks, which included all the large screen, medium screen, and mobile screen designs.

Home page, listing page, pdp desktop and mobile

design desktop

mobile design

Checkout desktop and mobile

checkout desktop

checkout mobile