Project background

Rokid is specializing in the research and product development of Augmented Reality, Artificial Intelligence, and Robotics. This is an internship project I worked on during my time there as an website designer within the design team of three designers. I was responsible for the E2E design and development of the product page for Rokid Glass, which was launched in December 2018 during the CES show.

Rokid glass

Context and challanges:
CES
New AR product

My role

Full stack web design & development

Timeline

1 month

Challenges & Goals

Rokid glass is a brand new Augmented reality glasses the company was planning to release on 2017 CES show. Designing the product website for this product requires both deep understanding of the core features, as well as the technical details. During the process, while I was working closely with engineers, one of the challenge was developing the website when features are still not locked down.

CES Show

Technical challenges

Understanding market & scenario

Target scenario

Rokid glass is targeting on helping with people's everyday living , such as shopping, cooking and driving. These are critical scenario which hands-free display and voice assistant can help the most. In order to define the highlighted feature, I worked with principal designer together to create the discovery, concept work around user scenarios.

Process & Iteration

Final website launch

Exploration of design treatments

After fully researching on the product details, I started planning out the website design from scratch: the process goes from paper sketch, animated wireframes to high fidelity mock ups.

We also extended the website design to mobile browser platform.

Feature highlights

Key scenario highlights

In order to highlight the key scenarios, I created the assets with key user interface elements. By combining the real interface into the scenario thumbnail, audience can better picture using Rokid glass by themselves.

On-scroll animation

One of the highlight of the website is to provide the stunning "first glance" of the product. I was trying out this "on-scroll" interaction to create the website hero section.

Code it out!

I was responsible for design and develop the website as a E2E effort. With the goal to create a website with animation and special visual effects, I was utilizing and picking up new tools at the same time. To optimize some of the animation interaction, I used both js library, key-frame animation and 3D modeling together.

Animation js library

Key-frame animation

Bootstrap structure

Impact

The product website of Rokid glass was released and used as the promotional entry and contact point for visitors from the CES show to understand the product, and who potentially collaborate with Rokid. Through scanning the QR code in the show or in-page product subscription, we're also uutilizing the website to provide follow up updates about the products.