Page 1
Featured, UX & UI Design, Web Design

Singtel Newsstand

On

Designed the wireframes and buy flow journey for Singtel Newsstand – a value-added service for users to subscribe to their favourite news magazines such as TIME and Fortune. It was an end-to-end process which involves initial brainstorming with the business team, gathering requirements and then sketching the wireframes together with another visual designer. Finally, the website was implemented with another developer in React JS, HTML5 and CSS, using the Foundation framework. By being able to translate designs into actual CSS code, it speeds up the development process, and ensures that the final HTML layout adheres to the original visual designer’s pixel-perfect standards and requirements for both desktop and mobile versions. The usage of React JS for the first time allows the page to load without any new page refresh, enhancing the user experience of the buy flow.

Featured, UX & UI Design

Singtel Music

On

Designed the wireframes and buy flow journey for Singtel Music – a value-added service for users to subscribe to their favourite music apps such as Spotify and KKBOX. The process involves gathering business requirements, designing the wireframes together with another visual designer, before it was implemented by a 3rd party.

Featured, UX & UI Design

My Singtel App

On

 

 

Designed the user experience and roaming flow for My Singtel App, a self-service telco app which allows users to manage their mobile services. iOS and Android platforms.

This was a long project which involves engaging internal business stakeholders to gather requirements, interviewing users, going through iterations for interactions and visual design of an app, user testing, and finally liaising with developers to create the actual mobile app.

Designing the roaming flow was also a complex challenge because it involves many ‘plans’ and ‘add-ons’ which are confusing to the user. The user experience was improved by introducing a ‘by-country’ flow, whereby users buy roaming plans based on the country they travel, rather than based on which price plan they wish to pay. This was done through a process of wireframing many iterations and showing it to the different departments, involving them in the design process at every stage. This greatly improved the buying processes and during the user testing, most users actually used the ‘by-country’ option rather than the ‘by-plan’ option. Hopefully, this increases the sales of the roaming plans

I also assisted in the visual design delivery of the app, especially for Roaming and Rewards sections. This includes ensuring on-time delivery and explaining how it works to the stakeholders, developers and solution architects in the IT team.

Just before launch, I liaised with a usability testing agency to conduct the user testing for the final app. I helped to write the brief and prepared the Marvel prototype for the user testing.

Featured, UX & UI Design

Dash Mobile Wallet App

On

Engaged business and product owners for the ongoing user experience and user interface design of Dash, a mobile wallet app. Involved in the regular interface design updates to the app and new features such as NFC payments, Apple Touch ID and Samsung Fingerprint integration. Helped to prototype the new NFC wobbler, going through many iterations, as well as selecting the placement positions at the Point-of-Sales counter at NTUC Fairprice and Cheers. This NFC payment experience was successfully launched in November 2015.

As a business engagement manager, I also helped to engage an external agency for a design review, conducting workshops, stakeholder alignments and organising weekly sprint reviews and check-ins. After the design review, continuous updates and tweaking of the screens was necessary due to technical limitations and new business requirements. Also assisted in the gathering of users for user testing, including calling the users to confirm their appointments and arranging the user testing schedules.

I also prototyped some mobile animation in After Effects to visualise a possible first-time user interface to showcase the other Dash products in a card-based UI.

Featured, Web Design

Dashboard for Telkomsel Mobile Consumer Insight

On

telkomsel

This project was created in collaboration with DataSpark and Telkomsel. These insights are targeted at business customers who are interested in the number of people (also known as footfall) in different popular regions in Indonesia. An installation with a TV wall of 6 TVs was created in an internal showcase at Telkomsel, along with a mobile version of the dashboard. The dashboard displays the number of SMSes, calls, data and people in 4 different regions of Jakarta. I was involved in the web development and coding of the dashboard.

Featured, Film and Digital Effects

Formula One Singapore Grand Prix Insights

On

In collaboration with MIT SENSEable City Lab, this data visualisation video was created using the data analysed by DataSpark together with the DATACOLLIDER tool. A total of 3 different types of data analysis of the F1 Singapore Grand Prix period are featured in this video: the top countries, where do tourists go, as well as the overall crowd patterns. It showcases the insights that can be derived from footfall data of people in a region during the event. Find out why crowd pattern insights matter and how you can use them to optimise spends and improve sales.

This video was also showcased at the SingTel Sky Suite lounge during the F1 2014 event, as well as to various top management of government-related organisations as part of DataSpark’s marketing efforts.

This dashboard was displayed at the Singtel World @ F1 Sky Suites during the F1 Singapore Grand Prix 2014. It showcases the number of SMSes, calls and people in different seating zones of the Marina Bay F1 Circuit in real-time. This enables businesses to visualise and plan for crowd patterns.

Featured, UX & UI Design

EzDr

On

Wireframed and created the user interface design visuals for a small project EzDr, an appointment booking app for visiting a doctor in a clinic in Singapore.

Featured, UX & UI Design

HOOQ – Video Streaming App

On

hooq01

 

Involved in the design of the user experience for HOOQ, a mobile video streaming app. Designed the wireframes for the mobile, tablet and desktop web platforms, including the registration form and flows. (Visual design was done separately by others, visuals shown as reference of how the wireframes were translated to the actual app.)

More info: www.hooq.tv

Featured, UX & UI Design

Project Xenon UI

On

Project Xenon is about exploring the possibilities that technology will provide us in the next 10 to 20 years. Our mission is to foresee how we will use new devices with augmented reality, quadcopters and wall displays for interpersonal communication.

As part of the brainstorming of possible future technologies, I helped to prototype and create a cube-based user interface, which can be used in augmented reality glasses using gestures. Two stages of paper prototyping were used, once using flat transparencies, and the second time using 3D cubes. We envisioned how in future, with augmented reality, we can interact with these cubes as a form of user interface. The cube metaphor affords the user to turn it around the 6 faces and hence potentially offers 6 different menu options for each cube. This allows it to be highly flexible, and it is also an easy object for users to manipulate, given that most users played with blocks in their childhood. The UI design is also hugely inspired by the Microsoft “Metro” design principles. The final product of the design is featured in the short film below at 01m:30s.

In this film, I was the film editor, compositor and user interface designer. The film was edited in Adobe Premiere Pro, composited in After Effects and Nuke, and color-corrected by another teammate in DaVinci Resolve. User interface was designed with various paper prototyping stages as described above.