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 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.