Near the end of last year after the Series B funding ViKi engaged me as a product designer to update their iPhone app. After the iPhone I went on to help them design the iPad app as well as the Android phone and tablet apps.

ViKi wasn’t the first rich media app I have worked on. Like Denso which I designed earlier, ViKi’s experience is centered around watching videos. What’s special about ViKi is it’s multitude of community-contributed subtitles.

ViKi on the iPhone

For the iPhone app, we retained most of the information architecture and focused mainly on improving usability by tweaking interface elements and communicating the richness through visual design. I chose a transparent black UI scheme similar to that of the native Photos app to let the rich visual content pop. The rectangular nature of the content made for a nice opportunity to use the 4-pixel rhythm unit.

Pie progress chart for subtitles

Videos on the ViKi platform are all subtitled by the community. Some of the popular drama series can be subtitled in more than twenty languages. The preferred subtitled language is a global setting and can be easily configured in the title screens of the videos. Because it takes time to subtitle an hour-long drama episode or even a movie, the subtitling progress of each language for each video is clearly displayed as a pie chart in the video list. This makes it easy to decide if you want to wait until a show is sufficiently translated to watch it.

ViKi on the iPad

On the iPad we made use of the bigger screen real estate to create a kind of portable-TV experience. Visuals are richer and higher resolution to make the experience immersive. We kept the information flow of the phone so switching between the iPhone while on the go and the iPad while chilling on the couch would feel seamless.

Tab icons for TV, Movies, News and settings icon for Subtitles

I also design a set of media-related icons because I find off-the-shelves icons lacking in fidelity. The icons for iOS and Android differs in style to fit the aesthetic idiosyncrasies of each platform. The iOS icons are also higher-fidelity to take advantage of the Retina display on iOS devices.

ViKi for Android Phone

Designing ViKi for Android is both easier and more difficult than for iOS. It is easier because the Android platform is very flexible and without a proper standard of nativeness to adhere to, everything beyond UI controls were expected to be custom designed. I decided to maintain some level of consistency between the experiences between iOS and Android while observing the low level differences, since Android at a high level is almost the same as iOS.

ViKi for Android Tablet

The difference between the Android tablet and iPad UI is more significant. Android tablets are mostly wider than the iPad. To have a more balanced layout I decided to move the tab bar to the left of the screen. When rotated to portrait orientation, the tab bar is at the top of the screen to maintain this balance. The tablet UI also uses percentage dimensions to adapt to the mind-boggling multitude of screen sizes of Android devices.

App icon

Lastly, I designed a set of application icons of various sizes defined in iTunes Connect and also for Android. Initially I used only a V like in the icons for Facebook and Tumblr but later decided with the company that the ViKi brand isn’t strong enough yet so adding a little bit of detail such as the play and pause symbols helps communicate to new users that ViKi is a video app. The icon is also glossed to match the shiny UI chrome of the app in iOS. The Android app icon has less gloss to match the less glossy Android app UI.

ViKi is available on the iTunes App Store and Google Play.

* Let me clarify that I am aware this space pen story is an urban myth. I am only using it as a storytelling device and for some humor (at least for me and the audience in the theatre who laughed at the scene). It made me think about how we overthink which led to this post. Whether it is true or not is besides the point.

As children we once were, growing up was a process of becoming adults. Not only biologically but also mentally. We learned to be responsible, to pay the bills, to get things done and we learned the complex world of adulthood. To become adults we had to lose our tantrums, silliness, our childhood. And we lost our minds. Our child-like minds.

The mind of a child is the greatest gift we will ever receive. As embryos in our mothers’ womb, our heart, the first organ to develop only to power the next organ – the developing brain which is soon making a quarter of a million new neurons every minute. In the first 10 years of life, our infant brain will have made billions and billions of connections. It is an supercharged engine for learning and creativity. Yet by adulthood we have lost most of this creativity. We now think like adults. That is we think too much and our thoughts are too influenced by our knowledge. We need to get back our ability to think like kids again. How?

Consider this question. I found this spreading on Facebook the other day and it took me a few minutes to solve. Go on. Try.

If you want to know the answer. It’s at the end of the article. So just keep reading.

Where online would you find a lot of smart and knowledgeable people? Quora of course. I really like to visit Quora and learn from subject matter experts showing off their wits and expertise. Though sometimes they overthink and complicate problems with complicated answers. Many times people are just trying to show off how clever they are with rocket science. Like this question on Quora.

The most popular answer for the question before I answered involved calculations with compasses, concentric circles, Pythagorean theorem and square roots. I have no idea what a concentric circle is, let alone cooks in a pizza kitchen. And who keeps compasses in a kitchen? But since it’s the most popular answer I suppose overthinking is popular in Quora.

I imagined myself with no mathematical knowledge, a cook good with my hands, in a hot and humid kitchen faced with this problem. What would I do? Turns out that the better solution is much simpler and would only required a piece of string and a pen at the very least. Shouldn’t be too hard to find in a kitchen. And so I offered my answer.

All you have to do is circle a string around the pizza to cut a length equal to the pizza circumference. Then fashion a divider of some sort or even use your thumb and index finger. Adjust your thumb and finger and wrap the string eleven times equally around them. This effectively divides the string into eleven equal parts. Use a pen and mark the string. Circle the string around the pizza again and cut using the markings as guides. My answer received more than a hundred votes, went on to become the most voted and the question was made a Best Source.

Conjuring complex mathematical equations may make you look smart but to become truly creative you need to be able to liberate your mind from the the shell of knowledge, education and adultification you have accumulated. Only then can you think like a child again.

Answer to the numbers question

The question has nothing to do with mathematics. Look for the closed loops or shapes in each number and count them. In 0, 6, 8 and 9. 8 has two of them. 2581 has two. The answer is 2.

Creative Mixer brings together the best of creatives, entrepreneurs and hackers into a single space to redefine what creativity is.

Eight speakers enlighten us with bite-sized presentations on creativity across diverse fields. Who knows what happens after, when creatives, entrepreneurs and hackers get together?

Wednesday, 28 March 2012
Sinema Old School
11B Mt. Sophia
7:00 PM – 10:00 PM

For speakers and more information go to Creative Mixer.

I’d love to add that back in 2009, almost a year before Pinterest launched and many months before Pinterest even began development, sites like TypeNeu had already begun using the fluid grid layout based on early versions of Andreas’ Grid-a-licious WordPress theme. I really like the innovative idea of fluid grids and decided to use it for the then AenTan.com in July 2009. I added jQuery animations to the rearrangement of the blocks as the browser is resized and the novel idea was picked up by several design blogs. The fluid grid design quickly caught on and I believe Pinterest adopted it when it started development.

It is therefore untrue that Andreas ripped off Pinterest. But rather both Pinterest and I have both been inspired by Andreas’ ideas with me being the earlier adopter. Pinterest may have created a wonderfully popular service which I really like but it had not innovated much in the UI as much as some have believed.

As an early adopter of the fluid grid design, I have applied it to several projects including Qrios.ly – a personally-curated design blog which I started but abandoned. It has an interesting fade-as-you-scroll effect not seen on any other site. Qrios.ly subsequently gave birth to Likables, a Pinterest-like site which I developed in 2010 with the same fluid grid layout, before I knew about Pinterest. I too have been accused of ripping off Pinterest.

Journalists should do their homework seriously so they get their facts right.

• Ruthlessly edited to present only the most standout places in the city. We chose restaurants run by perfectionists who really care about their food, and truly understand hospitality.
• In addition to restaurants, the guide will tell you about hidden bars, the best view in the entire bay area, walking tours, underground dinner clubs, and a public park 15 stories up.
• Printed on a single sheet of Tyvek, an untearable paper-like material that’s unaffected by water, and then folded up using a technique originally developed for satellite solar panels.

The TOC Guide is folded according to a technique developed by Koryo Miura in the 1970’s at Tokyo University, for use in the deployment of solar cells. It is said that Miura was inspired by folds in nature, including the wrinkles in the brows of old people, and the way mountain ranges fold into landscapes.

Since a map that has been Miura folded has only two stable states (fully unfolded, fully folded) it’s impossible to misfold, and there’s no fumbling to get it folded back up.

It’s on Kickstarter and it deserves your backing if you like Origami and San Francisco.

My childhood super cockroach (recollection)

At the time when I was supposed to be studying for the O Levels, I was actually more concerned with opening a bicycle shop. Naturally I didn’t do well for most of the pre-O Levels exams and the school decided to kick me out. I then somehow ended up in a technical school and had my first encounter with the computer. I learned HTML and Flash. I was suddenly armed with tools which allowed me to create like never before. I left technical school because it sucked and tried to enroll in a multimedia course. Since I’ve already spent a month learning Flash 5 and HTML, instead of going to school I boldly applied for an internship at a small design studio and began my journey to become a designer. Of course I got kicked out from there too. This time because I wiped the files by accident from one of the company computers.

Since then I have been neck-deep in graphic design. I freelanced on and off, worked for studios, did print and web and relentlessly improved myself with all the free literature I could find. I became good at typography, I knew how offset printers work, I could code in HTML and ActionScript. And then the web standards movement started. By this time I was already proficient in the design vertical. I saw web standards as a nice challenge. At the time you could get a lot of kudos when you could code complex web pages in table-less XHTML. I liked that and so I coded in XHTML Strict and picked up CSS.

Way before Steve Jobs denounced Flash, I made an effort to do more standards-based websites and eventually ditched Flash for good. I became good at it and became a sought-after designer in my local startup community. Working in startups exposed me to rich web applications and web frameworks. I started calling myself a UI Designer and picked up things like information architecture and usability engineering. I poured myself into all the good books on the subjects. I spent as much as $200 a month at Kinokuniya Books. Not satisfied with merely being a follower I started writing a blog on design philosophy.

Working with developers on several projects that ran on frameworks I learned the intricacies of MVC and became familiar with CakePHP and Ruby on Rails. I also had to learn subversion so I can work on the view layer directly and not rely on a developer to integrate my code. Although I did not yet have the courage to go near the model and controller layers I knew them. I also went deeper into Javascript and picked up jQuery because that was part of the UI. I also soon ditched Subversion and picked up Git.

After working with so many startups it was inevitable I wanted to start one of my own. I had no lack of product ideas. Most of them are crap but last year I had the idea for Likables. It’s a Pinterest-like website but I didn’t know about Pinterest until I launch Likables and someone told me about it. I originally planned to have a developer friend help engineer the back-end in Ruby on Rails while I focused on the front-end. But because she had a full-time job and couldn’t commit as much time as I wanted her to I ended up learning Ruby on Rails and did at least half of the back-end work. I studied Ruby and Rails with as much intensity as I studied design. I bought Ruby books and Rails books. I used Rails for Zombies, Lynda.com and Railscasts. I would take off and try to implement something and course-correct in the middle with new things I learn. I learned to refactor rubbish code. I made sure I understood things deeply like Active Record, migrations and how controllers tied the view and model together so I wasn’t just blindly copying and pasting code. I used StackOverflow like a team of free programmers eager to provide me with the code I needed.

After Likables, I had the idea for Mocku.ps and decided I would build it myself. Now that I have launched the prototype with back-end and front-end code I’d written myself, with an interface and interactions I designed, with a brand icon I illustrated, I think I am finally somewhat a T-shape designer.

Mocku.ps is a tool I created over the past two weeks that allows you to easily set up and show your interface design mockups (e.g. web, mobile) from a nice shortened URL that shows how a design would look like in the browser. It’s better than emailing attachments or even CloudApp and Droplr. They are great apps that I use a lot but they just don’t do it very well for design mockups.

What I’d usually do is create a HTML page with the mockup + background images and host it off a sub-domain like client-xyz.aentan.com and show that to my clients. It’s cumbersome so I developed this tool to make this process easier. I think it can help other designers too.

Start using it at http://mocku.ps/.

From left: Kiat Lim (organizer), Steve Baty, myself and Sarah Cheng De-Winne (Relayroom)

I write much better than I talk so I will probably put up an article of my talk which I had little time to prepare.

If you are an IxD professional, enthusiast or in a related field. Please join the IxDA SG Meetup group at http://ixda.sg/.

I was in the middle of developing ONE-R Inc.‘s corporate website when Mr Shunsuke made me look at a landing page his team was doing for a mobile application they were submitting to SXSW Interactive 2012. It was two days ago on Friday when I looked at the mockups and told him what I thought. The logo was really good but I wasn’t impressed with the site design and the pony mascot that was on it. Then he asked me to help with the design. There were only sixteen hours left before the submission deadline and the site would have to be up when the SXSW panel looks at the submission. I had to improve the pony mascot, design a site around the logo and the new mascot and code it within a really short time. And so I did.

The app combines features in Foursquare and Beluga into a real-time location-based chat utility but without the cumbersome groups (pods) structure of Beluga. You are supposed to share information, tips, deals and generally chat within the context of a locale. I haven’t seen the app and this is all I know.

The logo was already done by their designer. I thought it had great personality. The color was as bold as the heavy yet elegant script font. It was an aesthetic that somehow reminded me of chocolate and confectionery. Things like waxed paper, pinstripes, gold foil, sweet chocolate and kraft came to mind.

The original pony mascot had a look of something you might find in a little girl’s toy box of Barbie Dolls. It’s visually incoherent with the logo. Thus I had to make a new pony motif that fits the logo better.

The pony’s tail were deliberately un-ponytail-like. The flat ends matched the flat top edges of the logo’s lowercase characters. The tapered and curved tips of the pony’s mane mimicked the C’s pointed finial. The chunky body would match the heft of the script.

I’ved paired FF Roice for the headlines with Gills Sans for body text. Although Roice was designed in 2003 and Gill Sans in 1926, the contrasting shapes go well together. The mechanical form of Roice also prevented the whole look from going to far in the direction of the confectionery aesthetic.

The comic’s really cute and adds a lot of life to the page. It’s well drawn by the client’s artist and illustrates the purpose of the application very well.

For a landing page done within a day, I’m really satisfied. Curiocity will be launching in SXSW 2012 on iPhone and Android. Please look forward to it.