Boxed Product Detail Page

Product Detail Page

For this project, I was tasked with redesigning the product detail page to make it easier to read and navigate for our users.

Ideation

To approach this problem, we first had a brainstorming session with the mobile team. The whole mobile team, from myself to the product manager, to the engineers & QA team, got in one room and sketched out some of our ideas for the ideal product detail page, or PDP, in groups. We then each presented our solutions and found the overlaps in aspirations for our PDP, and kept track of those.

Next, we brought in users for a user test, and asked them to explore the PDP. We took note of what confused users and what they wanted to see there and cross referenced it with our own list that we had come up with. From there I move forward with redesigning the PDP.

PDP User testing script
Mobile Team Brainstorming
User Testing Takeaways

Competitive Landscape

Competitive Landscape Research for the product detail page

Visual design exploration

Since this was mostly a visual refresh and the majority of PDP functionality was staying the same, I was able to quickly move on to visual design exploration.

Pictured here is the existing PDP that we were improving upon.

The old PDP that we were striving to improve.
Product Detail Page Exploration
Dream-pdp@2x

Aspirational Designs

For the sake of thinking towards the future of Boxed, and preparing for new features that we may add down the road, I designed a version of the PDP that included features that Boxed doesn't currently have - such as a subscribe & save component and user generated reviews.


 

Aspirational Designs

For the sake of thinking towards the future of Boxed, and preparing for new features that we may add down the road, I designed a version of the PDP that included features that Boxed doesn't currently have - such as a subscribe & save component and user generated reviews.

Developer Handoff

After reviewing all of the different options with the team, we moved forward with one design and I prepped that with annotations for developer handoff.

half-PDP refresh notes@2x
other-halfPDP refresh notes Copy@2x
Annotatted screenshots for the new product detail page.