Portfolio
Saks Off 5th
Add a New Feature Case Study
Optimizing use of Additional Detail option when comparing similar products in Wish List and Shopping Cart.
My Role
UX Designer / UX Researcher
Client
4 Weeks / 1 Project
Device
Mobile
Timeline
2 Weeks
Background
Saks OFF 5th mobile application offering a purchase of luxury items to customers at discounted prices.
This allows customers to purchase merchandise from known brands at prices lower that regular stores.
Customers often go to purchase brand merchandise.
Current application does not have an option where user can add similar items and compare products.
Project Goals
Design an option allowing similar items to be compared before being purchased.
Create an option allowing user to select similar items in Wishlist and compare them on separate screen by placing products next to each other.
Success metric: Click below item to select item and add to Comparison Screen.
1
2
Optimize options in Shopping Card allowing user to go and to compare items ready for purchase.
Enable user option to easily compare similar items in Shopping Cart and purchase desired item.
​
Success metric: Simplicity of comparison so it does not interrupt shopping flow.
Key Challenges
Consumers
When consumer is adding similar items for purchase they have no option to compare and see additional details in description of item.
Retailer
Attracting more consumers to make purchases directly thru their website and adding new features that competitors have.
Technical Constraints
1
2
3
The new feature should compliment, but not require redesigning of the whole mobile design.
Users should be able to easily compare items and see additional information for similar items.
​​
New flow should not slow down or interrupt user purchase flow or confuse and complicate final purchase.
Design Process
01
03
02
04
Discover
Define
Design
Test & Iterate
Competitive Analysis
Online Competitor's Research
Online competitive research was done with three main competitors who offer luxury items for their customers. All three had responsive design for mobile but none of the versions offered option or feature allowing similar items to be able to compare products.
User Research and Findings
Conducted two interviews and surveys with eight participants which resulted in several insights, including what users search for when shopping for similar products, and how is their decision for purchase affected when comparing similar products.
User Insight 1
Majority of information needed by customer when purchasing a luxury brand is found in additional description of product.
Q: What makes brand attractive:
-
​Better-quality item at a reasonable price.
-
Deliver in the highest quality.
-
Trust and buy with confidence.
-
Purchase something that will last.
-
Brand clothes mean comfortable fabrics.
-
Consistent quality
Design Decision
Additional Description needs to be displayed when items compared.
User Insight 2
Before making final decision for purchase users often look at additional descriptions.
Q: How often do you look at additional description?
-
60% - Every Time
-
20% - Once in a while
-
20% - Never
Design Decision
Additional Description for product will display when user takes decision to review 2+ similar products.
User Insight 3
In Shopping Card when few similar items selected user will need additional information to take decision.
Q: What are the three most important pieces of information needed in Shopping Cart to take decision for purchase?
-
Additional details like material, length, where it's made, reviews.
-
Fit, style, material
-
Pricing – is it affordable
-
Pictures of item
Design Decision
Additional Description needs to be displayed in Shopping Card to help with final decision of purchase.
Pain Points
Based on results from interviews and surveys I was able to put together the most common concerns of users when it comes to shopping online and comparing items they are willing to purchase:
-
Is item affordable?
-
Did I order same items and did not pay attention to the description?
-
What is material and quality?
-
Very often brand products have similar feature as items that are not brand or luxury.
-
Natural materials are a trend.
-
Durability and items that last long are important.
-
Unable to compare products while purchasing can discourage purchase.
-
Expectations for brands are high.
-
People stick to brands because of luxury feel, consistency with sizes, and different looks.
-
Mismatch in description can lead to confusion and disappointment with purchase, which can lead to discouragement to purchase brand product.
User Personas
Affinity Map
With Affinity map I was able to visually organize information from surveys and interviews into four categories. The goal was to understand how shoppers think and what is most important to them when additional information needed to make purchase. Sorting the ideas into different groups based on their relationships to one another helped me understand how customer experience can be improved.
The Solution
-
Shopping card should allow Similar Items to be compared and provide additional description to help user make better purchase decision. At the same time the additional description should not interrupt the shopping flow and make it too complicated for user to doubt purchase.
-
Majority of users are positive that Compare Items feature will help them make better choices when shopping brand clothes and help with final decision to make purchase.
Site Map
Site Map showing how items will be compared in Shopping Bag and Wishlist.
Site map outlines how new feature will be added to two of the main screens when user is comparing similar items. Separate screen will open allowing user to only see similar items selected and obtain additional information of the products for better comparison.
Wireframing
With current project I had to approach wireframing differently. As I am working with existing design I had to recreate high fidelity wireframes and determine how the new feature will display and compliment current visual design by showing paths between pages. To clarify how I am going to display new feature on the user interface following contextual points were determined:
​
-
No sketching or wireframing needed as I am currently working with existing already established mobile application.
-
I went straight to screenshots for mobile application.
-
I will need to create mobile screens for Wishlist and Shopping Cart following current UI Design.
-
Two new screens for Sopping Bag and Wish List will be added displaying the new feature "Compare Items" with additional information displayed below each item.
-
Work in Figma on recreating design for screens and layout of the new features on mobile application.
-
Match colors, fonts, styles, layout, etc. with original site UI design.
Usability Test and Results
Testing Parameters
I conducted the usability testing with 6 participants. Participants were asked to go thru two flows: Flow 1 - Review Items in Wish List and choose items to compare. Flow 2 - Review Items in Shopping Bag and choose similar items to compare before purchase. The goals of usability testing were to:
-
Evaluate the user's ability to navigate through the Wish List Comparison Flow and the Shopping Bag comparison flow. Is the mobile app intuitive and simple to navigate? Does the navigational structure of the mobile app aligns with customer/user expectations? Are the features easily findable?
-
Identify any confusion or problems users may encounter during usability testing.
-
Is there any confusion or difficulty while completing the task flows?
-
Find out what users think of the new feature added to existing design?
Usability Testing Results
All participants were able to easily complete flows and be able to find comparison feature.
Following recommendations were made:
-
Show 2 instead of 3 items per row on Comparison Screen for the mobile app for better visibility.
-
Make fonts slightly bigger.
-
In Wishlist add "Add to Shopping Card" Button allowing user to add items compared and liked easily from same screen.
-
Make X button to remove item from Wishlist bigger for better visibility.
Iterations
After analyzing my results and taking into consideration user recommendations, I made priority revisions to the design. See below comparison screens showing changes made:
Comparison screen had 3 item per row to compare. For mobile app images and text were too small to review and read. .
Change was made with only 2 items per row for better visibility and text was enlarged with 1px.
Compare Items in Wishlist was had only one option below to go back to Wishlist after reviewing additional features for an item.
Add to Cart button was added. Change was made for user to be abler to add item directly to Shopping cart after they reviewed all features of similar items on Wishlist Comparison screen.
Final Prototype
The Final Prototype below took into consideration almost all recommendations. In general users find it easy to discover location of the new feature. Additional buttons allowing item to be added faster to shopping cart, making some of the images larger and only seeing two images per raw allows better visibility of image for user. Making images better made text bigger and more visible. Design kept consistent with current one for SAKS OFF 5th Mobile Application.
Learning and Conclusion
Learning
-
Adding a feature to existing application was interesting and challenging. SAKS OFF 5th is a very well known brand. For this project I had to stay with the parameters and format of the original website and make sure that any additions will compliment the existing site but not require major changes on it.
-
On retail websites there are hardly any comparisons with additional features. One of the reasons is that it can slow down the purchase flow for customer. I had to work around this and come up with solution where will be most appropriate to have comparison feature.
-
User Interface was already existing and I had to be careful with recommendations not to interrupt or slow down user and task flows allowing user to make purchase needed.
-
Changes were made only on 2 flows - Wishlist and Shopping Category. I had to drop change in shopping card because there was a risk of slowing user and interrupting the shopping flow.
Conclusion
-
If I had more time would like to be able to work on standardizing features for SAKS OFF 5th and SAKS 5th Avenue.
-
The look of the website is a little bit outdated so I would love to work of better UI and UX Design for it. I think that this website will benefit from a little bit more sophisticated look as they are well known brand for luxury discounted items.