Lost Device Protection

Duration

1 Year

My Role

Front-end Developer

Responsibility

End to end Front-end Developer

Company

TrendMicro, Taiwan

Project Overview

01. Objective

The team wanted to redesign the existing TrendMicro mobile security for international. Also, we wanted to refactor our infrastructure for the future scale.

02. Role & Deliverables

In this project, I worked closely with Designers, PM and four engineers. I was responsible for the end to end web design, from mobile first to desktop responsive web design and API handling.

03. Challenges

This project had quite a few technical dependencies with other teams & products, we also needed to deal with many prioritizations to make sure we can deliver MVP on time.

04. Outcome & Impact

We launched the MVP in 3 months that increased our overall metrics significantly, especially it decreased the page loading time by 32%. We also received a lot of positive feedback from users.

Background

There was a project called Lost Device Protection when I worked at Trend Micro. The product team asked me to develop the next version for new UI and responsive web design. I used a bootstrap framework, I also assisted with the HTML & CSS for the mobile version of the site, and wrote a separate stylesheet specifically for the site when being viewed on an iPad.

View Website

Process

The PM was very happy with the designs and with the back-end already in place we were able to quickly move onto the build of the front-end.

I built the front-end “mobile-up”, meaning it was first created for mobile layouts, then using media queries and progressive enhancement additional styles and functionality were added for tablet and desktop.

To keep performance optimal, I used hardware acceleration for smooth animations across all devices, minimized and concatenated scripts, and used sprite sheets to keep the number of browser requests at a minimum.

Where possible, I relied on third-party libraries such as:

JQuery for general behaviours
Modernizr for testing browser features
Bootstrap for basic UI framework
Google Analytics for tracking performance
Google Map API to connect our service
JSON format to support L10n

The front end build process included the use of Grunt for automated tasks to speed up development and Git for version control.

Outcome

The Lost Device Protection site is a culmination of my skills in 2012, taking designs and converting them into a responsive, cross browser website, whilst maintaining the highest standard that Lost Device Protection offer their clients.

After the project finished, we have also created a Thousand Sunny ship for christmas event together!