Panasonic iFrame

Project type:
Inline frame

My Contribution:
UI Design

Tools used:
Figma, Jira

Project timeline:
May - Dec 2021

Panasonic Eco Solutions Vietnam was one of the first company applied virtual reality (VR) to their e-commerce site in Vietnam. The company implemented the technology to help customers to have a clearer picture of the product they want via a virtual showroom where the user can buy the products directly.

Panasonic iframe thumbnail

Product Detail Page

Focusing on promoting "Quick buy" option without having to log in or register. I decided to show the product images and the details side by side to take advantage of the space since I don't want to make the users scroll too much in a pop-up. I used Figma to prototyping the UI states of my design.

product detail animated ui

How the user can interact with the elements using Figma prototype

View Specs - sub page

When click on View Specs, I shortened the original product information screen, only showing the most common specs and allowing the user to download the PDF file if necessary while keeping the "Buy now" and "Add to Basket" CTA in this sub-page.

product detail sub-page

Product detail sub-page

Check-out as guest flow

check out animated UI

Design strictly aligned with the Panasonic main e-commerce page.

Log-in and sign-up flow

log in animated UI

"Create an account" interactions

sign up animated UI

Log-in flow with phone number and email address interactions

Full flow prototype with interaction