CORRI MCFADDEN

After building a highly visited fashion blog, Corri McFadden—fashion influencer and VH1 personality—needed to evolve her digital presence to support her growing brand and newly launched jewelry line.

The new site combines editorial content, video features, and e-commerce into a cohesive, content-rich platform. The result is a modular, easy-to-use experience that fluidly integrates her blog, television segments, and storefront.


Fashion Editorial Publication & E-Commerce

What I did
Art Direction
Web Design
E-Commerce (Shopify)

Results

Research & Strategy
Art Direction
Design System Designer
UI/UX Design
Photo Editor

Timeline

8 Weeks

Results

The Audience

Fashion-Forward Trendsetters

Corri's site attracts women with a high-end designer taste, looking for style inspiration and staying up-to-date on the top social events happening around Chicago and New York.

Mood & Photography

Photography is imperative in setting Mood Boards

Since Corri's site relies heavily on images and videos, it was pertinent that we assessed what we were working with. Imagery is the biggest contributor to the mood of a site, and usually defines the color palette. Corri's style had established a very clear color story and provided us with a more cohesive direction for future photography.

Starting with Corri's images and existing logo, it became clear that the overall site design would need to be minimal so that her content could shine.

Branding & Identity

Styles & Typography

Corri needed a typeface that was tough and a bit elegant, which is why I chose two different typefaces. Yanone Kaffeesatz is a strong and slim typeface that works great for headlines, while Alegreya has a nice delicateness that looks great as body copy and has a beautiful italics.

Site Color Palette

Working with the graphic, high-end feel of my findings, I chose to work with a mostly black and white color palette. This will allow Corri's photos to stand out and be the prominent color on each page. There is a tiny pop of pink in Corri's logo, so that can be used very minimally as an accent color.

Web Design & User Experience

Original Blog

Corri's original site was created to be more of a scrolling blog format, but since she was pivoting her content strategy, the format needed to change. The new site needed to be a high-end fashion site as well as e-commerce store for Corri’s jewelry line. The design should be less “blog-looking,” and more like a publication so that featured content (ie. videos, photos, social media, etc.) will fit seamlessly within the framework. The new site should also have the ability for users to easily access and use the store, while still feeling like it's a part of the main site experience.

Site Goals:

Mobile-First/Responsive
Cohesive Branding & Design System
Increase Engagement Metrics
Increase Overall Usability
Establish an easy-to-use shopping experience

Sitemaps & Flows

Since this site was going to be a lot more complex than her last, we took stock of her content and created a sitemap and general flows.

After speaking with the developer, we decided it best to use WordPress for the main site and Shopify to handle her e-commerce.

Sounds like it'd be a little "detached" feeling, using two different CMS, right? It actually came out really seamlessly and users never felt like they had left one platform or the other.

Layout & Design Explorations

Early layout and design explorations helped us to see the various ways we could incorporated fashion posts, social media, and store features. Since Corri's site is very photo-based, it was essential to mock-up these wireframes with actual images from her current site.

Wireframes & Design

Home Page

After looking at the design explorations, we decided that this layout best featured all of the different content types in a high-end, elegant way.

Home Content Wireframe

Home Page Design

Seamless Social Media Integration

Instagram

Corri's latest Instagrams would populate at the bottom of the page, or she had the option to manually change them. Manual was best, especially if she was focused on creating a hashtag feature or wanted to curate the look of what was shown.

Twitter

The latest tweet would auto-populate but, in order to maintain the structure of the grid, the tweet would ellipse if it got to be too long.

About Page

The second most highly trafficked page of any site is usually the about page. We wanted to ensure that Corri's about page contained not only her bio, but also her brand collaborations and press sections. We wanted this page to provide a one-stop shop for anyone looking to get to know her brand better.

About Content Wireframe

About Page Design

Category Pages

Under Corri's main navigation she had a category list of featured columns she regularly curated. In order to keep these pages feeling consistent, we templated their landing pages & each post page.

Category: Must Haves

An example of an interesting category was one deemed "Must Haves." This page allowed her to generate a unique url to create a curated online shopping list. When users make a purchase from the links on Corri's site, she gets a percentage of the sale. Affiliate sales with unique codes.

*This is not her storefront.

E-Commerce Store

Corri's storefront needed to clearly display her new line of jewelry. We chose to create a simple, user-friendly shop that still brought in the look and feel of her main site. In the top right corner you'll notice a clear cart notification. Custom designed headers were created utilizing existing photography.

Product Page

Each product page had an image carousel to the right where users could flip through the product images.

Below the product feature is a "You Might Also Like" section of related items for the user to explore.

User-Friendly Cart

When you click on your cart in the top-right corner, you land on the cart page with a visual list of your items and a summary of your order. Each item is easily removable and qty adjustable. Clear call-to-action to checkout or continue shopping if you'd like.

Post Launch Results

10K+

Average Monthly Visitors

3+

Pageviews/session

3+