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.
Singtel Music
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.
My Singtel App
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.
Dash Mobile Wallet App
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.
A Cozy Marriage Website
This is a full HTML/CSS website for my wedding invite, complete with parrallax scrolling animations using skrollr. View full website here.
Graphics design by lizzaeh.
Dashboard for Telkomsel Mobile Consumer Insight
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.
Formula One Singapore Grand Prix Insights
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.
HOOQ – Video Streaming App
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
Project Xenon UI
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.