MY ROLE
Project Manager
Set deadlines, deliverables, and product vision. Ensured that the team was making progress at a reasonable rate.
Interactions & Visual Designer
Created digital interactions and visual aesthetic for app design.
UX Researcher
Conducted user research, affinity mapping, design studio, and contextual inquiry.
DESIGN DECISION
In the site's current state, users are not empowered to search or compare products in a seamless manner and locate products efficiently.
As designers, we considered how the brand might achieve their goal whilst working towards a future of mobility, immediacy, convenience and speed.
PROBLEM
SSENSE shoppers need an easy to navigate browsing experience that consistently provides sort & filter options and compare product features to provide a tailored experience while discerning items to purchase.
SOLUTION
Improved "Refine" tab design to allow for selection of multiple brands.
Added the option to sort by color on mobile.
Added sectional scrolling for selected areas of homepage so that important content was not lost when browsing.
Created a new feature to save and compare products in order to improve the shopping experience.
Updated UI to improve readability and differentiation of products.
USER RESEARCH
Interviews + Survey
By synthesizing data from two iterative online surveys and four contextual user interviews via a group affinity map process, we arrived at ‘I Statements’ that helped us understand SSENSE users’ behaviours and objectives.
-
I like to compare items between brands.
-
I rely on clear text to guide my browsing experience.
-
I currently find it challenging to quickly identify brands.
-
I prefer an online shopping experience catered to my interests.
-
I expect to have a sooth and intuitive online UI experience.
​​
USER STORY - MEET KEVIN
Behaviours & Motivations
Needs/Goals
Kevin bases his purchasing decisions on comparing quality amongst different brands by category (shoes, jackets, etc.). However, he is currently restricted to comparing products by screenshotting items and viewing them in his Photos app.
​​
He wants to view products from multiple brands at once and on overall more seamless shopping experience to find the perfect item.​
Scenario
Kevin often chats new streetwear designer drops with colleagues on breaks. During conversation, Kevin likes to browse the products via SSENSE on his mobile. Kevin takes out his phone and decides to look at what's trending....
​​
Kevin finds that he's unable to sort by color or change designers on mobile. As a result, he's forced to continue his flow on desktop when he gets home.
​
On the desktop version, Kevin feels like he's scrolling too much when browsing for items. He clicks on a brand called Suicoke and decides to look at one of the products. He is faced with a couple of similar items and realizes that there is nothing to differentiate the sandals. He also notices that the header bleeds into the page content...
PAIN POINTS OF CURRENT USER FLOW
“I’m unable to switch between brands unless I reset the page”
People want a more efficient way to browse
PAIN POINT / INSIGHT #1
PAIN POINT / INSIGHT #2
“There’s too much back and forth scrolling on the homepage”
Brand and filtering options are lost when scrolling through the contents of the homepage
“I need to screenshot images and compare them in my photos app”
There should be a way to efficiently compare products
PAIN POINT / INSIGHT #3
PAIN POINT / INSIGHT #4
“Elements on the site are inconsistent”
Inconsistent usability heuristics make it challenging to navigate through the site
DESIGN ITERATIONS
We brainstormed a couple of designs to include a new refine tab, sectional scrolling, compare page, and some typography changes to best tackle the above pain points.
FINAL DESIGN
NEW COMPARE FEATURE
This will allow users to save products that catch their eye and then compare them in a quick and simple manner.
SECTIONAL SCROLLING
Users are now able to browse products on the homepage without losing the position of the designer list and sorting / colours panel on the sides. The header also no longer bleeds into the product section.
NEW REFINE TAB
A new "refine" tab was implemented to allow for the selection of filtering by multiple designers and by colour.
UI TYPOGRAPHY CHANGES
Certain texts were bolded and made larger such as product name, price, and product model to better differentiate between items and make viewing easier.
CONCLUSION & NEXT STEPS
By introducing multi-sectional scrolling, a product comparison feature, and refining key usability heuristics such as Consistency and Standards, as well as Flexibility and Efficiency of use - we empower frequent SSENSE browsers to locate items with immediacy, convenience and speed regardless of whether they’re shopping experience is via a mobile device or desktop.
​
Our next steps include:
-
measuring new features’ success against new user flows
-
better understanding how users interact with product pricing information
-
integrate the brands’ marketing via advertorials into users’ shopping experience
