Business case · UX analysis, concept and testing
Dsquared2 online store
Dsquared2.com is one of YNAP’s Online Flagship Stores, and the release it was running on had aged past current market standards. This is the case study with no interface in it: an audit, a roadmap of improvements, and three experiments defined with the numbers they would move.
- Type
- Self-directed business case, a brief taken on during a design selection process and run with my own method
- Scope
- UX audit, feature concepts, A/B test design, personalisation strategy
- Surface
- Desktop and mobile store, checkout included
- Deliverable
- Analysis and measurement plan, no wireframes
The brief
Dsquared2.com is one of the Online Flagship Stores operated by YNAP. The current site had been released years earlier, and the task was to realign its features with market standards and fix the usability problems that had accumulated.
Worth saying up front what this case study is not: there are no wireframes and no interface here. Luxury e-commerce is a category where the visual language is set by the brand, and where the useful design contribution is knowing which changes are worth making and how you would prove it. So the deliverable is an audit, a roadmap and an experiment plan.
The process, and what was real
Empathise
Partly delivered- Walkthrough of the live store on desktop and mobile
- Comparison against current market standards
- Session recordings and funnel data (proposed)
- Interviews with shoppers (proposed)
Define
Delivered- Six usability issues across browse, filter and checkout
Ideate
Delivered- Feature roadmap: search, filters, AI recommendations
- Four personalisation concepts
Prototype
Method proposed- Wireframes and interface (proposed)
Test
Partly delivered- Three A/B tests defined with success metrics
- Running the experiments (proposed)
What is broken
Delivered
- Carousel controls, and images that do not load
Scrolling the main carousel is not intuitive and the other controls are neither explicit nor clear. Some images fail to load at 1600px, which is the width a lot of the target audience browses at. The compound effect is that the site stops looking credible, which in luxury is the only thing it has to be.
- The call to action points at the wrong thing
The “Discover more” button sits where it reads as belonging to the carousel, and its proximity to the scroll-down arrow deepens the confusion. Two competing invitations, one space.
- Mobile category navigation is not what anyone expects
Moving through categories left to right and then top to bottom is an unusual model, and it makes the main categories hard to identify at a glance.
- Filters hide their own options
You have to open every filter to learn what can be filtered. There is no way to clear everything in one click, and once a selection is made there is no visible summary of what is being filtered. The animation is also slower than the task deserves.
- Breadcrumbs are decorative
Intermediate steps are not clickable, so getting back to a parent category means going through the mega-menu again from inside a category.
- Checkout punishes normal typing
Typing a space in the card number triggers a validation error, when the field should be auto-formatting with spaces itself. Card type selection is then asked for again after the number has already been validated, which is work the system could do.
What to build next
Delivered
The improvements below are ordered by how much they change the shopping task, not by how impressive they sound.
Filters, promoted out of hiding
- Move filters to a right sidebar that stays visible, and show which ones are active for the current result set.
- Add category-specific filters (materials, for instance) and thematic ones (occasion, season, style).
- Promote the important filters above the product list rather than behind it.
- Make each filter change a separate entry in browser history, using the HTML5 History API, so the back button behaves the way shoppers assume it does.
Search, for people who cannot name what they want
- Voice search. Capable of driving serious traffic, via a speech-to-text API.
- Image search. The right auxiliary route for visually oriented shoppers who remember how something looked but not what it was called.
Machine learning where it earns its place
- Power the “You may also like” block under each product with a recommendation model.
- Use visual recognition to suggest tags when new products are added to the store, which saves merchandising time and improves the similarity results customers see.
- Let a shopper photograph a product on mobile and search the catalogue with it.
- Learn from what registered users type into the search box so the result set gets more specific to them over time.
Conversational assistance
A chat bot or live chat can recommend the accessories that suit a particular customer, the way an in-store assistant would, and stay available at all times. These services learn from every interaction, and that data enrichment is what makes later recommendations relevant enough to move conversion rather than annoy.
Three experiments, and what they measure
Delivered
This is the part I would defend hardest in a review. A recommendation without a measurement plan is a preference. Each of these names the number it is supposed to move.
- Promoted filters in a dedicated sidebar
Surface the important and category-specific filters so shoppers can fine-tune a search and narrow the options themselves.
Fix
Measure: pages per session, average session duration, visits to the product page resulting from filter clicks, and total revenue attributable to the test. - Product quick view for a faster path to checkout
A button on the product image opens a modal where the product can be viewed without leaving the list.
Fix
Measure: share of sales that pass through the quick-view button, average order value when the feature is used, clicks from the product list, and revenue. - Close-up view on product pages
Let the shopper zoom into the part of the product they are actually interested in. The goal is engagement, which in this category is a proxy for confidence to buy.
Fix
Measure: pages per session and session duration on product pages offering the option, and add-to-cart numbers from those products.
Personalisation concepts
Delivered
- Redirect a logged-in shopper to the right store. If the system already knows them, the homepage can be the Men or Women category page instead of a neutral landing.
- Sort by observed relevance. Track how long a customer spends on particular product pages and order results on that signal, so each customer sees a different sort order.
- Suggest complementary products. Let someone buy a whole outfit at once, with the accessories that complete it offered alongside.
- Ask for body measurements at registration. Used well, that data makes every subsequent result set more precise.
Looking back
Method proposed written now, looking back: what I would keep and what I would do differently with the experience I have today
Pairing every recommendation with the metric it should move is the habit from this piece I have kept. It is also the thing that makes a design argument survive a conversation with a commercial stakeholder.
What I’d do differently: the roadmap is too long and not sequenced. Voice search, image search, visual recognition and a chat bot in one document is a wish list, not a plan, and presenting it that way invites a client to pick the shiny item rather than the broken checkout. Today I would lead with the card-number bug and the filter sidebar, because they are cheap and they are costing money now, and hold the machine learning until the basics are earning. I would also want the funnel data before ranking any of it.