Fashion Website Redesign

Client: Adrienne Borgersen, Editor-in-Chief, LA Fashionista Compassionista

Link: lafcnyc.com

Project Overview

Founders Adrienne Borgersen and Lois Eastlund, an image consultant and fashion designer, respectively, started LA Fashionista Compassionista (LAFC) in 2014 when they saw a need for a platform dedicated to vegan, cruelty-free fashion and beauty. Catering to the growing demand for stylish and ethical alternatives, the online magazine is published quarterly and is made possible by a supportive community of writers, models, photographers, designers, and of course – their readers.

The initial LAFC website was built with a standard website builder software, which had limitations. It was plain-looking and didn’t project “style” and “fashion.” The old website was not well-organized and didn’t allow for interactive features, such as reader feedback, a current blog, or social updates. It was also not responsive, making it difficult to navigate and read for mobile visitors.

Adrienne needed the new website to improve the email capture process, be easy to maintain, and look stylish and beautiful. Most of all, she wanted to feel proud to promote her website – one that would match the caliber and aesthetic of the magazine itself.



Process Summary

Technologies Used:

  • WordPress
  • MailChimp
  • Adobe Photoshop
  • Adobe Dreamweaver
  • HTML5/CSS3
  • PHP

Credits:

Adrienne Borgersen: Logo, Photographs, Written Content (Blog posts & pages)

Linda Albertini: WordPress set up, Child Theme design & development, MailChimp integration, Plugin integration, some Photograph editing, some Copywriting 



Process Details

The Kickoff Call

The client and I discussed the issues with original website and her desired outcomes for the website “makeover.” I typed up my notes from our conversation and checked in with Adrienne to make sure we covered everything and were on the same page moving forward.

LAFC’s target audience is comprised of fashion-forward women who are vegan, environmentalists, and/or generally concerned with where their clothes and beauty products come from. Adrienne wanted the new website to match the look of a proper fashion magazine and entice new visitors to subscribe.


Content Inventory

I typed up a content outline to plan out top-level and secondary pages, brainstorm content placement, and identify any new content that would need to be created. I weighed options for which platform to use for the new website. Given the client’s goals, we decided to go with WordPress, which would allow Adrienne and her team to regularly share news and events with their readers.


Research & Brainstorming

Adrienne really liked the look and feel of Vogue, Elle, and other top fashion magazines. I visited their websites and took screenshots, noted any common themes, and thought about how the best features could be incorporated into the LAFC website.

LAFC website process - Linda Albertini Web Design

Some of the main elements that stood out to me while researching websites for fashion magazines included:

  • Large typographic logo in the header with a neutral, contrasting background color
  • Large photos of models or celebrities near the top of the content area / above the fold
  • Easy to find “Subscribe” area

Below are some wireframe sketches for the main page elements (I toyed around with a few variations on the footer):

LAFC website process - Linda Albertini Web Design

LAFC website process - Linda Albertini Web Design


Building in WordPress

Since we didn’t want any downtime on the original website during development, I installed WordPress in a subdirectory for the new site. From there, I created the top-level pages and navigation menu, then added all existing content available.

I browsed and tested different WordPress themes that could be suitable for LAFC. After evaluating the pros and cons of each, I went back to the default TwentySixteen theme, created a child theme, and started customizing it from there. I chose to build under the TwentySixteen theme, because it was responsive, didn’t have any complicated bells and whistles, and had more documentation to help me hack into the code.

Lots of testing, tweaking, and re-testing for this part!

LAFC website process - Linda Albertini Web Design


Adding Plugins

To display our hero (or heroine) images, I found and installed a suitable slideshow plugin for the “Home” page. Here we added fun photos from the most recent magazine shoot, as well as a promo video underneath.

Because LAFC is a small magazine, Adrienne wanted to add a personal touch and help her readers connect with the team behind it. After testing out a few options, I found and installed a suitable plugin for managing team member biographies on the “About” page. I filled in the photos and bios where available and used placeholder content elsewhere. I enlarged the headshot image size by modifying the plugin stylesheet, cropped and enhanced the team members’ profile photos, and re-sized them to the proper dimensions. Pictures that are bigger would just take longer to load and potentially frustrate visitors.

LAFC website process - Linda Albertini Web Design

LAFC website process - Linda Albertini Web Design


MailChimp Customization

Adrienne’s main goal for the website was to acquire new subscribers for her magazine. She was already using MailChimp on her original website, but the signup area was not compelling or attractive. It had 4 form fields, one of which asked visitors to choose between “html” or “text” email formats – confusing for the average gal.

For the new WordPress site, I added a customized Mailchimp signup form to the sidebar, simplified with just 2 form fields. We decided on a catchy name for Adrienne’s signup list (i.e. “Join Club #fashcompash” instead of “Sign up for a free subscription”). I tested it out by attempting to sign up and noted where the user experience could be improved at each stage of the subscription process (including the follow-up emails generated by MailChimp).LAFC website process - Linda Albertini Web Design

I went into Adrienne’s Mailchimp admin panel to customize the emails sent to new subscribers, keeping consistent branding. I then created customized confirmation pages on WordPress to use instead of the default MailChimp pages, keeping visitors on the site for an experience that is more intuitive and less disruptive.

LAFC website process - Linda Albertini Web Design

LAFC website process - Linda Albertini Web Design


More Content

I added a contact form on the “Contact Us” page, as well as secondary pages for “Advertise with Us” and “Work with Us.”

Within the blog section, I organized and added content for “Features” and “Events.” Since fashion websites rely heavily on images, I found and installed a lightbox plugin compatible with WordPress galleries.

LAFC website process - Linda Albertini Web Design


Troubleshooting Galore

Thank goodness for backups! I restored the website after a WordPress update wreaked havoc on the client’s server (one with so-called “free hosting”). After I convinced the client to invest in better hosting with a more reliable company, I migrated the WordPress site to the new server. During the transition process, I worked with the hosting company’s customer support team to fix display problems and redirect issues that surfaced after changing the DNS nameservers. I responded quickly to the problems to minimize any downtime.


Publishing & Off-boarding

After the website was successfully launched and the last-minute content was added, I created an off-boarding process for the client. Since we lived on opposite sides of the country, I recorded screen capture video tutorials to show her how to manage the website from the WordPress dashboard. I sent Adrienne a document with links to the video tutorials and a set of instructions. I offered to set up a free 1-hour call to go over any key processes and questions with the client, but she was happy to find that she was up and running on her own after reviewing the tutorials.



Screenshots Before & After

Before:

After:

 

Fashion Website after - Linda Albertini

LAFC website after - Linda Albertini Web Design

LAFC website after - Linda Albertini Web Design

LAFC website after - Linda Albertini Web Design

LAFC website after - Linda Albertini Web Design



To view the live website, please visit: lafcnyc.com

See Client Testimonial


View Portfolio to see more, or Contact Me to schedule an interview.

Comments are closed, but trackbacks and pingbacks are open.