No Strings Attached -
an E-commerce

website redesign.

A design overhaul of a bespoke fashion accessory label with an improved navigation and checkout experience. 

Overview

A self initiated project to improve the user experience of my brand's E-commerce website to increase conversions and reduce cart abandonment

Role

UI/UX designer - Researcher, Interaction Designer, UI Designer

Tools

Sketch, Zoom, Draw.io 

Duration

3 days

Team

Solo

Client

No Strings Attached LLP

 

BACKGROUND

“We’re seeing traffic coming to our landing pages but it's not leading to as many conversions... what’s going on?” 

No Strings Attached is a bespoke jewelry and bridal hair accessories brand that offers handcrafted creations and is based out of India. It's essentially a small business as it's run single handedly by its Founder & Creative Head (Hi, that's me 🙋🏽‍♀️) but prides itself over a thriving offline customer base that it has meticulously built over the last six years.  

Around three years ago, the brand moved to its own E-commerce store built on Wordpress and has seen growth, finding new users discovering the brand from search platforms. However, it has also noticed an increase in cart abandonment. 

 

I decided to use my newfound knowledge about the User Centered Design process to bring some life back to my brand's online presence by redesigning it and improving its user experience to increase conversions and also figured this would be the best way for me to practice my UX skills. 

Business Objectives      🎯

📌  Increase conversion rate

📌  Convey bespoke service to new users efficiently

📌 Reduce bounce rate

       User Goals         ⛳️   

📌  Seamless shopping experience from cart to checkout

📌  Use a trustworthy platform and shop from a brand that's reliable 

Constraints         ⛔️

📌  No coding capabilities, customization limitations on Wordpress 

📌  Responsiveness on desktop and mobile

 

       Responsibilities        🕹 

📌  Redesign landing pages such as home and product detail page.

📌  Improve shopper's navigational flow if need be, and cart to checkout experience 

How might we redesign to effectively portraying the E-commerce and the bespoke aspects of our online store, and improve the shopping experience from cart to checkout to entice more new users to fulfill their purchases.

PROBLEM STATEMENT

I conducted a mix of qualitative and quantitative research to best understand the problem space and identify design opportunities that could improve user's online experience with my brand.  

Figuring out the problem began with evaluating our existing designs

DISCOVERY

Outlining the research plan

 

First Impressions 

If this is what the user sees 

first, how do we catch best 

their attention? 

✅Eye catching imagery 

✅Minimal menu

⛔️Too many categories competing for attention

Brand Offerings

Are we communicating

our services in the manner
that resonates with our
user's needs/goals?

✅Eye catching imagery 

⛔️Services portrayed don't offer relatability nor generate curiosity. 

Policies 

How to make policy and 

information about the brand 

more easily accessible?

⛔️Copy ought to be tailored

to their needs

⛔️Small business story 

telling missing

⛔️Menu layout has no segregation

⛔️Long scroll until user sees the products

⛔️Information isn't actively visible, could be blink and miss. 

⛔️No notification on adding
a product to the cart from
the homepage.

ORIGINAL DESIGN-

HOMEPAGE

Product listings

What would be the best 

product highlights on the 

homepage?

⛔️Inconsistent product labels and CTAs 

⛔️No distinction between call to action buttons

⛔️Copy needs to be improved

Testimonials

How to create credibility
about the brand to new
users? 

⛔️No trustability on the reviews to be real
 

Understanding the existing market -
Competitive Research

To assess the current expectations from an E-commerce store, I looked at a few direct and indirect competitors' websites. They were determined by - 
1. Small business jewelry labels (Leafy Affair, Blingg)
2. Similar price range and demographics (Blingg, Pastels and Pop, Leafy Affair)
3. Jewelry retailers (Pipa Bella, Tipsyfly, Amama)
4. Boutique jewelry labels (Dhora, Amama)

5. Physical storefront/studio (Pastels and Pop, Dhora)

My goal was to compare and identify common features across these sites and potential opportunities for No Strings Attached to differentiate itself and resolve.

The most important takeaway from this activity was learning how different websites organized features and the overall layouts they used for those websites. This was helpful information that helped solidify the stage for my second phase of research.

Analyzing data to understand users

I used google analytics and instagram's data to reconfirm the demographics and user profile. Also, to get an insight into the activity on our site.

AGE | 25- 34 

GENDER | 81% Women 19% Men

What did I learn?       🔍
New users discovered the brand & website
via a search engine
>
Offline customer base visits the site directly, during sale & occasion based shopping
Desktop users (66.6%) > Mobile Users (33.4%)

LOCATION | India (Metropolitan cities > Tier 2)

The website was experiencing a higher bounce rate lately, the data suggested that new users landed on the product detail page from search engine and then next to the homepage before exiting the website.
 
Certain product categories (earrings, rings) were popular in garnering repeat visits where others failed to do so. 


 

Tap/click to see an expanded view

Secondary Research of  a recent study on reasons for cart abandonment conducted by baymard.com

The brand charged INR 100 flat rate shipping fee for all orders to be shipped anywhere in India. This itself could be the main reason for cart abandonment rate steeping up lately. However, providing free shipping was a business decision which could not be taken at the moment and would have a domino effect on the business model. 

 

Therefore I tried coming up with design solutions keeping the existing shipping model of INR 100 fee. 
 

Observing users while they navigate
through the website

I used findings from the above research methods to guide my usability tests (remote) but also encouraged free play to understand if there was any aspect that I hadn't noticed which could help improve my customer's experience with the brand.

The usability tests were conducted on 5 users- 3 women + 2 men. As the brand designed only for women. The approach automatically got divided into users shopping for themselves (mostly women) and users looking to gift loved ones (men).

Usability Test Findings     😮😮


📌 The checkout had call to action buttons which were literally invisible to the users. 4/5 users couldn't figure out that the website offered guest checkout. 


📌 Our bespoke end of service was NOT being communicated right, as 4/5 users skipped over this section. The users said they would rather call than use the website for such information, and a gallery of past work would suffice in creating confidence in the brand's customization abilities

 

📌 Confusion about the payment gateway; 4/5 users hadn't heard of Instamojo (Indian based payment gateway firm) and 3/5 users presumed they can't make payments as they don't have it even though it accepted all modes of payment. 

📌 Issues with filter on product list page. Limited filtering options + sidebar would disappear on scrolling down.

📌3/5 users discovered shipping fee during checkout and uttered an OH! to the fee. This was despite an existing top banner throughout the website that mentioned (Flat Rate Shipping All over India INR 100)

DEFINE

User Personas

Through the research and its findings, I found that both user types were discouraged by the checkout process but found the navigation through the website fairly easy. To illustrate the differences and better empathize with the users when designing, I created two user personas. 

Design opportunities started to arise.

At the point, although I was brimming with ideas on how to reinvent my brand's online experience, I had to slow down to remember the constraints and begin with defining the problem areas I wanted to focus my redesign on. 

How might we attract more shoppers to discover our bespoke & bridal service?

How might we simplify the product selection process online? 

How might we ease the cart to checkout journey of the user? 

How might we increase trust, familiarity and brand accessibility? 

DESIGN

1

How might we attract more shoppers to discover our bespoke & bridal service?

 

OLD DESIGN

Current experience was failing users in discovering the brand's pivotal service via its website. 

4/5 users were unable to discover this. 

 

REDESIGNED

A hero image to be the central communicator for bespoke service with a call to action button to direct users to view past work and portfolio. 

ITERATION 1

Banner image after featured products segment on homepage. CTA button and info on brand's fulfillment status to garner trust and reliability

ITERATION 2

Image included in hero slider making it the first touchpoint for user on opening the website/ homepage

Steps to ease the user's understanding on how to get something customised. 

Benefits
- Its helps user make an informed decision


-Filters query related calls to the business and helps in promoting real potential clients instead. 

2

How might we simplify the product selection process online? 

PRODUCT DETAIL PAGE

OLD DESIGN

Usability test revealed that users sought out product details  to set better expectations on what to expect from the actual product. 

It helped them feel comfortable making the purchase. 

The older version left the users rather stranded on this front and was instead cluttered with repetitive elements. 

REDESIGNED

Simplification & decluttering of the product detail page 
 
- Enlarged ADD TO CART button to draw emphasis. 

- Includes all the necessary information useful to the user to assist him/her in completing the purchase

- Removal of any repetitive touch points 

Also added...

Active and relevant filters to streamline the user's search on product collection page. Attributes such as -

Price | Color | Recently Viewed Products |Wishlist products

 

1

2

Updated the homepage product slider with popular/ bestsellers instead of what's new and featured products to assist shoppers unaware of current fashion trends to find it easier to shortlist products.

3

How might we ease the cart to checkout journey of the user? 

CART PAGE

OLD DESIGN

REDESIGNED

CART PAGE

Overall I limited the changes within this page as every detail was on point. 

What was added was a footer to give user access to policies easily and to start easing the payment journey. 

REDESIGN - ITERATION 1

Single page checkout involving all the steps from shipping to payment. 

REASONS WHY THIS DIDN'T WORK

-The payment gateway being new to the users could still pose the same issues if it didn't resolve all of their doubts. 

- Too many details for the user to keep tab of within one page, could overwhelm the user. 

OLD DESIGN

LOGIN PAGE DURING

CHECKOUT

2nd highest cause for cart abandonment was found to be forced login during checkout. 

Testing revealed that 4/5 test participants skipped the 'I don't have an account' call to action button and thought they HAD TO login or create an account. 

OLD DESIGN

BILLING PAGE

Billing and Shipping pages had repetitive layout -- obsolete 

The entire page had ONLY form fields to fill up making it a daunting task, nor was the text legible. 

The call to action buttons were easily missed by test participants making them feel stranded

REDESIGNED

BILLING PAGE

-Restructured the layout of the form fields 

- Provided the option of Login only to users interested making guest checkout the default setting 

 - Order summary with total on the right side so that the user doesn't have to recall their product selection. 

-Option to add a different billing address within the same page 

OLD DESIGN

PAYMENT PAGE

-Lack of knowledge abou the payment gateway provider could cause distrust amongst new users.  

- 3/5 participants presumed they won't be able to make credit, debit, wallet payments via the gateway provider mentioned on the site even though it accepted all modes of payments. 

REDESIGNED

PAYMENT PAGE

The focus is on securing trust in the payment gateway while providing information that it does accept all forms of payments and is a safe service to use. 

Order summary to keep the user in loop with his product selection journey

Options to add discount coupons and gift cards until the user places an order. 

4

How might we increase trust, familiarity and brand accessibility? 

As a small business, its strongest and unique selling point was its client relationships that it had nurtured over a span of 6 years spanning all over India and a few countries overseas - US, Singapore, UAE etc. 

The brand had great reviews left by real clients on its Google Business page which weren't being tapped into. Nor was its existing studio mentioned anywhere where it received customers interested in shopping in person and exploring the brand further to its root.

 

REDESIGNED FEATURE 1 -  Studio Details

Included necessary information about store timings and address along with real time images of the store interior and exterior and google maps to 1. bring more shoppers to the studio to shop 2. to increase credibility as data suggested that shoppers find a brand which also has an offline presence more reliable to shop from. 

 

REDESIGNED FEATURE 2 - Real testimonials

As brands become infamous for purchasing reviews today, just having testimonials in the format of text isn't enough to make the users trust it. 

Opted for a google review plugin which imports real time testimonials/reviews left by actual customers in the past on the Google Business page along with star rating and image thumbnail so that the user doesn't have to exit the online store to check the brand's presence but can instead find it on the homepage itself. 

 

REDESIGNED FEATURE 3 - Brand Story 

Data analytics revealed that the 'About Us' was the third most visited page on the site which made it imperative that new users went about looking for information before making a purchase.

Added a section on the homepage to assist in the storytelling format to drive attention towards the bespoke section revealing 'meet the maker' element to further the brand's belief in artisan driven quality work and images to support it and drive familiarity. The brand's reach was showcased in the format of clients and products. 

 

FINAL DESIGN

 

...if I had more time, I would

Prototype and conduct usability and A/B testing on the redesigns to further explore new improvements and figure out finer details that make or break an online store and implement these designs on my actual website in real time.  

Responsiveness on Mobile after developing the website for the desktop first. 

 

 

To not become attached to ideas and keep my designer/founder bias aside - listen to the users. 

This was such a rewarding self initiated project to utilize my UX knowledge and bust ideas and impressions about a product that I had lovingly nurtured for years. It made me ask the hard questions as a business owner and focus the narrative entirely on the user's POV. 

It also put things into perspective on how many real customers I may have lost due to user experience issues that had gone unnoticed.

And although an initial constraint was of lacking coding abilities, redesigning with an open mind made me realize that it would be worth every penny to invest in a developer if could help in real time conversions.




To work on a quicker shorter timeline 
 

The challenge was time bound for a purpose to prevent me from getting lost in redesigning my brand all over- working on my shortest timeline by far challenged me to diverge only where it was necessary and find solutions while at it. Also, based on my previous real client experience I had understood that quick ideating and testing were the way to go in an actual work setting. So I made that the focus of this design exercise. 

What I learned?

DON'T BE A STRANGER

Let's Connect

© 2020 Prachi Garg. Made with love and lots of lemongrass chai at Hoboken