• Role: Product Designer • Solo Project • July - September 2023
Responsibilities
• Conducted competitor research • Identified current design standards • Designed for platform consistency • Closely collaborated alongside engineers • Presented to stakeholders
Tools Used
• Figma • Figma Mirror • Mobbin
CONTEXT
Refreshing the UI design to create a clean & cohesive shopping experience.
The Marketplace is Perpay’s ecommerce platform where users can shop and pay over time for home goods, apparel, and more. With newfound design flexibility due to the transition from using an open-source CMS to React, it was time for the business to refresh the look of their main product to better fit current design standards and ensure a cohesive look across company platforms.
With the MVP version focused on feature parity, I was tasked with leading the redesign for several pages, but decided to begin efforts by restructuring the search & filtering flow. To create a more consistent experience across pages, this would become a standard to design other pages around.
THE CHALLENGE
How can I improve the look and usability of the search & filtering flow?
PROJECT STRUCTURE
Using an agile methodology
This project spanned across a 6 week period using the agile framework. The team consisted of two commerce members, two engineers, the CCO, CTO, one product manager, & me as the UI/UX designer. 👋🏻
THE PROBLEM
Identifying current pain points in the design & functionality.
The existing marketplace design was outdated and didn’t match the design system of Perpay’s other products. The search and filtering process was cumbersome and not user-friendly, leading to disruptions in the customer's ability to find products for purchase successfully.
RESEARCH & EXPLORATIONS
How I approached the design direction.
To ensure that I had a clear understanding of best practices for search & filtering design, I conducted competitor research by looking at popular ecommerce storefronts as my inspiration. I then explored various ideations of the filtering flow, applying Perpay’s updated design system, and figuring out the ideal visual hierarchy for the pages. While the marketplace is usable on any device, I made sure to prioritize mobile-first design because 96% of user sessions were logged as using mobile devices.
Explorations of pages & components
REVIEWING DESIGNS
Determining feasibility & next steps with design critiques.
To make sure my ideas were in-scope and fit the requirements, I received creative feedback from
bi-weekly design critiques with the project’s stakeholders and developers, explaining my decisions and finding common ground on proposed changes. As requirements were redefined, I then made more iterations based on their feedback.
FINAL PROTOTYPE
The new search & filtering flow was deemed to be in scope.
After multiple rounds of the design and review cycle with mobile and desktop screens, the new search & filtering flow was finalized. To provide customers a well-rounded browsing experience, I implemented these 5 main functionalities:
Search Results & Swatches
With a new 2 column grid and integrated color swatches, customers are able to view more products at time. When users select a swatch, they are taken directly to its details page.
Sort Results
Customers now have the option to sort products by price, popularity, or relevance to further customize their browsing experience.
Filter by Spending Limit
Since every Perpay user has a unique Spending Limit, it was imperative to be able to only view products within their limit to promote smart spending behavior.
Quick Add Filters
Users are able to tap their desired filter type and the bottom sheet will auto open that section, making it quick and easy to find what they’re looking for.
Edit & Clear Filters
Tapping the main filter button takes users to the bottom sheet where they can view all their selected filters, add more, make adjustments or clear them all.
THE SOLUTION
The Before & After
Overall, the new search & filtering designs brought a clean and cohesive feel to Perpay’s Marketplace and provided customers with a seamless customizable shopping experience.
Old interface (first) vs new interface (second)
What does this solve?
🖌
up to date design system
⏱
less time spent scrolling
📈
increases product revenue
😄
encourages casual browsing
WRAPPING UP
Executing design-to-development handoff.
After polishing final design changes, I then organized handoff files in Figma for the engineering team to reference when building out the pages. I made sure to clearly showcase multiple user scenarios, include detailed interaction guides, and answer any questions to ensure a smooth transition, as my co-op was coming to an end.
ADDITIONAL IMPLEMENTATION
Integrating the new experience across Marketplace pages.
To ensure consistency across the platform, I later applied the new product grid and filtering experience to the redesign of additional product browsing pages in the Perpay Marketplace.
Collections (first) and Categories (second) pages using new designs
REFLECTION
What I learned from this project experience.
Working on this project was incredibly valuable. As the lead designer, I delved into design best practices in the ecommerce industry, improved my stakeholder management and cross-team communication skills, honed my time management abilities, and learned how to support engineering with handoff and QA testing. These experiences have not only enhanced my design skills but also my ability to manage complex projects effectively.
