Collections

Collections

Collections

Collections

Collections

cln-imac2

Company
eBay

Company
eBay

Role
Product Design Lead

Scope
End to end experience

Scope
End to end experience

Scope
End to end

Duration
2015–2017

Collections are an enticing way of sharing products that eBay users are most passionate about. Collections empower eBay sellers to showcase their inventory to prospective buyers, while buyers take advantage of Collections as a visual shopping list, which they can share with friends and community.

Collections are an enticing way of sharing products that eBay users are most passionate about. Collections empower eBay sellers to showcase their inventory to prospective buyers, while buyers take advantage of Collections as a visual shopping list, which they can share with friends and community.

Collections are an enticing way of sharing products that eBay users are most passionate about. Collections empower eBay sellers to showcase their inventory to prospective buyers, while buyers take advantage of Collections as a visual shopping list, which they can share with friends and community.

Collections are an enticing way of sharing products that eBay users are most passionate about. Collections empower eBay sellers to showcase their inventory to prospective buyers, while buyers take advantage of Collections as a visual shopping list, which they can share with friends and community.

Video: How to Create Collections on eBay. Courtesy of eBay.

Video: How to Create Collections on eBay. Courtesy of eBay.

Strategy

Product strategy

Since first launched in 2013, Collections have proven to be one of the most fun and engaging eBay experiences with a rapidly growing user base. Over the course of two years, we have accumulated enough usage and UX data to identify user problems and define a UX vision for iterative evolution of the product.

Since first launched in 2013, Collections have proven to be one of the most fun and engaging eBay experiences with a rapidly growing user base. Over the course of two years, we have accumulated enough usage and UX data to identify user problems and define a UX vision for iterative evolution of the product.

ic-goal-01

Business goal

Business goal

Boosting overall engagement with the eBay platform by exploring alternative means for users to interact with eBay's product catalog.

Boost overall engagement on website by providing an alternative means for users to interact with eBay's product catalog.

ic-vision-01

UX vision

UX vision

Optimizing Collections experience by solving the most critical user problems and integrating with other products from eBay’s engagement portfolio.

Optimizing Collections experience by solving the most critical user problems and integrating with other products from eBay’s engagement portfolio.

Optimizing Collections experience by solving the most critical user problems and integrating with other products from eBay’s engagement portfolio.

ic-strategy-01

UX strategy

UX strategy

Translating UX vision into features and user stories, which subsequently populate product backlog and transform into interaction flows, prototypes, and final designs.

Translating UX vision into features and user stories, which subsequently populate product backlog and transform into interaction flows, prototypes, and final designs.

ic-metric-02

Success metric

Success metric

Setting benchmarks, tracking key performance indicators, and measuring corresponding metrics against established KPI goals to observe an increase in user engagement.

Setting benchmarks, tracking key performance indicators, and measuring corresponding metrics against established KPI goals to observe an increase in user engagement.

ic-roadmap-01

UX roadmap

UX roadmap

Based on UX studies and collected metrics, we have prioritized user problems and developed a product roadmap addressing high impact user problems and needs. Below is a compiled UX-focused excerpt from the original 2013–2017 product roadmap.

Based on UX studies and collected metrics, we have prioritized user problems and developed a product roadmap addressing high impact user problems and needs. Below is a compiled UX-focused excerpt from the original 2013–2017 product roadmap.

ic-structure-02

Team structure

Team structure

As a Designer, I was the hub for Product Owner, FE and BE engineers, Human Interaction Group, QE, Accessibility, product and design leadership, Legal, UX Research and Localization teams.

As a Product Designer, I worked with cross-functional team consisting of: Product Owner, FE & BE engineering team, Human Interface Group, QE, Accessibility, Product and Design Leadership and Localization teams.

ic-deliverables-02

Deliverables

Deliverables

I was directly accountable for the timely delivery of design and interaction specifications for both web (responsive desktop and mobile web) and native experiences (iOS and Android apps).

As a Collections Lead Designer, I was responsible for timely delivery of design and interaction specifications for both Web (responsive desktop and mobile web) and Native experiences (iOS and Android apps).

ic-process-02

Design process

Design process

In Product Organization, we practiced iterative design process applied to agile framework. Our work revolved around the principle of adding value while reducing friction. Throughout the entire process I closely engaged in cross-functional collaboration with other members of our team. While ideating, I routinely validated my ideas at weekly design reviews.

In Product Organization, we practiced iterative design process applied to agile framework. Our work revolved around the principle of adding value while reducing friction. Throughout the entire process I closely engaged in cross-functional collaboration with other members of our team. While ideating, I routinely validated my ideas at weekly design reviews.

wb

Our process had a cyclical nature where each round begins with discovery sessions in which the team discussed the outcomes of past launches, user problems, technical debt, and new features that we wanted to implement. We brainstormed, wrote user stories, prioritized and filled up product backlog. Design kickoff addressed one or several stories from the backlog, and defined a timeline along with success metric.

Our process had a cyclical nature where each round begins with discovery sessions in which the team discussed the outcomes of past launches, user problems, technical debt, and new features that we wanted to implement. We brainstormed, wrote user stories, prioritized and filled up product backlog. Design kickoff addressed one or several stories from the backlog, and defined a timeline along with success metric.

The creative stage would normally begin with research and competitive analysis followed by defining use cases, creating interaction and task flows. Rendered wires or mocks were validated by peers, PO, engineering, and accessibility teams then user tested. Upon delivery, I supported engineers to ensure accurate rendering of all design specifications. After release, we measured performance and acted upon the outcomes.

The creative stage begins with research followed by listing out use cases, creating interaction / interaction / screen flows, rendering wires and mocks, feature interview with the engineering team, user testing, and delivery. I provide my support to engineers to ensure accurate rendering of all design specifications. After the launch, we measure performance and discuss the outcomes.

ic-segmentation-02

User segmentation

User segmentation

User segmentation

ic-curator

Collection Curator

Collection Curator

Represented by in-house or freelance curators who generate premium content. This user group heavily relies on editorial collection features.

Represented by in-house or freelance curators who generate premium content. This user group heavily relies on editorial collection features.

Represented by in-house or freelance curators who generate premium content. This user group heavily relies on editorial collection features.

ic-influencer

Influencer

Influencer

Represented by eBay partners: bloggers, celebrities, and prominent users. Influencers rely on social tools for delivering their message to followers.

Represented by eBay partners: bloggers, celebrities, and prominent users. Influencers rely on social tools for delivering their message to followers.

ic-user

eBay Community

eBay Community

Represented by sellers and buyers who use Collections as a promotional platform for their listings or as a source of inspiration, respectively.

Represented by sellers and buyers who use Collections as a promotional platform for their listings or as a source of inspiration, respectively.

ic-newuser02

New Users

New Users

Represented by new users and occasional visitors. Often times, Collections serve as eBay's storefront dedicated to entice and delight perspective users.

Represented by new users and occasional visitors. Often times, Collections serve as eBay's storefront dedicated to entice and delight perspective users.

User icons. Courtesy of Simon Child.

User icons. Courtesy of Simon Child.

The product

Product strategy

While defining an ideal end to end Collections experience, we have relentlessly iterated on reducing friction in both user experience and performance.

Collections are a great way to gather and share things on eBay user likes, wants, or recommends. eBay sellers start Collections to show buyers what you have for sale, or share and organise your favorite eBay finds.

2014

2014

chrome-bar2
cln2015-3

v.1 Original Design

v.1 Original Design

The original design featured a card-based masonry editorial layout that could be easily customized by the Collection Creator inside the edit mode. An endcap consisting of related Collections and Buying Guides allowed for further exploration of the same topic.

The original design featured a card-based masonry editorial layout that could be easily customized by the Collection Creator inside the edit mode. An endcap consisting of related Collections and Buying Guides allowed for further exploration of the same topic.

2015

2015

chrome-bar2
2015-X

v.2 Intermediate Experience

v.2 Intermediate Experience

A clean and minimalist visual language of eBay's 5.0 native app influenced design updates on the web platform, including Collections. Besides the design refresh, we implemented multiple new features and optimized existing experiences.

A clean and minimalist visual language of eBay's 5.0 native app influenced design updates on the web platform, including Collections. Besides the design refresh, we implemented multiple new features and optimized existing experiences.

2016

2016

chrome-bar2
cln2016-X

v.3 Continuation Experience

v.3 Continuation Experience

In v.3, Collections underwent back end replatforming, which coincided with redefining how Collection content would be consumed. A frictional pogo-sticking experience was replaced by the continuous feed of relevant collections.

In v.3, Collections underwent back end replatforming, which coincided with redefining how Collection content would be consumed. A frictional pogo-sticking experience was replaced by the continuous feed of relevant collections.

Over the course of two years, my team and I have put the Collections experience through two evolutionary cycles and integrated the Personalized Collections experience on our native platforms. Thanks to close monitoring of product performance and critical analysis of every significant change in user behavior, we've been able to provide successful solutions in a timely manner. The examples below feature creative solutions to some of the user problems.

Over the course of two years, my team and I have put the Collections experience through two evolutionary cycles and integrated the Personalized Collections experience on our native platforms. Thanks to close monitoring of product performance and critical analysis of every significant change in user behavior, we've been able to provide successful solutions in a timely manner. The examples below feature creative solutions to some of the user problems.

Social tools

Social tools

Social tools

eBay curation staff, social influencers and eBay sellers needed additional social engagement tools to promote their Collections on our platform and outside of eBay.

eBay curation staff, social influencers and eBay sellers needed additional social engagement tools to promote their Collections on our platform and outside of eBay.

eBay curation staff, social influencers and eBay sellers needed additional social engagement tools to promote their Collections on our platform and outside of eBay.



We designed and successfully launched a set of tools that effectively expanded social engagement and diversified promotional capabilities:

We designed and successfully launched a set of tools that effectively expanded social engagement and diversified promotional capabilities:

We designed and successfully launched a set of tools that effectively expanded social engagement and diversified promotional capabilities:

dweb-persona1

Just like any other editorial content, a collection has an author who deserves proper credit for his or her efforts. This problem was solved by adding a "Curated by" section right below the collection. This section features the user’s profile picture followed by user name and profile summary, stats and “Follow” action. When a collection is viewed by its creator, “Follow” is replaced by an “Edit Profile” action, allowing the user to edit their profile summary without going to their user profile page.

Just like any other editorial content, a collection has an author who deserves proper credit for his or her efforts. This problem was solved by adding a "Curated by" section right below the collection. This section features the user’s profile picture followed by user name and profile summary, stats and “Follow” action. When a collection is viewed by its creator, “Follow” is replaced by an “Edit Profile” action, allowing the user to edit their profile summary without going to their user profile page.

Just like any other editorial content, a collection has an author who deserves proper credit for his or her efforts. This problem was solved by adding a "Curated by" section right below the collection. This section features the user’s profile picture followed by user name and profile summary, stats and “Follow” action. When a collection is viewed by its creator, “Follow” is replaced by an “Edit Profile” action, allowing the user to edit their profile summary without going to their user profile page.

Commenting tool

Commenting tool

Commenting tool

Social engagement is what Collections is all about. eBay users can now engage in a lively discussion using a newly designed commenting tool. To keep this tabbed section from resizing every time the user toggles between the "Curated by" and "Comments" tabs, we only display the latest comment while collapsing older comments. On the back end we have integrated automated spam and obscenity filtering.

Social engagement is what Collections is all about. eBay users can now engage in a lively discussion using a newly designed commenting tool. To keep this tabbed section from resizing every time the user toggles between the "Curated by" and "Comments" tabs, we only display the latest comment while collapsing older comments. On the back end we have integrated automated spam and obscenity filtering.

Social engagement is what Collections is all about. eBay users can now engage in a lively discussion using a newly designed commenting tool. To keep this tabbed section from resizing every time the user toggles between the "Curated by" and "Comments" tabs, we only display the latest comment while collapsing older comments. On the back end we have integrated automated spam and obscenity filtering.

dweb-comments

Embed card

Embed card

Embed card

Having on one hand, a growing demand for sharing capabilities and on the other, a limited selection of standard social sharing mechanisms, we started seeking a solution that could fill the gap in sharing capabilities. How could we provide a collection preview outside of eBay? An interactive embed card could promote collections far beyond established social networks. With this the user copies iframe code inside the share widget and pastes it to a blog or forum. This card featured flexible size 300-500px, a touch-friendly image slider with both drag and tap interactions support, showing top 5 collection images inside 3 slides, and the same sharing capabilities as the original collection.

Having on one hand, a growing demand for sharing capabilities and on the other, a limited selection of standard social sharing mechanisms, we started seeking a solution that could fill the gap in sharing capabilities. How could we provide a collection preview outside of eBay? An interactive embed card could promote collections far beyond established social networks. With this the user copies iframe code inside the share widget and pastes it to a blog or forum. This card featured flexible size 300-500px, a touch-friendly image slider with both drag and tap interactions support, showing top 5 collection images inside 3 slides, and the same sharing capabilities as the original collection.

Having on one hand, a growing demand for sharing capabilities and on the other, a limited selection of standard social sharing mechanisms, we started seeking a solution that could fill the gap in sharing capabilities. How could we provide a collection preview outside of eBay? An interactive embed card could promote collections far beyond established social networks. With this the user copies iframe code inside the share widget and pastes it to a blog or forum. This card featured flexible size 300-500px, a touch-friendly image slider with both drag and tap interactions support, showing top 5 collection images inside 3 slides, and the same sharing capabilities as the original collection.

Having on one hand, a growing demand for sharing capabilities and on the other, a limited selection of standard social sharing mechanisms, we started seeking a solution that could fill the gap in sharing capabilities. How could we provide a collection preview outside of eBay? An interactive embed card could promote collections far beyond established social networks. With this the user copies iframe code inside the share widget and pastes it to a blog or forum. This card featured flexible size 300-500px, a touch-friendly image slider with both drag and tap interactions support, showing top 5 collection images inside 3 slides, and the same sharing capabilities as the original collection.

Shoppable collections

Shoppable collections

Most Collections viewers found it frustrating that a majority of collections were infrequently maintained by their creators, resulting in multiple instances of sold-out items.

Most Collections viewers found it frustrating that a majority of collections were infrequently maintained by their creators, resulting in multiple instances of sold-out items.

Most Collections viewers found it frustrating that a majority of collections were infrequently maintained by their creators, resulting in multiple instances of sold-out items.



Our hypothesis was that a streamlined and simplified item replacement process would motivate collection creators to keep their collections shoppable.

Our hypothesis was that a streamlined and simplified item replacement process would motivate collection creators to keep their collections shoppable.

Our hypothesis was that a streamlined and simplified item replacement process would motivate collection creators to keep their collections shoppable.

Explorations

Explorations

Explorations

replace-expired-all

Prior to defining an image replacement experience, many questions had to be addressed during the exploration process:

  • Should we perform the replacements algorithmically or should we leave it to the user?
  • If the user is solely in charge of replacements, how would we motivate the user to perform replacements on a regular basis?
  • Where in the experience would the replacement mechanism make the most sense?
  • What would be the potential harm of auto replacement and what could be done to avoid it?
  • How accurate and useful could our replacement recommending algorithm be?

Prior to defining an image replacement experience, many questions had to be addressed during the exploration process:

  • Should we perform the replacements algorithmically or should we leave it to the user?
  • If the user is solely in charge of replacements, how would we motivate the user to perform replacements on a regular basis?
  • Where in the experience would the replacement mechanism make the most sense?
  • What would be the potential harm of auto replacement and what could be done to avoid it?
  • How accurate and useful could our replacement recommending algorithm be?

Prior to defining an image replacement experience, many questions had to be addressed during the exploration process:

  • Should we perform the replacements algorithmically or should we leave it to the user?
  • If the user is solely in charge of replacements, how would we motivate the user to perform replacements on a regular basis?
  • Where in the experience would the replacement mechanism make the most sense?
  • What would be the potential harm of auto replacement and what could be done to avoid it?
  • How accurate and useful could our replacement recommending algorithm be?

Inline replacement

Inline replacement

Inline replacement gives the most control to the user. Each ended collection item would provide up to five different replacement options and if the user is unhappy with all of them, the replacement could simply be rejected. We would keep the original item for some period of time and the user would be able to reinstate it if needed.

Inline replacement gives the most control to the user. Each ended collection item would provide up to five different replacement options and if the user is unhappy with all of them, the replacement could simply be rejected. We would keep the original item for some period of time and the user would be able to reinstate it if needed.

Inline replacement gives the most control to the user. Each ended collection item would provide up to five different replacement options and if the user is unhappy with all of them, the replacement could simply be rejected. We would keep the original item for some period of time and the user would be able to reinstate it if needed.

ManualReplaceFLow

Bulk replacement

Bulk replacement

Replace_Expired-page-level

A bulk replacement setting would live on collection page level and take care of replacements automatically if opted in. The user could still reinstate the original listings if unhappy with algo-driven choices.

A bulk replacement setting would live on collection page level and take care of replacements automatically if opted in. The user could still reinstate the original listings if unhappy with algo-driven choices.

A bulk replacement setting would live on collection page level and take care of replacements automatically if opted in. The user could still reinstate the original listings if unhappy with algo-driven choices.

Hybrid replacement

Hybrid replacement

Unlike bulk replacement which occurs on page level, hybrid replacement is an automatic item level replacement. The opt-in / opt-out toggle switch is located inside the "Add to Collection" dialog. Additional replacement settings are located on the item list of actions, inside the edit mode.

Unlike bulk replacement which occurs on page level, hybrid replacement is an automatic item level replacement. The opt-in / opt-out toggle switch is located inside the "Add to Collection" dialog. Additional replacement settings are located on the item list of actions, inside the edit mode.

Unlike bulk replacement which occurs on page level, hybrid replacement is an automatic item level replacement. The opt-in / opt-out toggle switch is located inside the "Add to Collection" dialog. Additional replacement settings are located on the item list of actions, inside the edit mode.

Hybrid-replacement



Upon testing replacement tools, we discovered that most of our users were very particular about preserving the original items because they provided access to specific ended listings users care about.

Upon testing replacement tools, we discovered that most of our users were very particular about preserving the original items because they provided access to specific ended listings users care about.

Upon testing replacement tools, we discovered that most of our users were very particular about preserving the original items because they provided access to specific ended listings users care about.

Collections on small screens

Collections on small screens

The mobile versions of Collections were not aligned with the desktop experience because they were lacking the parity in layout treatment, UI, and most of the functionality.

The mobile versions of Collections were not aligned with the desktop experience because they were lacking the parity in layout treatment, UI, and most of the functionality.

The mobile versions of Collections were not aligned with the desktop experience because they were lacking the parity in layout treatment, UI, and most of the functionality.



We decided to boost the engagement on mobile platforms by scaling down some of the most essential features, making the mobile Collections experience more familiar and painless.

We decided to boost the engagement on mobile platforms by scaling down some of the most essential features, making the mobile Collections experience more familiar and painless.

We decided to boost the engagement on mobile platforms by scaling down some of the most essential features, making the mobile Collections experience more familiar and painless.

Mobile web

Mobile web

Collections header

Collections header

Collections header

The Collections header consists of a mandatory collection title and optional header image, subtitle, and intro copy. We optimized mobile layout to make collections presentable at any level of header completion.

The Collections header consists of a mandatory collection title and optional header image, subtitle, and intro copy. We optimized mobile layout to make collections presentable at any level of header completion.

The Collections header consists of a mandatory collection title and optional header image, subtitle, and intro copy. We optimized mobile layout to make collections presentable at any level of header completion.

Collections footer

Collections footer

Collections footer

We enhanced mobile collection experience by adding a fully functional footer with creator information and a commenting tool.

We enhanced mobile collection experience by adding a fully functional footer with creator information and a commenting tool.

We enhanced mobile collection experience by adding a fully functional footer with creator information and a commenting tool.

Editing capabilities

Editing capabilities

When viewing one’s own collection, the collection creator may edit collection content with a fully functional editing tool, containing all the capabilities of the desktop editing experience.

When viewing one’s own collection, the collection creator may edit collection content with a fully functional editing tool, containing all the capabilities of the desktop editing experience.

When viewing one’s own collection, the collection creator may edit collection content with a fully functional editing tool, containing all the capabilities of the desktop editing experience.

Native apps

Native apps

Add to collection on native apps

Add to collection on native apps

Add to collection on native apps

A previously missing "Add to collection" feature on native applications has greatly improved the overall Collections experience on Android and iOS by boosting the user's capabilities of interacting with Collections. Because Collections are just a visual form of Watchlist,the Add to Collections feature was paired with the Watch action. This prototype demonstrates how this listing can be added to a collection that is being created and set to Private mode within the same flow.

A previously missing "Add to collection" feature on native applications has greatly improved the overall Collections experience on Android and iOS by boosting the user's capabilities of interacting with Collections. Because Collections are just a visual form of Watchlist,the Add to Collections feature was paired with the Watch action. This prototype demonstrates how this listing can be added to a collection that is being created and set to Private mode within the same flow.

Interactions

Interactions

Some of the areas within the Collections experience were perceived by our users as tedious and boring and required a different approach.

Some of the areas within the Collections experience were perceived by our users as tedious and boring and required a different approach.

Some of the areas within the Collections experience were perceived by our users as tedious and boring and required a different approach.



We overturned this perception by developing engaging interactions dedicated to guiding users through a series of otherwise tedious tasks.

We overturned this perception by developing engaging interactions dedicated to guiding users through a series of otherwise tedious tasks.

We overturned this perception by developing engaging interactions dedicated to guiding users through a series of otherwise tedious tasks.

Image header

Image header

Image header

Originally, only curated Collections had image header capabilities. After this proved to be a success, I optimized image header interactions inside the edit mode and made it available to the public.

Originally, only curated Collections had image header capabilities. After this proved to be a success, I optimized image header interactions inside the edit mode and made it available to the public.

Originally, only curated Collections had image header capabilities. After this proved to be a success, I optimized image header interactions inside the edit mode and made it available to the public.

Video header

Video header

Per popular demand, we introduced video support capability inside the collection header which greatly enhanced collection creators’ storytelling abilities.

Per popular demand, we introduced video support capability inside the collection header which greatly enhanced collection creators’ storytelling abilities.

Per popular demand, we introduced video support capability inside the collection header which greatly enhanced collection creators’ storytelling abilities.

Legal footer

Legal footer

The collection Continuation experience posed some challenges for us. One of these challenges was about displaying a footer with mandatory legal information within the endless scroll experience. We solved this by displaying a floating "Legal & more" action right below the fold (where normally the footer should be). Upon clicking this action, we would surface a bottom drawer with the footer.

The collection Continuation experience posed some challenges for us. One of these challenges was about displaying a footer with mandatory legal information within the endless scroll experience. We solved this by displaying a floating "Legal & more" action right below the fold (where normally the footer should be). Upon clicking this action, we would surface a bottom drawer with the footer.

The collection Continuation experience posed some challenges for us. One of these challenges was about displaying a footer with mandatory legal information within the endless scroll experience. We solved this by displaying a floating "Legal & more" action right below the fold (where normally the footer should be). Upon clicking this action, we would surface a bottom drawer with the footer.

Outcomes & takeaways

Outcomes & takeaways

While evolving the Collections experience, we witnessed a significant growth in user engagement. The latest evolution of a collection page paired with continuous browsing experience influenced the development of the Articles publishing platform. Although we didn't achieve our goal in creating shoppable collections, we created a powerful community-driven product discovery tool which helped many users to discover new interests.

While evolving the Collections experience, we witnessed a significant growth in user engagement. The latest evolution of a collection page paired with continuous browsing experience influenced the development of the Articles publishing platform. Although we didn't achieve our goal in creating shoppable collections, we created a powerful community-driven product discovery tool which helped many users to discover new interests.

While evolving the Collections experience, we witnessed a significant growth in user engagement. The latest evolution of a collection page paired with continuous browsing experience influenced the development of the Articles publishing platform. Although we didn't achieve our goal in creating shoppable collections, we created a powerful community-driven product discovery tool which helped many users to discover new interests.



While designing collections, I had a lot of fun solving challenging and sometimes unusual problems, while discovering how eBay product organization operates and getting a sense of the eBay user base.

While designing collections, I had a lot of fun solving challenging and sometimes unusual problems, while discovering how eBay product organization operates and getting a sense of the eBay user base.

While designing collections, I had a lot of fun solving challenging and sometimes unusual problems, while discovering how eBay product organization operates and getting a sense of the eBay user base.