About Carets

Carets is a shoemaking company. They claim their shoes represent the highest intersection of style and comfort, stating:


“There will always be shoes more stylish than ours, and there will always be shoes more comfortable than ours. If you care about just style or just comfort, you would be better served by other shoes. If you care about both style AND comfort, look no further. We've packed our shoes to the max with both style and comfort, and you won't find another shoe that does it the way we do.”

 

About Carets

Carets is a shoemaking company. Their shoes are the Highest Intersection of Style and Comfort and by this, they claim that:

“There will always be more stylish shoes than ours, and there will always be more comfortable shoes than ours. If you care about just style or just comfort, you would be better served by other shoes. If you care about both Style AND Comfort... Look no further. Because we’ve packed our shoes to the max with both style and comfort, and you won't find another shoe that does it as we do.”

 

in-mockupspng

Initial requirements

Carets wanted to redesign their Mobile and Desktop websites to improve user experience and visual identity. Through interaction with customers, they realized that people felt a risk buying from them. The lack of trust in their websites across all platforms deterred users from spending $350 on a pair of shoes.
 
 

Initial requirements

Carets needed a redesign of their Mobile and Desktop website with better user experience and visual identity. By interacting with the customers they already knew people feel risk buying from them because their websites on all the platforms do not gain the user’s trust to pay $350 for a shoe.

The goal for new carestco.com

Like many e-commerce companies, Carets' goal for the new website was to increase conversion and reduce the bounce rate. However, they also had an interesting aim to enhance the shopping experience across all platforms, to help customers shop without fear or risk. In short, they sought to create a trustworthy website with a visually reassuring tone.


The goal for new carestco.com

Like almost every e-commerce company their goal for the new website was to have an increase in the conversion and reduce the bounce rate, but there was an interesting goal to improve their shopping experience for all the platforms in a way that can help customers to go shop without having fear of risk. In short, a trustworthy website with its visual tone. 



Achievements:

Note: The impact was measured after 3 months after the release of the new designs.

  1. Improved conversion from the mobile site by 38%
  2. Improved overall conversion by 42%.
  3. Reduced mobile site bounce rate by 53%.

Achievements in next 1 month after the launch.

Improved conversion from the mobile site by 60%

Improved overall conversion by 42%.

Reduced mobile site bounce rate by 53%.

Was & Now

Was & Now

OldvsNew

Survey

I spent 2-3 hours reviewing the website and created a questionnaire for Carets. I'm grateful to them for providing detailed answers to every question I asked, (not every client provides you all information) but beyond that, I needed feedback from customers about what they think when they shop from Carets. Fortunately, they already had a survey, which helped me recognize a few problems. The majority of customers were looking for more collections and more color options for the shoes, but that wasn't within my scope, although Carets is already working on it. I also found some helpful feedback about the websites and the mobile shopping experience.

survey-docs

Analysis of the problem

Carets doesn't have an extensive website; they're currently selling just 3 shoe styles (with more launching soon), but the website wasn't providing the necessary information. My task wasn't just a simple redesign of the existing site but rather a complete overhaul of the entire experience. This included new content, photography, branding, and a revamped brand voice tone.


I noticed their previous website contained all the information a customer might want to know before making a purchase, but it wasn't always presented in the most accessible or relevant places. This was particularly evident on the home and product detail pages, where superfluous information was sometimes provided.


Shopping experiences have advanced considerably in recent years, with certain standard practices that online shoppers have come to expect. Examples include the product detail page hierarchy (covering product title, reviews, price, size selection, and add-to-cart button), the cart icon in the top right corner, and Shipping and Return links in the footer. I found that the old website was missing many of these elements, which could have enhanced customer experience and trust.


In today's world, many people prefer to shop on mobile devices. This has led some companies to adopt a mobile-first approach in recent years. By examining analytical reports, I discovered that traffic was almost equally divided between desktop and mobile, but people seemed to prefer shopping from desktops. Why was this the case?


A few obvious reasons: 

  1. The mobile screen was cluttered with unnecessary information, forcing customers to scroll without purpose. 
  2. The product page had excessive empty space, pushing vital CTAs below the fold. 
  3. The color selection field was redundant since the site was selling only one color. 
  4. The "add to cart" button was smaller than the dropdown menus. 
  5. There was a lack of personalized information on the product page.

Analysis of the problem

Carets do not have a huge website they’re just selling 3 shoes (more are launching soon) but the website was not giving the needful information. For me, the task was not just redesigning the existing website but it was a redesign of the whole experience that covers the new content, new photography, new branding, and new brand voice tone.

I noticed their old website had all the information a customer would like to know before he buys a product but it was not present at the needful spot where it should be. Especially on the home, product detail page and somewhere there was extra information that a user may don’t want to read.

The shopping experience has been much advanced in the past years but there are some standard activities that every shopping site follows and the online buyers are used to it. e.g. the hierarchy of the purchasing component of the product detail page (that covers product title, reviews, price, select the size and add to cart button), the cart icon on the top right or Shipping and Return links in the footer. I saw that the old website was missing many of these things that could improve the customer experience and could help to gain customers' trust when they shop. 

Today, people love to shop on mobiles and that's why from the last few years some companies believe in the mobile-first approach. By seeing the analytical reports I found out there is almost equal traffic on Desktop and Mobile, but the people were more liking to shop from the desktop. WHY?!?! 

Few obvious reasons:

  1. There was useless information on the small mobile screen which was making the customers scroll for no reason. 
  2. Lots of extra space on the product page that is pushing all the required CTA’s below the fold. 
  3. Useless color selection field because there is the only one color the site is selling.
  4. Add to cart button was smaller than the dropdowns. 
  5. No personalized information on the product page. 

Branding

After getting to know the full scope of the project, I embarked on the initial task of redesigning Carets' logo, a specific requirement that I was excited about. This redesign allowed me to delve deeper into understanding the core values of their brand. Crafting the logo at the project's onset helped set the visual tone of the brand, aligning with the idea that a brand is akin to an individual's gut feeling about a particular product or company. Each person interprets a brand uniquely, and its popularity can fluctuate based on consumer sentiment. Carets was seeking a sharp and edgy feel while retaining the color and concept of their existing logo, as it resonated with the meaning of their name "Carets."
 

old-new-logo

I will not dig much into the process and the exploration for their new logo but in all this exploration I finalized the tone of the brand, the new gold shade, and new font.  

logos-exploration

Photography direction

Photography of any brand plays a huge role in defining the voice and target audience. Their old photography was not matching with the new visual tone I was envisioning for their brand. I suggested them to shoot new photographs I researched on what was in my mind to convey them my thoughts. We checked up a few photographer’s portfolios and end up with www.modernalchemy.io Within 3-5 rounds we got the new imagery which was far better than the old.

Photography direction

Photography of any brand plays a huge role in defining the voice and target audience. Their old photography was not matching with the new visual tone I was envisioning for their brand. I suggested them to shoot new photographs I researched on what was in my mind to convey them my thoughts. We checked up a few photographer’s portfolios and end up with www.modernalchemy.io Within 3-5 rounds we got the new imagery which was far better than the old.

Ideation and content strategy

I am surely not a content writer but by reading the existing content I could see that it can be written in a more effective way I asked the client if we can hire someone to re-write or to just polish the content for us would be really helpful for the new website. 

Ideation and content strategy

I am surely not a content writer but by reading the existing content I could see that it can be written in a more effective way and I asked the client if we can hire someone to re-write or to just polish the content for us would be really helpful for the new website. 

paperwork

I began by listing all the pages and the sections contained in each one. Then, I broke down the content from each page and reorganized it to reflect what a customer would truly need to know. For example, in an era where people often prefer watching videos to reading lengthy text, I moved some of Carets' explanatory videos and reviews to the homepage (previously, they were tucked away on inner pages). This way, visitors could grasp the purpose of using Carets within just 2-3 minutes.

After finalizing the content strategy and the structure of the site, I sketched out the possible layouts for the key pages, including the Home, Collection, and Product detail pages.

Prototypes

I tend to outline the user experience through prototypes, as I find it consistently beneficial. This approach allows for rapid iteration in collaboration with clients, without getting bogged down in pixel-perfect details. It also saves time later on, ensuring a firmer grasp during the UI stage. For Carets, I focused on three key pages (home, product listing, and product detail) and crafted various layouts tailored to user needs, based on data, surveys, and some assumptions. I utilized Invisionapp for collaboration with the Carets team, and I must acknowledge that it proved to be quite handy. The layouts illustrated below represent the final wireframes after many iterations.
 

prototypes

User Interface

With Carets, the goal was to forge a visual approach that seamlessly blended the contemporary with the classic. To achieve this delicate balance, I turned to a blend of Serif and Sans-Serif fonts, giving the design an edge that was simultaneously sharp and elegant.


Starting with Carets' new logo, I meticulously pared down any curves and rounded elements, imbuing the brand identity with a distinctive sharpness that resonated with their ethos. Carets had a clear vision of what they wanted, including retaining their existing brand color, a decision that I fully supported. However, I sought to elevate their gold tone to a richer hue. Together, we embarked on a fascinating exploration of various gold tones, finally settling on one that encapsulated the unique blend of tradition and innovation that Carets stands for. This thoughtful refinement added an extra layer of sophistication, enhancing the overall visual experience.


Here you can browse the website www.caretsco.com

homepage-min-3-2
Home
home&collection
Collection
pdp-2
Product page cases
Product page
Other pages
other pages-2

Other Projects

 

BEHANCE        DRIBBBLE        LINKEDIN        MEDIUM


 © 
Umair Mehmood 2024