Site Redesign for Clique Brands

Clique Brands gives fashion, beauty and lifestyle inspiration to milliennial women. The redesign of Who What Wear, Byrdie, and MyDomaine was built on a new React platform and with a modern branding facelift.

HP_iphoneplus_iphone7plusrosegold_portrait
Channel_iphoneplus_iphone7plusrosegold_portrait
Shop_iphoneplus_iphone7plusrosegold_portrait

Redesign Results Overview

  • Lowered the bounce rate by 20%
  • Raised page views per session by 61%
  • Search traffic went up by 62%
  • Mobile speed score is 1.8s, faster than all of our main competitors (Vogue, Elle, Popsugar, Refinery29)

The Problems

Tech problems:

  • Slow loading time.
  • Code was difficult to maintain.
  • Ads often didn't load (lost revenue).

User experience problems:

  • Scroll-into-next confused readers.
  • Users were not engaging with the rest of the content once on site.
  • Ads were obtrusive and blocked people from reading content.
  • It was difficult to find more relevant content.

Branding problems:

  • The Who What Wear brand had changed.
  • The colors were outdated.
  • Too many typography variations.
  • No standardization for image ratios often led to imagery being cut off in the viewport.

Business problems:

  • Losing users/revenue from slow site loading speed.
  • Obtrusive display ads were driving users away.
  • The old site was expensive to maintain.
  • Traffic goals were not being reached.
  • Needed to gain more return users.

Other Factors

  • Limitations of the current advertising strategy.
  • Limitations of custom CMS.
  • Updating content strategy.
  • Updating SEO practices.
  • Needing new opportunities for email acquisition.

Who is our reader?

The Demographics

  • Female
  • 18-34 years old
  • Income: over $100k
  • More than 50% traffic is mobile
  • Influenced by celebrity endorsements
  • First among friends to try new trends. 

Note: More specific demographics are proprietary to Clique.

 

5 Facts About Our Users

  • 90% of our readers are female.
  • 52% of our users are first-time visitors. 48% are returning.
  • 2/3 of our readers are on mobile devices. 
  • Most readers come from Google/organic search. 
  • Average session duration for the first quarter of 2017 was 2:11.

5 Assumptions About Our Users

  • Most readers are searching for a specific topic when they enter our site.
  • Our most loyal and active readers follow us on social media (2.5mil followers on Instagram, 1.5mil followers on Facebook, 500k followers on Pinterest).
  • They want personalization.
  • They want control of what they read.

Note: More specific comScore market research is proprietary to Clique.

Questions About Our Users

  • What are the reading habits of our users?
  • How do we give our readers an experience that makes them want to come back?
  • How do our users like to comment? Article vs. IG vs. Facebook.
  • At what point do we offer related content? Bottom of the story vs. top of the story.
  • How do we connect our social content and brand with our site content and brand?
  • Are our articles secondary to our social content to our avid readers? 
  • How do we give our readers an experience to make them want to keep reading/exploring/looking for more content?
  • A B C Testing - Do users discover more content at the end of the article or the beginning of the article?
  • Photo vs. Headline - What do our users click on more?

What does she want?

And how can we help?

5 Levels of Why

Writing down "Five Levels of Why" is a great exercise to get to the deepest level of empathy for the users. These are my notes behind the site redesign. They are useful for building arguments behind my future designs. It was important to have notes to remind the team of the deeper points of the redesign when making more granular decisions in the later part of the process.

1. Why do we need to redesign the site?

We currently use scroll-into-next as our main source of content discovery. There's no personalization or relation in the story that appears next. This forces all readers to read the same story after the story they clicked on, and we are leaving engagement up to chance.

2. Why is that important?

From our reader's perspective, I am being served an article I didn't ask for, have a high chance that I am not interested in it, and the action of scrolling is continual so I can get easily confused by what is a previous article and what is the next article. I was never given a choice about what I wanted to read next, and I lost control. Once I get confused or lose control, I have a bad experience and don't want to come back.

3. Why is giving our reader choice or control important?

There is so much available to our user on the internet. Even in feed-based outlets "captive" environments, we curate our feeds. Once users feel force-fed information or content they don't like, they have bad experiences and leave. Users want expectations to be met accordingly.

4. Why are user expectations important?

When something irrelevant is forced in front of a user, and the moment she realizes she is not getting what she came for, she will leave and try to go to the last place she understood. Users want control over what they see and should not be treated as passive eyes who will stand being fed irrelevant content and obtrusive display ads like it is their sole purpose to give an ad impression for the marketer to make more money.

5. Why is that important?

Users are spending their precious time. They are on our site for a reason and want to know "What are you giving me? What do I get from this place?" There is a relationship between the site and the user, and it should be based on respect and treating the user like a person who has thoughts and feelings, and not a robot behind a screen whose sole purpose is to generate ad impressions. The users want to be treated with respect and we must find the context where they don't mind giving back in return (in the form of ad impressions). Reading is an active state of mind. Reading for our users is thinking, getting inspiration, searching for something to add to her life. The word "consumer" is inappropriate because it implies that our users are passive, but they are not and we should not treat them that way.

5 Levels of Why

Writing down "Five Levels of Why" is a great exercise to get to the deepest level of empathy for the users. These are my notes behind the site redesign. They are useful for building arguments behind my future designs. It was important to have notes to remind the team of the deeper points of the redesign when making more granular decisions in the later part of the process.

1. Why do we need to redesign the site?

We currently use scroll-into-next as our main source of content discovery. There's no personalization or relation in the story that appears next. This forces all readers to read the same story after the story they clicked on, and we are leaving engagement up to chance.

2. Why is that important?

From our reader's perspective, I am being served an article I didn't ask for, have a high chance that I am not interested in it, and the action of scrolling is continual so I can get easily confused by what is a previous article and what is the next article. I was never given a choice about what I wanted to read next, and I lost control. Once I get confused or lose control, I have a bad experience and don't want to come back.

3. Why is giving our reader choice or control important?

There is so much available to our user on the internet. Even in feed-based outlets "captive" environments, we curate our feeds. Once users feel force-fed information or content they don't like, they have bad experiences and leave. Users want expectations to be met accordingly.

4. Why are user expectations important?

When something irrelevant is forced in front of a user, and the moment she realizes she is not getting what she came for, she will leave and try to go to the last place she understood. Users want control over what they see and should not be treated as passive eyes who will stand being fed irrelevant content and obtrusive display ads like it is their sole purpose to give an ad impression for the marketer to make more money.

5. Why is that important?

Users are spending their precious time. They are on our site for a reason and want to know "What are you giving me? What do I get from this place?" There is a relationship between the site and the user, and it should be based on respect and treating the user like a person who has thoughts and feelings, and not a robot behind a screen whose sole purpose is to generate ad impressions. The users want to be treated with respect and we must find the context where they don't mind giving back in return (in the form of ad impressions). Reading is an active state of mind. Reading for our users is thinking, getting inspiration, searching for something to add to her life. The word "consumer" is inappropriate because it implies that our users are passive, but they are not and we should not treat them that way.

Storyboarding

Storyboarding is a great exercise to illustrate the mental model of the user. I drew the different environments and contexts of how our site is being used.

5_Storyboard_returning
6_Storyboard_new

User Flow

User_Flow_all_properties

Site Map

Sitemap_all_properties

Lessons Learned

These are some lessons that I learned from this project that I believe can be added to best UX practices.

  • There can only be one #1 priority at a time
  • Most basic UX practices are free.
  • People can forget goals easily.
  • The product is for the user, not the stakeholder.
  • Test early, test often. Ship early, ship fast.
  • You can't predict the future, but plan ahead as much as possible.