UX Designer | Dog Lover | Marvel Fan
Matchbox Marketplace
Personalized Homepage Feature for E-Commerce App
Overview
The vision for this project was to create an e-commerce platform for buyers and sellers of collectibles that incorporated a sense of community and streamlined the search for specific collectibles.
​
The Challenge
Find a way to make an e-commerce site tailored to collectors that incorporated their sense of urgency and need for community.
Exploration
METHODS USED: ASSUMPTION MAP, USER INTERVIEWS, USER SURVEY
Key Findings
Existing Behaviors
A common theme emerged throughout discovery. Collectors have a deep rooted reason why they collect and dedicate a lot of time searching for their collectibles. They search multiple different e-commerce sites, online communities (e.g., Reddit, online groups), and physical stores. Collectors also mentioned a sense of urgency for rare, valuable, or popular items.
What isn't working
Visiting multiple sites and posting in group forums to find a single collectible is time consuming and frustrating, especially if the collector was not able to find or acquire the wanted collectible.
Opportunities
What Users Want
Ideal Personalized Homepage
According to research, an ideal personalized homepage would not feel invasive and would include suggestions based on past purchases/browsing history, favorite seller/items, sales/discounts, and notifications set by user.
Community
25% of collectors have already joined groups specific to what they collect and 25% said they would join a group/community if available.
Competitors
The competitors analyzed fell short in creating a sense of community, setting advanced preferences for notifications and visibility of items on homepage, and being a one-stop shop for collectors.
METHODS USED: AFFINITY MAP, PERSONA, JOURNEY MAP, PROBLEM STATEMENT
As an adult collector, I struggle with easily and quickly finding the items I collect online because going to multiple marketplaces, websites, and groups to search, browse, and gather information is time consuming and overwhelming
Biggest Areas of Opportunity
A personalized homepage with relevant and important information to the user at the forefront
Establishing a community of like-minded collectors
Insights to Implement
Advanced features such as local events, meetups, and option to view local buyer/sellers
Personalized homepage specific to collectors and their needs
Setting preferences to see only the types of items the collector is interested in
Creating a sense of community with social groups to join
Design, Test, Learn, Repeat
Test Early & Often
Low-Fidelity Wireframes
Sketched out user flows and then created low-fidelity wireframes from my user flows utilizing a pre-made UI Kit to be able to facilitate Usability Tests before creating the high-fidelity designs.
Usability Tests
Added some pictures into the wireframes to give the user context. The first round of user tests, gave me insight into where users may get stuck. I revised the designs before round two and retested. Overall I had success on most user goals, but two common themes emerged.
METHODS USED: SKETCHING, MVP, USER FLOWS, LOW-FIDELITY WIREFRAMES, USABILITY TESTING
Usability Tests
BEFORE
AFTER
Users had trouble finding the community quickly. Many looked in the bottom navigation, the menu, or the profile. Since community was a focal point, I wanted users to find it easily. I moved the community to the bottom navigation which reduced users time to find it by half.
BEFORE
AFTER
Users had trouble quickly locating the favorite/heart icon. I wanted to keep the icon on the image to save space for longer product names, so I added an option to add to the wishlist under add to cart. This helped a little, but I wanted to explore more solutions.
Development
UI Design
Style Guide
Created a style guide in Figma to make designing faster and easier for handoff.
Implemented Learnings
I added/revised the following in my high-fidelity designs:
-
The notification card was a focal point underneath the main header and gave collectors the opportunity to customize what notifications they wanted to see since collectors wanted to be notified quickly when items they collect are available.
-
Wanted to reduce the time to find the community even more so I moved the community icon to the right.
-
Moved the favorite/heart icon underneath the product picture and kept the add to wishlist text under the button.
METHODS USED: STYLE GUIDE/DESIGN SYSTEM, HIGH-FIDELITY DESIGNS, ,PROTOTYPING
Final Designs
UI Design
Style Guide
Created a style guide in Figma to make designing faster and easier for handoff.
Implemented Learnings
I added/revised the following in my high-fidelity designs:
-
The notification card was a focal point underneath the main header and gave collectors the opportunity to customize what notifications they wanted to see since collectors wanted to be notified quickly when items they collect are available.
-
Wanted to reduce the time to find the community even more so I moved the community icon to the right.
-
Moved the favorite/heart icon underneath the product picture and kept the add to wishlist text under the button.
Final Design
Implemented Learnings
I added/revised the following in my high-fidelity designs:
-
The notification card was a focal point underneath the main header and gave collectors the opportunity to customize what notifications they wanted to see since collectors wanted to be notified quickly when items they collect are available.
-
Wanted to reduce the time to find the community even more so I moved the community icon to the right.
-
Moved the favorite/heart icon underneath the product picture and kept the add to wishlist text under the button.
Round 3 Usability Tests
The third round of usability tests was a success after implementing the learnings from the first two rounds.
Conclusion
Based on the problem statement, I focused on creating a personalized homepage that helped users who purchased collectibles easily find what they wanted in one place.
​
What I Would Do Different
​
Research more participants
​
Build and explain more of the features implemented and do usability testing
​
Ideate on making the shopping experience feel like a treasure hunt