thumbnail image
broken image

Mark Pedersen

  • Home
  • Work
  • About
  • broken image

    Cell Signaling Technology

    Responsive Design Product Detail Page

  • broken image

    My Role

    Benchmarking

    User Research

    Ideation

    Sketching

    Wireframing

    broken image

    Timeframe

    Four Weeks

    broken image

    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

    broken image

    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).

    broken image

    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.

    broken image

    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.

    broken image

    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.

    broken image

    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.

    broken image

    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

Cookie Use
We use cookies to ensure a smooth browsing experience. By continuing we assume you accept the use of cookies.
Learn More