ONLINE PORTFOLIO OF HEVAN CHAN
Homepage DesignThis concept put the Droid smartphones front-and-center by using slick photography as well as calling out specific details and features of each device. By utilizing a carousel-based system, users were able to learn about each device before they moved deeper into the site. The animation in the background, achieved through HTML5 and Javascript, featured the device you were currently viewing within the carousel. Three separate, 3D-rendered images of each device floated in the background to give the illusion of the phone as if it was floating through the air.

Homepage Design
This concept put the Droid smartphones front-and-center by using slick photography as well as calling out specific details and features of each device. By utilizing a carousel-based system, users were able to learn about each device before they moved deeper into the site. The animation in the background, achieved through HTML5 and Javascript, featured the device you were currently viewing within the carousel. Three separate, 3D-rendered images of each device floated in the background to give the illusion of the phone as if it was floating through the air.

Product Landing PageEach Droid had its own unique identity and personality which meant each device needed its own skinned landing page. As with the homepage, each device was featured predominantly with 3D-rendered images of the phone floating in the background.

Product Landing Page
Each Droid had its own unique identity and personality which meant each device needed its own skinned landing page. As with the homepage, each device was featured predominantly with 3D-rendered images of the phone floating in the background.

Full Specs ScreenInstead of creating a heavy, text-based overlay detailing each feature and specification of the device, I created "data sheets" that resembled schematics of the device. Each data sheet had a print-component which I created as an actual schematic that could be printed on 11x17 paper.

Full Specs Screen
Instead of creating a heavy, text-based overlay detailing each feature and specification of the device, I created “data sheets” that resembled schematics of the device. Each data sheet had a print-component which I created as an actual schematic that could be printed on 11×17 paper.

Full Specs ScreenInstead of creating a heavy, text-based overlay detailing each feature and specification of the device, I created "data sheets" that resembled schematics of the device. Each data sheet had a print-component which I created as an actual schematic that could be printed on 11x17 paper.

Full Specs Screen
Instead of creating a heavy, text-based overlay detailing each feature and specification of the device, I created “data sheets” that resembled schematics of the device. Each data sheet had a print-component which I created as an actual schematic that could be printed on 11×17 paper.

SlideshowWhile the data sheets were useful in detailing technical specifications of each device, the gallery slideshow allowed each device to show off features that truly made them stand-out. In this slide, users get a preview of the Droid DNA's camera UI and a few of its features.

Slideshow
While the data sheets were useful in detailing technical specifications of each device, the gallery slideshow allowed each device to show off features that truly made them stand-out. In this slide, users get a preview of the Droid DNA’s camera UI and a few of its features.

Beats Audio Slide

Beats Audio Slide

Wireless Charging Slide

Wireless Charging Slide

Video Player OverlayEach Droid had its own unique set of trailers and commercials. I worked closely with the dev team to create custom video player that could stream any of the device's promotional content.

Video Player Overlay
Each Droid had its own unique set of trailers and commercials. I worked closely with the dev team to create custom video player that could stream any of the device’s promotional content.

360º ViewThe user could spin any of the Droids in any direction in order to get a closer look at its detail and design.

360º View
The user could spin any of the Droids in any direction in order to get a closer look at its detail and design.

@