Richline Digital: eCommerce Product Feed Page Redesign

Our users and our team struggled to use Richline Digital's e-commerce platform's product feed page. The product tiles and filters were not flexible enough to support the company's expanding brand portfolio, and my user research revealed that very few people were able to find and use the product filters, especially on the desktop experience.

‍

Requirements gathering and preliminary design proposals

Duration: 2 weeks

My Roles

• Product Owner
• Designer

Phase Summary

This project involved navigating multiple stakeholders across our brand portfolios and differing brand requirements.
Armed with engagement analytics, findings from user interviews, and internal stakeholder feedback, I first created a round of rough mockups that reflected page format options for our internal stakeholders' consideration. I facilitated the prioritization of features and discussed flexible solutions to accommodate different brand strategies.

‍

Coding the final design proposal

Duration: 3 weeks

My Roles

• Designer / UX Developer
• Product Owner

Phase Summary

Once our team converged on a design direction and high-value features for the page, I elected to code a working prototype of the final design proposal. This way, I could demonstrate implementation approaches (like CSS grid) that would allow our marketing teams to easily customize and A/B test layouts across brands without relying on our development team to implement one-off changes.

‍

The prototype demonstrates responsive behavior and an administrative menu so that stakeholders can easily toggle to different feature settings while interacting with the design proposal.

Interact with the live prototype here!

Because I coded this design proposal, I was relieved of creating mockups for every brand, with every proposed configurable option, at multiple screen widths. It also allowed me to steer the front-end build in a way that supported future product endeavors, saving time for both my team and the engineering team.

This project influenced the team's prioritization of brand design systems and design tooling/methods that included coded specs in my team’s handoff workflow. After this project, design and development began working much more closely together, which increased our work's speed and quality. You can see this page in production on Gemvara.com, Silpada.com, Honora.com, or Jewelry.com.

‍