Product Page: E-commerce

The Challenge

  • Redesign the product page to provide a connected experience to the user across web, mobile apps, email channels and in the store
  • Define page elements as reusable components; document and include components in the Design System (Sketcha proprietary vector graphics editor for Apple's macOS, developed by the Dutch company Bohemian Coding. Sketch was first released on 7 September 2010.) and Component Library (Reacta JavaScript library for building user interfaces. It is maintained by Facebook and a community of individual developers and companies. React can be used as a base in the development of single-page or mobile applications... More)
  • Create variations of page/view layouts for A/B and Multivariate testing
  • Test with users, critique, iterate and improve the Product View during 2-week sprints

 

User Flows

Research data and analytics gathered from close collaboration with Research and Analytics teams, provided me with a foundation to quickly start creating user flows.

Wireframes

After defining flows, I moved on to analyzing the existing page templates and create wireframes to define atomic components.

WireframeWireframe is a rough guide for the layout of a website or app. A prototype is similar in that while far from being a polished product in terms of visuals or functionality, it gives an indication of the direction that the product is heading. “Mockups” is the term I use for wireframes that have been created in high fidelity, but for some people these 3 terms are interchangeable.... More overview of Product Page components

With the basic components in place, it is time to dive into details by analyzing page templates and making improvements to individual components. We take into account all user scenariosA scenario is a narrative describing “a day in the life of” one of your personas, and probably includes how your website or app fits into their lives. defined in the Research phase. At this stage, it is very important to make a lot of iterations and critique the design as often as possible to come to solid solutions which could then be further filtered.

Prototypes & Testing

With defined components and wiferames in low and high-fidelity, we are able to move on to integration of the designs into Design System UI Kit and Component Library. I also designed a visual overview of different testing processes and facilitated the technical side of user testingSitting users in front of your website or app and asking them to perform tasks, and to think out loud while doing so..