UI and Interaction Design
R5 Camera Webpage design
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.
I have also created this animation storyboard to help the team understand the animation we are trying to archive.
Estore Email Template Guide
After rebranding the Estore and align the branding to our brand website, we would like to unify the email design of our Estore. By check the click rate of each part the email template of last year, we understand 35% to 55% user click on the CTA on the first screen. And the longer email was, the less click rate we got.
To have this in mind, I created this template guideline to including logo, typography, colour, buttons and padding in a component-based, which also most importantly give the possibility for the marketing team to work more efficiently with our EDM dev team in Manila and deliver work in a limit timeframe.
The outcome is great, our E-store team able to give a simple and clear design brief using this guideline and designer and developers could easily using the existing components to deliver the EDM in a short turnaround.
Login Experience Redesign
Add “MyCanon Business” option in the Login page, so our business partners can easily get online with their CanonBusiness account and check all the purchase and delivery information by their own. My job is to demonstrate the result before coding it and present the design solution to the wider team.
Print Assist is an online service platform on the Canon website, aims to help customers set up their Canon printers and provide simple tips.
I worked with UX team and developers, translate wireframes into high fidelity design and interactive prototype using Sketch and Invision.