Designing for tomorrow

Tidy.rent

More details coming soon -- and we've since pivoted to AskMinka, so visit AskMinka.com for more info!

 
 
 

Role

• Marketing & Brand      • Business & Operations      • UX / Research / Validation

 
tidyrent-title.png

Xbox.com Redesign

The previous Xbox.com redesign was back in 2010 and with the launch of Xbox One, it was time to modernize everything again and make improvements across the site. I was brought on as Sr. UX designer to help revamp the website for launch within 3 months and it was a fun experience.

 

Starting At the Ground Level - Information Architecture

One of my main responsibility was to look at the entire website's information architecture and update it to accommodate modern needs. With social, home entertainment, games, and improvements to Xbox Gold accounts I made sure the result was a sustainable hierarchical structure that can scale. Admittedly due to time constraints, most of the decisions were made based on past study reports, card sorting with users, coupled with internal feedback but we were confident the new structure would take us a long way.

 

The New Navigation

Naturally after the architectural framework was done we set out to redesign the global nav -- which is what most users will be interacting with on the site. We explored dozens of designs to breath more life into the future navigation and also designed specially for the tablet and mobile experiences.

 

On desktop the new navigation design freed up 132% more screen real-estate for content and matched Xbox One's new user interface perfectly. One of the biggest hurdles when redesigning the nav was actually not the design itself, but in convincing stakeholders that we must consolidate 'Video' and 'Music' into a single 'Entertainment' category and this took an entire month of work. Presently (as of 2016), the Entertainment nav tree has grown folds already to accommodate more content and I am glad to see the efforts I put in being well worth it.

 

A Modular Design Approach

One of the spotlights of the redesign was making the site responsive and always looked at its best regardless of content. To achieve this the team approached the designs in a modular way right from the beginning. Various different modules that could be used on the site were crafted to allow maximum flexibility in displaying different types of content while maintaining site integrity. The modular approach enabled marketing teams to make frequent updates to the site content efficiently from selected templates and not break the fidelity of the design.

It was quite a rigorous process going back and worth with internal and external stakeholders to make sure we could accommodate all content types and developed a modular system that could scale and work with one another. The result was a set of templates along with samples and clear guidelines.

 

Social Systems

Our last design sprint was spent on a major feature of Xbox One -- the improved social experience. The new social experience includes new ways to make friends, new social activity feed, new achievement experience, and new shareable content such as gameplay videos.

The biggest hurdle in designing the online counter-part of the social experience was to make sure the designs were compatible for Xbox 360 and Xbox One users and their content, especially when many users still have both systems. With deadline approaching the team still designed to push the envelopes of how we can make the then-stagnant activity feed engaging for the next generation of users. Again the modular approach was taken in designing and refining templates for different content, system, and types of users (surprise! Not all Xbox users are gamers). We went as far as designing content that don't exist yet on the Xbox One system in anticipation of possible future features and updates, or in hopes of influencing the console team to consider them for future releases.

Get a glimpse of the before and after user profile and brand new activity feed below:

 

A True Team Effort

The entire redesign involved intense team effort and collaboration. There were countless brainstorming sessions, multiple design iterations in a single day, bouncing source files around none-stop, and the much needed 'Halo game-break' where we can finally be enemies. Nothing was under our radar, as even design improvements were made to support, account management, and payment pages.

Check out all this on xbox.com.

 

Role

• UX / Visual Designer      • Information Architect      • Prototyper

 
xbox-title.png
wavii01.jpg

Wavii App

Wavii* is your app for instant news on any topic. Follow any topics in the world including any celebrities, tech companies, politicians, Olympics, or even general topics such as Product Updates, Earnings Reports, and more. At its heart it is the natural language processing technology that makes Wavii unique.

NOTE*  Wavii was acquired by Google as of April, 2013 and the service is no longer supported.

 

The Brand Refresh

When I joined Wavii it was just about to exit private beta with a website and a V1 iOS app. As the Wavii's first full-time UX Designer there was much to do. Existing brand assets were updated including a more modern color swatch, cleaner and easier to read type treatments, and many internal templates. The refresh wasn't just on the surface, it was aimed at the whole company inside out.

 Wavii Rebrand

Wavii Rebrand

 

The Full Circle

Working together with the CEO & PM we began to refine and shape the "Wavii experience eco-system" from focusing on external sharing to attracting news users and retaining them. Expose new users to wavii, have them learn about it, use it, and then love it. Features, interactions, and the finest details all revolved around these core values.

 Completing the Engagement Cycle

Completing the Engagement Cycle

One of the biggest features Wavii introduced was news polls. Users were required to vote before seeing the poll results to ensure participation and we made sure that voting was easy.

 

After voting, we also introduced a quick share feature that allowed users to share the results with a single tap.  With the introduction of these features social activities in the app increased by as much as 80% and at least 20% of users who've stopped using the app came back on a weekly basis.

 Wavii Poll in Action

Wavii Poll in Action

 

Refining the Experiences

Aside from introducing new features the existing designs were also redesigned to ensure a great experience from signing up all the way to using, engaging, and sharing with the app. One of the biggest refinements was the 1st time on-boarding experience which went from 0 introduction about Wavii and a lengthy setup process to a short concise introduction and 0 setup. By providing extremely detailed specs and working closely with FE (front-end) engineers the on-boarding experience is one of the highest rated parts of the Wavii experience from user testing.

 Sketch Designs & Detailed Animation Specs for the 1st Time Experience

Sketch Designs & Detailed Animation Specs for the 1st Time Experience

 The On-boarding Experience

The On-boarding Experience

 

Refining the Process

With limited resources as a startup a wide range of tools were utilized to conduct surveys, get user feedback, and track usage data. Usability testing templates were created to speed up the process and we even went as far as sitting at Starbucks with a sign stuck onto the laptop to attract users to volunteer in short usability testing sessions.

 Validating the Designs

Validating the Designs

 
 Beautiful Emails  |  User Testing Templates + Data + Reports

Beautiful Emails  |  User Testing Templates + Data + Reports

 

Another major refinement to the process at Wavii was the ownership of design where the designer used to take ownership of the entire experience. The ownership was eventually spread across different FE's where designers acted as consultants and just provided high-level design directions, templates, and general guidelines so multiple features could be designed and implemented at the same time. This process introduced design-thinking to engineers and helped the entire team grow together.

Initial Design Process

Evolved Design Process

 

Every Detail Matters

One aspect of Wavii that we spent the most time on was the news feed. Being something users interact with primarily on a daily basis we were very careful on designing it to strike a good balance of legibility VS readability where the feed would be easy to read, but also fun and quick to scan through.

Experiments on font sizes, colors, layout, and ratio of UI elements were performed while accommodating new features at the same time. Almost every week there'd be some changes to the news feed design itself. 

 News Feed Iterations

News Feed Iterations

 

The Redesign

Ultimately due to the refinement on process design changes happened faster, smoother, and with less turn-around time. Feature introductions, design validations, and usage data collection were all more efficient allowing the team to do more with less time. Below is a comparison of the original Wavii app VS the redesigned V2

 Wavii App V1 Before Redesign

Wavii App V1 Before Redesign

 
 Wavii App V2 After Redesign

Wavii App V2 After Redesign

 

Role

• Lead UX / Visual Designer      • Prototyper      • UX Researcher      • Internal Consultant      • Co-Copy Writer

 
wavii-title2.png

Timer. App


It’s a timer that repeats over and over again. Set for 2 seconds and breathe with it or set 30 seconds for workout sessions. It’s that simple. 

 Say hello to Timer.

Say hello to Timer.

 

How It Began

Workout is great, but every time I go I keep staring at the time elapsed because I go for 30min sessions. So how can I tell time without constantly staring at a clock? 

Listening to songs is one way but a song is no longer enjoyable when you’re using it to measure time -  so the Timer. idea was born.

A repeating countdown clock that signifies time-pass by playing a sound / vibrating so you don't need to stare at the screen.

 

timer01.jpg
 

Uses of It

After formulating the idea I brainstormed different uses of such a timer and wanted to validate the need and scope of it. Some immediate uses include:

  • Cooking: flipping a steak over every 1:30 few times.
  • Workout sessions: 30 sec, followed by 10 sec break, repeat.
  • Sleeping in: “snooze” every 5 minutes.
  • Power Hour: a beer shot every minute for 60 minutes
timer02.jpg
 

The Design

The app was designed with a simple goal in mind: To make setting-up and running as simple as possible with minimal distractions. However, there also needs to be room for possible feature expansion in future such as in-app purchases or additional functionalities. As a result the navigation was designed as a series of "pages" user may swipe left or right to navigate around. This structure would easily accommodate expansion along with a separate Settings page that additional features would go in to.

 Flow + Design Wireframes

Flow + Design Wireframes

 

After the initial design was completed the wireframes were taken and repackaged into a prototype that could be interacted and viewed on the phone to get user feedback and to show the developer transitions between each screen.

 Wireframe Prototype

Wireframe Prototype

 

The result is a stunningly simple countdown clock that works in any situation you may need it in -- especially with the ability to add a 2nd and 3rd timer that can be set with different times. Users can set "varied timers" and then save it as a set together for quick access in the future. The possibilities are endless.

  Final Design - 1st Time Intro  |  Timer Running  |  Preset Timers

Final Design - 1st Time Intro  |  Timer Running  |  Preset Timers

 

In order to clearly illustrate how the app functions so the team can get a perfect sense of the design  an animated prototype of the core functions was built in Flash.

And here's the final product in action with a video preview we've created for the App Store -- which was surprisingly painful to create and you can read all about it here.

 

Role

• Initiator      • UX / Visual Designer      • PM      • Prototyper      • Marketing

 
timer-title2.png

Grindr App Redesign

With 4.5 million guys in 192 countries, Grindr is the world’s biggest and best same-sex social app for dating and friendship.

 

This is a personal project to redesign an app for exploration & learning purposes. I decided to choose a unique app which I am unfamiliar with and where a better experience would greatly benefit the users and community. Below is a before and after comparison of the result.

 

 Before and After Comparison

Before and After Comparison

 

Product Shots

GRINDR.jpg
 
GRINDR.jpg

LittleMusique App (in works)

The LittleMusique app is a joint production with Simusique to create an iPad app for toddlers and kids to learn and enjoy music.

littlem01.jpg
 

How It Began

I stumbled upon a series of songs for kids with complete music scores, lyrics, and recorded vocals from Simusique and proposed for it to be productized for kids.

 Original Music Scores & Lyrics

Original Music Scores & Lyrics

 

After successfully selling Simusique of the idea we worked together on narrowing down the best tracks for the app along with the activities that would go with each song. Some would be more interactive than others but the core concept was to have kids enjoy music while learning and feel rewarded from it -- let it be weather, days of the week, or animal sounds. From there we moved to rough sketches of each concept, flushing out more details of each song.

 Track List & Ideas

Track List & Ideas

 

The Design

A systemized navigation was designed for easy development and expansion in the future while allowing full flexibility for the kids to enjoy each song however they want. We know that kids are very unpredictable so the app design must be "unbreakable", allowing magic to happen anywhere they touch.

 Main Navigation Architecture

Main Navigation Architecture

 

*The LittleMusique app is currently still in the design phase looking for illustrators and developers to help us make this dream come true.

 Rough Designs of LittleMusique App

Rough Designs of LittleMusique App

 

Role

• Initiator      • UX / Visual Designer      • Illustrator      • PM      • Sound Producer

 

 
littlem01.jpg

Trend Micro DirectPass App

Trend Micro™ DirectPass™ manages website passwords and login IDs in one secure location, so you only need to remember one password.

 

 

Defining Users & Scenarios

As with any product and design it is important to define and understand your target audience. Working closely with the PM, UX researchers, and marketing team we defined the target users, major scenarios, and flow before any design commenced. Rough hand sketches were used to quickly delivery the concepts and ideas to the team and get agreement from all stakeholders. We call it the visual MRD (marketing requirement document).

 Personas & User Scenarios

Personas & User Scenarios

 

Designing & Managing

After completing the initial designs major tasks fall onto managing internal resources ranging from visual designer, front-end developers, tech writers, to ux researchers for usability testing in order to deliver finalized designs on time to the engineering team.

 Design Wireframes
 

Wearing Multiple Hats

Due to limited resources I was responsible for everything from interaction designs, wording, scheduling, to initial visual design styles until dedicated visual designer was brought onto the project to help polish and visualize the remaining designs before user testing.

 Scheduling & Resource Management

Scheduling & Resource Management

 

The Final Design

idsafe04.jpg

*A later version with different designs is the latest on the app store

idsafe05.jpg
 

Role

• UX / Visual Designer      • Prototyper      • Design Resource Management

 
 
idsafe-title2.png

Trend Micro Mobile Security

Trend Micro Mobile Security Personal Edition for Android stops threats before they reach you. Mobile Security has antivirus, anti-spyware, web filtering, backup, social networking privacy, and anti-theft features.

 

Understanding Partners, Business, and Culture

Trend Micro Mobile Security is one of the first Android apps I've worked on so being an iPhone user understanding the Android design language and guidelines was a big challenge. Designing was actually the easiest part as the product was intended for OEM (Japan primarily) partners across the sea including major mobile carriers like SoftBank and KDDI.

tmms01.jpg
 

In charge of leading the design and overseeing the entire user flow to fit different business models, this is a project spanning across 3 different cities and designers. Most of the design and engineering work were done in Taipei (Taiwan) and Nanjing (China) with the business team in Tokyo (Japan). 

tmms02.jpg
 

With only 3 months to complete the product building off of Trend Micro Mobile Security version 1.0, this was more of a reboot than a upgrade or redesign.

 Resource management and tons of business models to understand and fulfill.

Resource management and tons of business models to understand and fulfill.

 

With so much to understand and get done in such a short time there was a lot of help from our UX researchers on quick user studies and competitive analysis. On top of the studies, our Japanese team even helped us through the entire purchasing flow from carriers in Japan so we could experience it and understand it ourselves.

 It's a whole new world with cellphones you've never seen or imagined before

It's a whole new world with cellphones you've never seen or imagined before

 

The Design

There's an app and a web portal aspect to Trend Micro Mobile Security. With web portal visuals being outsourced I was tasked to lead the design direction for the Android app before passing it off to our visual designer in Nanjing. After a lot of trips and communication the visual style was eventually consolidated and unified, which would then also serve as a guide for the web portal designs.

 Lead, consolidate, and refine.

Lead, consolidate, and refine.

 

The result is a collaborative global team effort with great easy-to-use experience for Trend Micro Mobile Security users.

 Trend Micro Mobile Security Web Portal & Android App

Trend Micro Mobile Security Web Portal & Android App

 

Role

• Design Lead + UX / Visual Designer      • Design Resource Management      • Prototyper      • Researcher

 
 
tmms-title2.png

Trend Micro Backup & Restore App

Trend Micro™ Mobile Backup and Restore automatically stores the irreplaceable information from your Android device in a secure, virus-free environment.

 

The Task At Hand

After leaving Trend Micro I was contracted as a freelancer to co-work with the product's UI designer on polishing and finalizing Backup and Restore's interaction and design. Together, we refined the flows, experiences, and created new design patterns in addition to the existing library.

 

Refreshing color scheme along with unique icons would set the tone for Trend Micro mobile apps from here on.

 Icon Designs & Detailed Specs

Icon Designs & Detailed Specs

 

Final Design

The resulting design is a beautiful Android App that is pleasant to use without the normal "techy feel" of a security app. Colorful and animated UI made the Backup and Restore app professional, secure, and easy to use. Backup isn't just for the techy-professionals, it's for everyone.

 

Product Shot

b&r08.png
 

Animated demo showing UI transitions.

 

Role

• UX / Visual Designer      • Prototyper

 
 
b&r08.png

Just.Decide (in works)

A simple tool that helps you get decisions made across any platform and with anyone. 

 

How It Began

We often need to make decisions among friends such as where's dinner? when are we meeting? where do you want to go this weekend?  As convenient as social services and messaging apps are these days, we often get side-tracked and fail to focus on the original goal of making a decision.

 Polls Can Be Difficult

Polls Can Be Difficult

The goal of the app is to centralize all your decision making into a poll that's universal and could be easily sent and accessed by any of your friends on any device. Efficiency is the primary goal and eliminating the need to create additional accounts for or on any services you don't already have.

Initial design is a simple website optimized for desktop and mobile to allow easy access from anywhere with a long-term prospect of platform-specific apps for additional features. Eventually the service will be made into plugins and provide API for other services you already use such as Facebook, Wechat, and Wordpress.

 

 The difficulties of trying to be constructive

The difficulties of trying to be constructive

fd03.jpg
 

The Design

 Wireframe Designs + Mobile Prototype

Wireframe Designs + Mobile Prototype

 

Users will be able to create their own polls with expiration in 1 step and blast it out to friends through email, sms, Facebook, or unique codes. Voting is simple with scheduled reminders to remind those that forget quickly.

 Mobile View Design

Mobile View Design

 

Role

• Initiator      • UX / Visual Designer      • PM      • Prototyper

 
fd-title.jpg

TripleHex Game

This is a game for the Windows 8 App Store that a group of developers built. I was approached after they've  finished the game for a redesign, so working under the constraints of what was built already I did a visual over-haul of the game.

 

The Design

The game mechanics and architecture were set already when I was brought onto the project so it was mostly a visual-upgrade for the game. I designed it based on a "beaming" theme where the hex blocks would be beamed out when matched in 3's and carried the style over to the main menu where the hex-block foundation was strengthened as well. 

 

Highlight

One of the mechanics of the game was that new hex blocks would appear every 5 seconds. So instead of a separate count down timer that could distract players, I introduced the concept of "progressive-hex" where adjacent hex blocks would fill up slowly over 5 seconds; and when filled it meant 5 second was up and the hex block would appear.
 
The design was published in a book on GUI Design by Sendpoints Books Co., Ltd.

 

 

Role

• Visual Designer     • Game Designer

 
 
triplehex05.jpg

MatchIt Game (Multiplayer coming soon)

MatchIt is a card-flipping game for Windows 8 where players can test their memory against the world or with themselves on different difficulties.

 

The Design

The MatchIt game mechanic is simple: flip 2 matching cards to get rid of them from the board until no more cards are present. Players are ranked according to the time and moves spent with 3 different difficulties available for play online and offline. While playing online all players in the game will be presented with the same randomly generated tile-set to ensure fairness. 

I asked each team member to sketch up to 5 icons for use with version 1 of the game and the result is a lively, casual, but fun tile set that everyone's proud of. Game soundtrack produced with GarageBand.

 

Role

• Visual Designer     • Game Designer      • Illustrator     • Audio Producer

 
 
union-title.jpg

Bryton App

Contracted by AJA Creative to finish remaining designs and spec while following guidelines for the Bryton App.

 

Role

• Visual Designer

 
 

Clocker App (Windows Phone Concept)

Personal project to learn new Windows Phone design guidelines and patterns.

 

Role

• Initiator      • UX Designer

 
 

ZingZone App Redesign

Contracted designer to help design a fresh look and feel for the ZingZone concept app based in Seattle. 

 Original Design

Original Design

 Redesign Concept

Redesign Concept

 

Role

• Visual Designer

 
 
03[Guideline]Manage&Import_Map.jpg

Hotmail AdBar (Outlook.com)

The AdUX team has only been formed a year ago when I joined so there were plenty of products waiting for the team to redesign. With the entire Microsoft embracing Metro design language it was time for a change across all platforms and products like Hotmail, MSN, XBox, Skype, Windows...etc.

 

The 1st Problem

Traditional ads are banners that glare in your face and interrupt your work flow when clicked on (takes you to another page instantly), thus resulting in an unpleasant experience and most users just learned to ignore.  

 Traditional Ad Banners

Traditional Ad Banners

 

The 2nd Problem

With Windows 8 being the driver behind Metro design language and secretive, a lot the design patterns and guidelines were still being finalized and not shared internally. As a result I and the other designer were working almost 1/2 blindly basing everything on a couple early concept designs for the new Hotmail (which would later become Outlook.com).

 

The Design

One of the 1st problem we tackled was reducing the fear of "click and something pops up" -- this could only be trained over-time and it was the perfect chance to do so with such a huge refresh across almost all Microsoft products.
 
Eventually we designed a more interactive system of ads for Hotmail that would:

  • Show relative content (ads)
  • Display more information
  • Let users customize / filter according to preferences
  • Allow users to interact with ads and dive deeper
  • Allow seasonal ads or full catalogues from vendors
  • Browse ads by verticals or even location
 Hotmail AdBar with Full Flyout for Users to Explore More Deals that Interest Them

Hotmail AdBar with Full Flyout for Users to Explore More Deals that Interest Them

 

Initially our designs for how the ads would fit into the new Hotmail UI would be presented to the Hotmail team, they'd give verbal feedback without concrete examples, and we reiterate again over and over.

 Beautiful and Informational Ads Users May Actually Enjoy

Beautiful and Informational Ads Users May Actually Enjoy

 

It was a tough project dealing with time, feasibility, and most of all communication issues across teams -- and guidelines that don't seem to exist at all. I left Microsoft just as the project was near complete and the new AdBar can be seen if you log into Outlook.com today.

 AdBar on Outlook.com Today.

AdBar on Outlook.com Today.

 

Role

• UX / Visual Designer      • Prototyper

 
hotmail-title.jpg

Microsoft AdCenter & Misc.

Being part of the AdUX team I've had a chance to work on a lot of products and ad concepts across multiple platforms. Shaping the way users and business partners would interact and manage ads in the future.

 

Microsoft AdCenter + HIG

The biggest spotlight was AdCenter which has been stale over the years (appears to have become the foundation for Bing Ads presently). With AdUX team redesigning the product and aligning it with the new Metro design language customer satisfaction rocketed with every new releases of the product. With 4 designers on the product I was responsible for parts of the dashboard along with the account manager.

 Microsoft AdCenter Dashboard

Microsoft AdCenter Dashboard

 Microsoft AdCenter Account Manager

Microsoft AdCenter Account Manager

 

With most of the design set in place I also helped defining the Human Interface Guideline (HIG)  down to the last detail. From dialogue boxes, font sizes, to padding, border, and form controls.

ad03.jpg
 

Role

• UX / Visual Designer      • Prototyper

 
 

Websites + Ad Concepts

With ad products aligning to Metro design, other services must follow as well which includes redesigning a temporary Privacy and Safety Center for Online Services Division within a week; as well as concepting AdUX's team website which would serve as a hub for internal developers and stakeholders to look for guidelines and make requests.

 Microsoft OSD Privacy & Safety Center

Microsoft OSD Privacy & Safety Center

 AdUX Team Website Concept

AdUX Team Website Concept

 

Other tasks while at AdUX team also include designing future ad concepts for various platforms such as Skype, Windows Phone, XBox, and more.

 Sensory Ads Concept Allowing Users to Interact with Ads Utilizing Their Smartphone Sensors

Sensory Ads Concept Allowing Users to Interact with Ads Utilizing Their Smartphone Sensors

 360 Sensory Ad Concept Allowing Users to Look Around a Lodging as If They Are Present

360 Sensory Ad Concept Allowing Users to Look Around a Lodging as If They Are Present

 

Role

• UX / Visual Designer      • Prototyper      • Concept Designer

 
ad-title.jpg

Trend Micro Titanium Security

The Trend Micro™ Titanium™ suite of products is all-in-one, easy-to-use protection for everything you and your family do online.

ti01.jpg
 

The Beginning of Ti

Trend Micro Titanium started as a concept and evolved into a specialized security software for netbooks through cloud protection -- which is the version (2.0) I came in to work on as visual designer. Being a product for OEM and retail we had one catchline for the product during development and it was to be:

 

Smarter, lighter, easier

 

Coming from a consumer entertainment software background it was my first jump into designing a security product and I was determined to make it different, to make it "wow". I studied all major security products on the market including past versions to get a good sense of the design and trend. 

In the end they were all still anything but "boring" so I looked back to the average consumer software trends while heading on the challenge.

 

Shaping the Design & Brand

All of Trend Micro product's UI are built with HTML & CSS and Titanium was the 1st product where design team pushed engineering to incorporate uses of PNG to allow transparency and drop "boxy" designs.

Design mockups and animations were created to showcase how different and "smart" looking the product would be if we could break the traditional mold. It was an all or nothing negotiation where if PNG couldn't be utilized then we'd go with a "brick" design instead -- solid and sturdy like security software should be.

 

With technology foundation in place and feature set finalized I designed a logo and theme based on the codename to unify and align internal expectations where we continue to refine throughout development.

ti08.jpg
 UI Components, Icons, and Design Style Guideline

UI Components, Icons, and Design Style Guideline

 
 

The Design

Everything was designed and crafted down to the last detail working closely with the front-end developers from downloading, installation, and even to help screens and images to ensure a cohesive brand image. Utilizing CSS hacks and jQuery library we were able to bring the UI to life

ti10.jpg
 

The result is a product with great personality that "wow'd" the entire company inside out unlike anything we've seen before. Everyone was talking about Titanium, engineers felt excited to be working on the product, and even the enterprise team approached my manager to have me design their next product.

 Trend Micro Titanium for OEM  |  Main Console, Security Reports, Status + Notifications

Trend Micro Titanium for OEM  |  Main Console, Security Reports, Status + Notifications

 

One attraction of Titanium was the movement of customizable skins for your security software. A series of concepts based on the likes of Ferrari and Sponge Bob were visualized along with Trend Micro's own retail skin.

 Trend Micro Titanium  |  Retail Skin Design

Trend Micro Titanium  |  Retail Skin Design

 Alternative Skins Based on Ferrari, Sponge Bob, Blue Tech, Geek Squad, and Red Pill

Alternative Skins Based on Ferrari, Sponge Bob, Blue Tech, Geek Squad, and Red Pill

To further hype and unify the vision of Titanium I designed a series of internal promotional posters and hoodies and bike shirts that were given to execs at Trend Micro.

ti12.jpg
ti14.jpg
 

I even went on to propose the retail packaging design for Titanium before marketing told us that we've gone "too far" and stepping outside our job roles : p

ti13.jpg
 

The Legacy Onward

After successfully transforming the face of Trend Micro security products I eventually moved on to more interaction design role for Titanium 3.0 and other products. The impact of Titanium 2.0 was unprecedented  and would raise the bar on future designs. I was awarded the 1st-ever Trend Micro Rockstar Award by the year's end.

 

Role

• Visual Designer      • Prototyper      • Researcher

 
 
ti-title2.png
tmog01.jpg

Trend Micro Online Guardian for Families

Trend Micro™ Online Guardian for Families helps you protect your children against Internet dangers, including cyberbullying and online predators. It lets you monitor your kids’ Internet activity 24x7 from anywhere and take action to keep them safe.

 

Think Different

Almost all of the best parental control software out there are able to monitor children's activities through use of Windows Accounts. The problem is, only less than 30% of parents have actually heard of Windows Account and this also makes setting up on multiple machines a pain. I was determined to change that.
 
By moving the entire monitoring rules and profiles to the cloud we are able to keep Online Guardian's install file size to a minimal. Setup once for all the kids and the agents will automatically sync with the cloud. No matter which kid or on which computer, the parents will have a clear and centralized report for all their activities.

tmog02.jpg
 

Not Just Better, but the Best

Not only did we design Online Guardian to be simple for the parents we also made sure it is the easiest to setup and maintain compared to competitors. Start online, setup a profile for each kid, and download the agent to sync. See Online Guardian's setup process compared to others:

 

Another major innovation Trend Micro Online Guardian pioneered was on scheduling controls. When every service on the market utilized a complex grid of 7 days a week by 24 hours, I knew there must be a more efficient way.
 
Through studying children's behavior and understanding how parents work their schedule around the kids, I drew from my video editing experiences and designed the interactive time slider. By grouping schedule into Weekdays and Weekends it worked for most parents and just made sense. Parents can still refine each day if they need to, or simply set a maximum hour since kids' schedules are always ever-changing.

 

Designing Around the Globe

The Online Guardian team consist of PM and marketing in California, human interface engineering team in Taiwan, and development team both in Taiwan and Japan. It was a global effort managing and working with different time zones, cultures, and needs. A lot of designs actually happened on-the-fly as the entire team discusses feasibility and effort risks during "design camps". I can't count the times I've presented directly to the marketing VP and other stakeholders to resolve the issues that arise throughout the development.

tmog11.jpg
 Design, Validate, and Reiterate

Design, Validate, and Reiterate

 

With rigorous internal testing, user studies, and working closely with visual and front-end developers the end product is modern, clean, and ease to use. Concise reports, email alerts, and all the tools centralized in a dashboard for the parents to monitor and protect their children.

tmog08.jpg
 
tmog09.jpg
 
tmog07.jpg
 

Assuring messages are provided for the kids when the rules aren't in their favor.

 Pop-up Notification for Kids Due to Rules Set by Parents

Pop-up Notification for Kids Due to Rules Set by Parents

 

Role

• Lead UX / Visual Designer      • Prototyper      • Researcher

 
 
tmog-title2.png

Trend Micro Product Designs

This section features other designs I've done at Trend Micro ranging from UI/visual design to researches.

 

Instant Security

Though probably obsolete by now but few years back there was a big notion of stripped-down OS that would boot up instantly when you turn on your PCs. Trend Micro was on the forefront of protecting these instant-on linux-based OS -- thus Instant Security was born working with several partners.
 
Carrying over the design style and theme set by Trend Micro Titanium the result was a cool, advanced, and sleek looking product.

 Instant On Security for VideAce

Instant On Security for VideAce

 Instant On Security Widget for Asus Express Gate

Instant On Security Widget for Asus Express Gate

 Instant On Security for Asus Express Gate

Instant On Security for Asus Express Gate

 

Role

• Visual Designer      • Researcher      • Prototyper

 
 
 

Trend Micro Titanium Security 3.0

Following my visual designer role on Trend Micro Titanium Security (2.0) I was tasked on designing the Pro Tools for Titanium 3.0 -- wearing both hats as interaction designer and visual designer. Most of the Pro Tools have not seen major updates for a while so with Titanium Security officially replacing Trend Micro Internet Security as the flagship product, it was time for a makeover.

 Trend Micro Titanium Pro Tools

Trend Micro Titanium Pro Tools

 

With a new lead visual designer for Titanium 3.0, a lot of inspirations were drawn from Titanium 2.0 which I designed. Focusing on the interaction design this time I redesigned each tool tailoring to its function and needs while retaining design patterns set already.
 
Parental Controls' filter groups were revamped to be cleaner and easier according to age groups and almost every tool's flow has been redesigned to be simpler with less steps to accomplish tasks. User testing scripts were created for testing in multiple regions including Japan, United States, and Taiwan as we learn from the results and reiterate until the designs were polished.

 

Aside from redesigning the individual tools this is also the first time where the main Report will include results from tools such as Parental Controls and System Tuner. These reports were carefully designed to let the users know how Trend Micro is protecting their system while increasing exposure to those who have not tried the tools yet. The result is usage of tools greatly increased with many more users appreciating the Titanium Pro suite than ever before.

 

Role

• UX / Visual Designer      • Researcher      • Prototyper

 
 
 

Trend Micro Internet Security Pro 17.5

My first project at Trend Micro was redesigning the System Tuner tool that comes with the flagship product Trend Micro Internet Security Pro (TIS Pro). Tuning your computer system to keep everything smooth and running is a must for everyone but an abstract concept for many to grasp.
 
I began by studying the pros and cons of competitor products in the features they offer as well as the designs. A lot of numbers come out after a "tune-up", let it be cache cleared, histories wiped, startup programs removed, or memories freed up. Through further user studies I learnt typical users can understand "storage space" and "unnecessary items cleaned" the most as more space for their photos and memories are always better.

tispro01.jpg

With the concept in mind I began to simplify System Tuner's information architecture and consolidate "features" into broader categories that users can easily understand. Instead of having a list of seemingly "random numbers" after tune-up I designed a gauge where System Tuner would give you a high level view of how much your computer's performance has improved as a result of tune-up.

tispro02.jpg

The result is a simple but highly-visual way for users to understand what happened after a tune-up. Through user testing it was confirmed that all users loved the simple visual of how their computer is doing and how much System Tuner has done to keep it healthy.

 TIS Pro 17.5 System Tuner

TIS Pro 17.5 System Tuner

*NOTE: The visualization didn't make the final product as a result of ambiguity in measurements and technological difficulties. However, it still proves the original concept being on the right track and a product where users can now understand and appreciate a lot more than previous versions. 

 

Role

• UX / Visual Designer      • Researcher      • Prototyper

 
ios-title.jpg

Web Designs Misc. 

 

Puff Nation Website

Puff Nation is the leading brand in Taiwan for designer T's with stores around the globe including Tokyo and Vancouver, Canada.
 
I was brought on the team to help bring the website back then to life. I crafted a system through use of Flash where individual elements in separate frames could communicate with each other and display dynamic content. The result was an immersive site that really empowers the brand and its message.

web03.jpg
 

Beehive Website

Beehive Co., Ltd specializes in OEM parts and accessories which covers various industries, including motorcycle, bicycle, automobiles, agriculture equipment, food processing, wine imports and so on.
 
The result was a clean design that fit Beehive's diverse specialization without looking overwhelming.

web01.jpg
 

Koomi.TV Website

Koomi.tv was an online dating website targeted at high-profile users (2nd generation entrepreneurs). The ai was to provide a luxurious experience where men could woo women through rich profiles, gifting, messaging, and more.
 
With the site structure in place I was contracted to redesign the koomi.tv brand as well as a fresh template for the website. See the before and after below and also checkout the logo and business card in the Identities section.

 Before  |  After

Before  |  After

 
web-title.jpg

Identities

 
 
 

Logos & Brands

 
03kfb.jpg

Wallpapers & Digital Art

I love creating random wallpapers and digital art to explore different design styles and to keep the creative juices going.

::4am-universe.jpg

Illustrations & Print

Both for commercial use and personal projects.

 

Prints & Packagings

 

KittyPen Life Doodles on Tapastic

 

Illustrations & Misc. Souvenirs

 

iPhone Art

print-title.png

Photography

I love shooting, non-professionally. Capture the moment of its atmosphere, time, and mood. A picture to remind ourselves of the places and events we've been through.

Just me and my iPhone.

IMG_0192.JPG

Hello, this is Allen.

about-banner.jpg

I am a thinker, designer, creator, "curioist", writer, and a bit of a geek at times. 

My spectrum of interest, passion, and sentimentalty has lead me onto a ton of different experiences and appreciation for almost everything good and bad of all forms.


I have...

  • worked at a startup that was acquired by Google
  • worked 'till the sunrises numerous times
  • worked on a dozen 1.0 products
  • co-founded a pet health supplement & a property lease startup
  • ran a couple workshops / public speeches, and kids' summer camp
  • started writing casually on Medium
  • owned/worked on 5+ blogs on and off
  • a dream of hosting/be in design battles or TV shows
  • designed for almost every discipline
  • been a life-long volunteer @ various orgs / events

I believe in...

...designing for better experiences, easier to use products, and helping our days to be more efficient. I want to impact people's lives so every detail matters in order to convey emotions through visual and interaction means.


I use a lot of...

  • Sketch
  • Photoshop
  • Illustrator
  • Fireworks
  • Flash
  • Framer/Flinto/Invision etc.
  • Axure Pro
  • Premiere
  • AfterEffects
  • GarageBand
  • Dreamweaver

For things like graphic design, GUI design, prototyping, flow/wireframes, motion graphics, video editing, audio production, and other fun things.


More about me (if you're curious)

I always loved art of all sort growing up, drawing my own comic books and doodling on any paper I come across. I made my first website in the early '90s with notepad and I still remember the nightmares of <TD> for table cells. Having a big heart and interest in advertising and marketing I somehow ventured into the UX design field.

I've had the luck of working on a lot of version 1 products through the companies I've been to; which allowed me to be creative, dream up from scratch, and of course deal with all the research, stakeholder management, and support issues required for any new product.
 
I love traveling, both for work or for personal reasons. Working with, meeting, and experiencing different cultures inspire me. It's important to catchup with trends, news, and world events -- but it's the details of everyday life that inspires me the most.
 
To me it's what matters -- appreciate and feel life. Depending on how you look at it, everything can be beautiful.

 


I've worked at
 

Amazon
Xbox
Wavii
Microsoft
Trend Micro
CyberLink
Toolhouse Design 
Petmune International

and some more

On products like


Amazon.com
Xbox.com
Xbox membership
Hotmail (ad bar) 
Microsoft AdCenter
Microsoft OSD Privacy Policy Site
Lenovo Shuttle Center
Norton OneCare Mini Site
Intuit QuickBooks Tutorials

Trend Micro Titanium 2.0, 3.0
Trend Micro Internet Security Pro 17.5
Trend Micro Online Guardian 1.0
Trend Micro DirectPass 1.0
Trend Micro Backup & Restore 1.0
CyberLink PowerDVD 6.0, 7.0
CyberLink PowerDirector 6.0, 7.0
CyberLink PowerCinema 6.0

CyberLink YouCam 1.0, 2.0 

With brands such as
 

Acer
Asus
BLIA
Cisco
Dell
Gateway
HP
Intuit
Lenovo
Linksys
NEC
Norton
Puff Nation
Simon Fraser University
Sony
Symantec
Tencent
VideAce
Yahoo!

 

about-title2.png