Cell Signaling Technology
Responsive Design Product Detail Page
My Role
Benchmarking
User Research
Ideation
Sketching
Wireframing
Timeframe
Four Weeks
Tools
Pen
Paper
Sketch
The Challenge
CST's Product Detail page (PDP), hadn't been touched in many years. I was charged with providing a top-to-bottom revamp of the page - and to do it with responsive design - yielding three different versions of the page.
Original Product Detail Page
Benchmarking & User Research
Competitive benchmarking and user research was conducted during the USA and China field studies. The following findings were incorporated into the PDP redesign:
- Only 10% of participants could find Related (Companion) Products on the original Product Detail page
- All participants found the accordion (expansion) blocks cumbersome and dated
- Promotions should be placed at the top of the page in a banner
- Larger images of expected results are desirable
- Citations are the most important factor in purchasing decisions
- User reviews are an important factor in purchasing decisions
Ideation & Sketching
Next I launched into an ideation and sketching session. I sketched three different designs, settling on the bottom one, which truly highlights the image (expected results of experiment).
Wireframes
After settling on a design direction, I created the first iteration of the desktop wireframe. I then consulted with my design team, seeking suggestions for improvement and identifying which subject matter experts I need to speak with, to ensure that my design was technically feasible and scientifically accurate.
After incorporating suggestions and further ideation, I created a final set of wireframes and presented them to stakeholders.
Desktop Design
The desktop design is what is used by most users and features full functionality.
Tablet Design
The tablet design is similar to the desktop design, with respect to look and functionality. The Help & Documents sections and the buy brick have been moved from the right rail to underneath the summary area. With the increased presence of tablets in clinical and research settings, it was important to maintain the look and functionality of the desktop design, that most users are accustomed to.
Mobile Design
Although the mobile design offers full functionality, it comes in the form of a much more streamlined design. Additionally, the on-page navigation is now positioned horizontally rather than vertically, in a mobile-friendly manner.
Final Thoughts
Redesigning CST's PDP was an interesting experience. Having to present my designs to myriad business stakeholders - all of whom were eager to advocate for their own interests - required quite a balancing act, while I also defending my own design decisions. Going forward, usability testing of the PDP will be crucial. In particular, I'm interested in seeing how participants view the more social and robust user review feature.
© 2016