Web Design

Product Page Redesign

My Role
Web Designer
Timeline
Sep 2020

We aim to create a new online experience of our product page with the R5 camera launching.

In order to create the best experience and I gathered all the key stakeholders from the product, content and development team)  to conduct a design workshop.

I encourage all the attendance to sketch their ideal page in their mind and share with other people, also share a webpage they like and why. At the end of the workshop, we come out with one ‘design’ that everyone in the room agreed with.

The outcome of the workshop:

In each yellow stick notes (see image above), I wrote down the elements or content we all agreed with. And I set up a visual workspace (we use Mural), which allow stakeholders to see the design progress and collaborate with design and development team. I delivered the low fidelity to mid-fidelity design and work with the dev team to make it alive. We decided keeps it simple by using large areas of white space and big margins to focus on single areas of content, and ideally, it will be a single scrolling long page with meaningful animation.

Low fidelity to High fidelity:

I created this animation storyboard to help the team understand the animation we are trying to archive.

Final Results