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.
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.
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.
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.
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 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.
As part of my Final Year Project (FYP), I designed a user interface which integrates document-editing and text-based chat systems with the power of inserting mathematical symbols, suitable for students to be used in school. Here’s an abstract of the paper I wrote which was submitted to Interfaces and Human Computer Interaction Conference (IHCI) 2012:
Text-based chat is a predominant form of computer-mediated communication today. This paper investigates and reviews the problems of chatrooms as compared to face-to-face conversation, various solutions offered by the research community, and how the method of displaying conversations has changed over the years. In the classroom learning environment, chat has been used as a computer-supported collaborative learning (CSCL) tool for the past two decades. This paper presents a review of the research carried out to improve the chat user interface experience for students. In particular, it addresses the challenging problem of including mathematical symbols in chat. With an end-goal of developing a collaborative problem-solving math chat system, we offer a design proposal for DiscussionZone – a chatroom in a collaborative multi-tasking environment.
Download the full paper here.