interaction design portfolio | zenan liu | ux, ui and interaction designer in singapore

LIU ZENANInteraction Designer @zenan_liu

https://twitter.com/@zenan_liu

Hello,

My name is Liu Zenan, an Interaction Designer in Singapore seeking to create work with quality and impact.

I strongly believe that well designed products reside in the intersection of business insights, user needs and technology constraints. In my previous work, I conducted user research and design workshops to help businesses gain better insights into user needs and behaviours, and use prototyping as a powerful tool to solve complex design problems, enabling stakeholders and developers to achieve solid shared understanding towards the product vision.

Some of the companies and teams I’ve worked with include Aon, Evernote, NUS Medical School, Packnada and The Co-Foundry.

[email protected] | +65 9352 4133 | liuzenan.com

mailto:[email protected]

http://liuzenan.com

Project #1

Redesign of an Enterprise Risk Modelling and Financial Analysis Software

UX UI Prototyping Blend for Visual Studio Sketch HTML, CSS & JavaScript

Project #1

Redesign of an Enterprise Risk Modelling and Financial Analysis Software

Overview Challenges My Role

The project is a redesign of an enterprise level risk modelling and financial analysis tool for strategic decision making.

The software features a Monte Carlo simulation tool with a drag & drop modelling user interface. Primary users for the software are mainly actuaries, catastrophe modellers, and financial analysts.

Besides a visual refresh to the old interface, my key contributions to the project also include designing a new data visualisation tool to simplify how users can use the simulation data to generate reports.

The enterprise solution has been in the market for more than a decade without a major redesign. The interface looks and feels outdated.

The software is difficult for beginner users to learn and use. The information architecture is messy, with many hidden functions unknown to users.

It is also difficult for users to retrieve data from the results after simulation and to organise the data into an easy-to-understand report format.

Lead Interaction/UI designer, embedded into client’s agile scrum team full time for more than a year.

Conducted interview sessions with users in Singapore and London.

Conducted design workshops to uncover requirements and explore ideas.

Created prototypes and mockups to explore design directions and help achieve shared understanding of features within the team.

Project #1: Redesign of an Enterprise Risk Modelling and Financial Analysis Software

The Process

User Research

Design Workshops

Concept Sketching

Prototyping

User Testing

Design Implementation

At the start of the project, I conducted interview sessions with users to understand the context of use and to find out any unsatisfied requirements or usability issues. I also facilitated several design workshops with key stakeholders in the team to brainstorm ideas and discover all hidden requirements.

During the actual development scrum cycles, I developed concept sketches, interactive prototypes to demonstrate how the product could work. I also conducted user testing and stakeholder review sessions to validate my designs.

At the end, I worked on styling the interface and implementing the UI elements into XAML files.


Project Highlight

Refreshed Modelling Diagram UI

Old New

The diagram UI should make it easy for experienced users to understand the model. It should also make it easy for beginner users to learn how to use it to build simple to complex capital models.

From visual design perspective, the modelling diagram also needs to feel modern and refreshing.


Project Highlight

Refreshed Modelling Diagram UI

To explore and communicate ideas, I developed a series of HTML based interactive prototypes to showcase various concepts that could improve usability of the diagram.


Project Highlight

Data at Your Fingertips

In previous versions of the software, users need to rely on Excel-style scripting functions to extract data from the simulation results.

This process is extremely cumbersome and error-prone.

Users normally need to perform extensive checking and debugging to ensure that the model is without errors.

Old


Project Highlight


I conducted several design workshops with key stakeholders in the team to generate and prioritise ideas, creating a shared vision of the new data visualisation tool that will be developed in the coming product.


Project Highlight


By mapping out the user journey of the entire results reporting work process, I gained better insights into major pain-points and inefficiencies of the process.


Project Highlight


I created a series of interactive prototypes in Blend for Visual Studio to demonstrate the use cases of the new data analytic tool that will make it easier for users to make sense of the simulation data and to create reports.

Example of a Results and Charting Tool prototype (Video)


Project Highlight


I created a series of interactive prototypes in Blend for Visual Studio to demonstrate the use cases of the new data analytic tool that will make it easier for users to make sense of the simulation data and to create reports.

Quick summary view (Video)


Project Highlight

User Testing

We invited internal actuaries in the company to join our user testing sessions. During the user testing sessions I let the users go through the prototype and check if there’s any usability issues or requirement mismatches in the design.


Project Highlight

Interface Design

I designed icon assets and implemented XAML UI templates to make sure the details of the user interface are modern and consistent throughout the entire software.


Project Highlight

Remote Collaboration

The client’s development team is distributed between Singapore and London offices. Therefore frequent teleconferences and phone calls are part of the process to maintain effective team communications.


Reflections

Optimising UX Design Process for Agile Teams

Smaller iterations Enterprise software products usually have huge and complex features. UX designers working with agile teams need to work with product owners and scrum masters to break down big features into smaller chunks of user stories to be able to fit into short sprint time frame.

Involve developers early in the process Besides communicating to product owners and scrum masters, UX designers should also include developers early in the design process to “sanity check” their designs. Designing with developers also gives you many useful insights and ideas that would not surface if the team only communicates design to developers through document specifications.

Find and prioritise the core part of a feature While there might be a million “nice to have” features or enhancements to a product, it is important to find and prioritise the core part of every feature for the initial release. Because agile development teams all have limited time and budget, focusing on a smaller set of features or requirements usually results in better user experience than a bigger set of features, especially when the team does not have many UX designers.

Prototypes rather than specifications In an agile team environment, the design or requirements may change rapidly in short time frames. Therefore it is often better for UX designer to adopt a “show, not tell” mentality at work. This means designers should produce prototypes to demonstrate how a feature “could work” instead of how they “should work” and validate their assumptions through user testing and feedbacks.

Project #2

LifeLogger: An iOS Health App for Daily Activity Tracking

UX UI iOS Development Xcode

Project #2

LifeLogger: An iOS Health App for Daily Activity Tracking


LifeLogger is an iPhone application designed to provide simple and straightforward lifestyle insights and health suggestions based on self-reporting data collected with the phone. The app can help users better understand what they have logged as well as to inform the user ways to improve their lifestyles and habits.

Although there are existing activity tracking devices and apps, most of the existing solutions fail to help user understand the underlying correlations of activities, mood states and productivity performance.

The key challenges for LifeLogger include:

1. How to make it a habit for users to log their daily activities?

2. How to use the logged data to help user form healthier habits?

Conceptualised, designed and developed the iOS app by myself within 6 months.

Conducted user research and testing sessions to help with the design and validation cycle.

Project #2: LifeLogger—An iOS Health App for Daily Activity Tracking

The Process

User Research

Wireframing

iOS Development

User Testing

Usage Data & Feedback

At the start, I studied the “Behaviour Model” developed by Dr. BJ Fogg and converted the key insights of the model into design principles.

For user research, I interviewed Quantified Self group members in local meetups to find out why and how activity tracking is useful or beneficial to them. I also collected opinions on things that can be improved.

After initial research, I created simple wireframes to collect early feedback on the design, and then went directly into iOS development and designed & developed the app in Xcode.

After the MVP is developed, I sent out the app to several testers through TestFlight to collect usage data and qualitative feedback, which helped to improve the app.


Project Highlight

User Research

After talking to Quantified Self group members, I created 2 personas based on the research findings:

Persona #1: Mary Smith

Mary Smith is a 22 years old college student. She is an active Fitbit activity tracker user. She cares a lot about her weight and wish to stay slim and attractive. She is graduating next year and is currently under stress to go through job applications and interviews.

Her pain points and needs: • Often feels stressed due to her studies

and job applications; wants to find a way to better managed her stress.

• …

What are the potential solutions: • The app is able to track the situations

under which she stresses the most, and could help her prepare for future similar situations

• …

Persona #2: Robert Walton

Robert Walton is a 38 years old technical officer in a MNC. He is married with two kids. He is also an active member of the Singapore Quantified-Self group and attends QS meeting regularly. He uses Jawbone Up for activity tracking. In a normal work day, he usually spends long hours sitting at his desk.

His pain points and needs: • Sometimes he finds it difficult to balance

between work and life, need to find time to spend quality time with his children.

• …

What are the potential solutions: • The app could provide insight into the

distribution of time into different activities in his daily life. He will know where his life is balanced or which part should be improved

• …


Project Highlight

Design Principles

By studying BJ Fogg’s Behaviour Model, I summarised the following design principles for LifeLogger:

Reduction The logging process should be as simple as possible. It should be designed to have the least effort in order to log any type of item into the system.

Tunnelling The app should have a guided logging process that helps first time user log items fast.

Tailoring The app should try to use machine-learning techniques to learn user behaviour and activities, thus providing useful feedbacks and suggestions for user to review.

Suggestion The app should be able to provide triggers, such as notifications and emails, to remind user to log or review regularly.

Self-monitoring The app should be able to track user defined goals. In addition, the app must also display user-logged items.

Surveillance The app should keep record of all user-logged data and use the data to find patterns in user behaviour. Persistence data requires a cloud service to sync data between the app and the server.

Conditioning The implementation of social elements could help user reinforcement healthy life habits.

Fogg. BJ. (2009). A Behaviour Model for persuasive design. Persuasive ’09. April 26-29, Claremont, California, USA.


Project Highlight

Wireframing

I used Keynote to wireframe the app flow and key interactions. Initial user testing shows that displaying four icons per log type on the logging screen (left) is not very efficient to use as users have to scroll left and right frequently. Activity calories data (middle), while popular among similar apps, appear not very effective for user to understand the health implications. The mood logging interface (right) is confusing for users who are not familiar with the psychological terms.


Project Highlight

Simple Activity Logging Interface

After revision, the logging screen shows a collection of 12 icons in each of the tabs. The most frequently logged activities are promoted to the main screen, which can also be easily customised based on the preference of the user.


Project Highlight

Human-readable Insights

Instead of displaying a chart of quantitative activity data that cannot be easily interpreted by normal users, LifeLogger suggests natural language insights to the user and let the user decide if the insight is true for himself/herself.


Project Highlight

Social Support

Users of LifeLogger can add friends to a private social circle to share their activities and support their peers.


Reflections

Achieve More with Fewer Features

Make MVP small and testable Don’t try to put every feature into the MVP. The MVP should only include key assumptions of the product that must be tested to check if they are valid before more time and resources are put into the project.

Design principles should come from research Sometimes design principles can sound like common sense to designers. However, when designing new products we should always base our design principles on research outcomes rather than only relying on our common sense. Research outcomes provides better insights into human behaviour and interface design best practices. Both primary and secondary research are useful, and sometimes necessary, to gain better understanding of the design context.

Project #3

Sooyee: UI Design of a P2P Lending Search Engine Site

UI Art Direction Style Guide Adobe Photoshop

Project #3

Sooyee: UI Design of a P2P Lending Search Engine Site


Sooyee is a Chinese online search engine for P2P lending projects.

Using the online platform, users can search and browse independent lending funds and projects for their own needs.

The main goal of the UI design project is to establish a modern and consistent visual identity for the entire website, and to produce UI design guidelines & specifications to guide site development.

Exploring art directions with mood boards and communicating with client stakeholders to decide on a final UI look and feel.

Design a simple and effective user interface for a data-heavy search engine.

Flew to Guangzhou, China to work closely with the development team during the UI design phase.

Created mood boards to help explore art directions and set the final UI look and feel.

Designed UI mockups in Adobe Photoshop and reviewed with client stakeholders.

Created UI design style guide to help with the site development.

The entire UI design project was completed within one week.

Project #3: Sooyee—UI Design of a P2P Lending Search Engine Site

The Process

Moodboard UI Mockups

UI Style Guide

Stakeholder Review

The project kickstarted by collecting inspirations for the visual look and feel and organising them into a single moodboard on mural.ly

The moodboard is then reviewed by stakeholders. The team agreed on a final UI look & feel.

After establishing the art direction, I designed UI mockups for key UI elements and screens of the site.

When all the mockups are reviewed and signed off by the client, I created a UI style guide to help with the front-end development.


Project Highlight

Moodboard

By creating a moodboard with various UI art directions, I could collaborate with client stakeholders to explore different styles quickly with minimal cost.


Project Highlight

UI Mockups

I designed UI mockups for key website screens with the final visual look and feel. Each screen is then reviewed by stakeholders, followed by several rounds of revisions.


Project Highlight

Style Guide

I created a style guide for the UI design as the final deliverable. The style guide includes UI details such as colour, typography and measurements to make sure the site development is consistent with the designs.


Reflections

Good Team Communications is Key to Project Success

Review designs early and often I had the opportunity to work within the client’s team during the design process. This offered me huge advantage and convenience in communicating with stakeholders in the team. Daily standups and impromptu meetings allowed me to get frequent feedback and iterate on the design fast.

Design the UI system rather than just screens When designing digital interfaces, it is important to avoid just designing pixel-perfect screens. This is because screens aren’t scalable if the projects evolves. On the other hand, UI system is a library of UI elements and interactions that can be reused for new controls or screens. Designing UI systems can help maintain UI consistency of the live project and also reduce development time.

Other Projects

Property Website

UX UI

Other Projects

Online Food Market

UI

Other Projects

Packnada

UI

Other Projects

WowCheer

UI

Thanks for the opportunity! [email protected] | +65 9352 4133 | liuzenan.com

http://liuzenan.com