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.

↑
↑
↑

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.

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

Check-out as guest flow

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

Log-in and sign-up flow

"Create an account" interactions

Log-in flow with phone number and email address interactions

Panasonic iFrame