Role & Responsibilities

Akila is a startup founded in 2021 with a mission to help organizations decarbonize their operations and improve ESG compliance by leveraging digital twin technology. As the lead of such large and complex B2B SaaS product, I primarily take on two roles.

Design Expert

• Lead the transformation of the design for both web and mobile platforms
  Spearhead the complete redesign of the web and mobile user interfaces, ensuring a seamless, user-centered experience across both platforms. Keep the design fresh and user-friendly by following modern trends like clean layouts, easy navigation, and a focus on what users actually need. Collaborate closely with cross-functional teams to align design strategies.

• Establish design systems, UX/UI guidelines, and establish annotation templates
  Create and maintain a robust design system that ensures consistency across digital touch points, from typography and color schemes to component libraries and UI patterns. Develop detailed UX/UI guidelines to standardize design practices, enabling smoother collaboration across design and development teams. Introduce a design annotation template to streamline feedback and implementation processes, improving communication and efficiency within the team.

Team Lead

• Manage a cross-country product design team of three
  Foster effective communication and collaboration across different time zones and cultures. Ensure alignment on project goals, timelines, and design standards, driving efficiency and consistency in deliverables.

Design Achievements

Akila is primarily a web-based user platform, consisting of the following key product suites: Energy, Carbon, Maintenance, Platform, and Digital Twin. Each suite contains between 2 to 7 core features.
Additionally, there is a dedicated app for the Maintenance suite, which primarily covers work order and inspection features. Given the nature of this product, designers require deep domain knowledge and rely heavily on input from product managers to deliver the best possible user experience. Main deliverables include:

Design System & UX/UI Guidelines

Leading the development and implementation of a design system for both web and mobile platforms, focusing on reusable components, consistency, and user-centric design. Additionally, formalizing UX/UI guidelines to ensure coherence across interactions, visual design, and accessibility. Key deliverables include:

• Styles: Defining typography, color schemes, and visual effects, ensuring consistency in font usage, color hierarchy, and visual hierarchy across the platform.

• Components: Designing a comprehensive set of reusable components, including buttons, checkboxes, badges, form fields, toasts, tooltips, and more, enabling rapid and consistent design implementation across products.

• Patterns: Creating UI patterns for key interactions, such as empty state screens, loading indicators, date and time pickers, dialogs, and modals, to enhance usability and streamline user flows.

• Functions: Standardizing functional flows like filter presets, file uploads, and import/export features, ensuring intuitive and efficient interactions for users.

• Templates: Developing template layouts for typical pages, including table view pages, detail pages, creation/edit pages, and configuration pages, establishing a consistent structure for all product interfaces.

View fullsize

View fullsize

View fullsize

View fullsize

Data Dashboards

Standardizing data visualization components to enhance visual consistency, leveraging the ECharts chart library to provide users with interactive charts and dashboards across various scenarios. Additionally, adding filter functionality—such as time periods and specific data types—allows users to explore data in a more customized way. These improvements are designed to increase data clarity and enable users to engage more effectively with the analytics features.

View fullsize

View fullsize

View fullsize

Mobile Responsiveness

Optimizing mobile responsiveness across web and app platforms ensures a seamless experience on all screen sizes. Key initiatives include designing adaptive layouts that dynamically adjust content, reworking navigation with collapsible hamburger menus for better usability on smaller screens, and implementing touch-friendly elements.

Persona Development

As an initial step toward better understanding users and answering the question 'Who is our user?', the product team initiated a persona workshop. This process involves interviewing client-facing colleagues to gather insights, synthesizing data into actionable persona profiles, and defining core user needs, pain points, and motivations.

design screenshots

⬇ 🎉　

design screenshots ⬇ 🎉　

View fullsize

View fullsize

View fullsize

View fullsize

View fullsize

View fullsize

View fullsize

View fullsize

Tools used: Figma
Work done @  Akila / 2023-Now

Role & Responsibilities

*BOSS is a solution built by REinvent, the property-tech startup company founded in 2020. This project started in July 2020 , and in Dec 2021 it's ready for launch in the Singapore market in Dec 2021. 

As design lead, my responsibilities centers around two major areas:

Design

• Drive design quality across products. Build process to help product designers to improve the quality and detail of their own works. Push the team to deliver design that is well-researched and present reader-friendly documentation. 

• Recognize and handle major problems with unknowns on tight timelines, helping the team to prioritize and make sense of deeply complex problems and cut through to simple design solutions together.

• Provide useful and actionable feedback on multiple team members’ work. Articulate in a fair and efficient way especially on the “why”. Encouraging an environment where disagreements and contrasting opinions are welcomed to enhance the design quality.

Team leadership

• Manage a team of five effectively, maintaining a happy and committed team that is focused on delivering high quality design with positive team chemistry. Mediate difficult conversations between others in the wider team, help direct reports to come to a good solution around performance, title, attitude or compensation.

• Protect the team, ensuring they are always clear on the goal, at the same time work to create space for them to make decisions and grow. Manage stakeholder expectations and serve as the bridge in conversations between HOD and team. 

• Lead the team's design delivery momentum and ensure the quality of product shipped is consistently high. Define multiple interlinked problems across various areas of the product, work with team to provide structural solution and drive implementation. 

Project Background

BOSS - Business Operating System for Space - is the one-stop solution to automate workspace processes, manage tenant lifecycles and streamline flex & hybrid workspace operations. We believe in building a solution that enables unified business modules will boost business efficiency and growth for landlords & space operators like never before.

Pre-pandemic, “flexible working” was slowly but surely taking office culture by storm. And then the pandemic happened. Once remote work became the norm, employees acquired a taste for the flexibility it offered—and their expectations shifted. This gave rise to the “hybrid working model”, and it’s safe to say it’s shaping the world of work as we know it. With BOSS, landlords and space operators can strengthen a gratifying customer experience and boost retention. In turn, maximize the business revenue while ensuring accuracy and efficiency. See above for a complete product feature scope.

Visit official website for more information.

Key product offerings

Depending on who’s using, different BOSS modules can be put together and become a one-stop solution. With the Flex Operate product, an end-to-end customer journey can be managed seamlessly, starting all the way from leads acquisition, contract approval workflow to tenant engagement. With the Engage products, fulfilling experiences can be created to increase customer retention and revenue.

View fullsize

View fullsize

View fullsize

Target Customers

BOSS provides comprehensive benefits to all building stakeholders including the following types:

View fullsize

View fullsize

View fullsize

Process & Approach

Throughout the sprint-based product development process, the product design team has been working closely with product managers and engineers, where squads were formed to maximize efficiency. In every sprint (=2 weeks), the design process is compressed yet solid. In general, after receiving product feature briefing from the product manager, the following steps will be taken to complete the design for a new feature or existing feature improvement:

• Product research - Identify 3-5 competitive products from different markets to 1) breakdown and study the design for inspiration, reference and avoid bad user experience, 2) compare the planned feature to other competitors to see if we can further enhance user need fulfillment.
• Product design - Conceptualize key page layout and user flow, then go into detail design by following branding guideline to create new components that aligns with the visual look and feel, or take existing components from the design system.
• Deliver & iterate - Brief all related parties on the new design, receive feedback and alternate design.

Design Results

The scope of BOSS product design is massive. BOSS is mainly web portal based with 9 core modules: dashboards, sales, space inventory, community, engagement, billing & payments, IT resource, tasks and settings. Each module contains 2-8 key features, for each feature, around 10-40 screens/component variations were created. Aside from the web portal, there is a companion app to go with the community and engagement module, the app contains over 10 features: announcement, news, room booking, service request, door unlock, event space booking, invoice and payment, perks, events, member connect, membership and profile.

Throughout the entire product, data would flow through different modules making the system automated and highly efficient. In order to design for optimized user experience, designers must understand business logic fully and become domain expert.

Main achievements

• Create designs on app, web portal and official website by optimizing usability, simplicity and consistency, pixel by pixel. 
• Identify baseline screen layout/structure, define grids and set up responsive rules for each layout/structure.
• Establish design systems including 1) fundamental components that will be used repeatedly such as input fields, selector, dropdown menu, table, date & time picker, pagination and more, 2) unique components that are used for specific features such as workflow, dashboard, floor plan editor and more.
• Collaborate with engineering team to build synced up component libraries.  

design showcase

App design:

Web portal design:

View fullsize

View fullsize

View fullsize

View fullsize

View fullsize

View fullsize

View fullsize

View fullsize

Some early UX explorations:

View fullsize

View fullsize

View fullsize

View fullsize

View fullsize

View fullsize

Tools used: Figma
Work done @  REinvent / 2020-2022

Role & Responsibilities

Note* Switch is a product built by REinvent, the property-tech startup company founded in 2020. This project started in July 2020 and launched to the Singapore market within 3 months in October 2020. 

As design lead, my responsibilities centers around two major areas:

Design

• Lead the design of creating a new form of interaction for the product and technology. Guide major rethinking and designs of a product set, involving improvements to information architecture or interaction patterns. 

• Direct the team to create user-focused design, run ad hoc user testings and surveys to advocate for users at all stages. Nurturing data-driven design culture, flag note-worthy data on multiple occasions.

• Strategically involved in product and feature definition. Ensure the design evolves with consistent user experience upon every new version released. Provide solutions around difficult project constraints that has emerged along development process.

• Provide useful and actionable feedback on multiple team members’ work. Articulate in a fair and efficient way especially on the “why”. Encouraging an environment where disagreements and contrasting opinions are welcomed to enhance the design quality.

Team leadership

• Manage a team of five effectively, maintaining a happy and committed team that is focused on delivering high quality design with positive team chemistry. Mediate difficult conversations between others in the wider team, help direct reports to come to a good solution around performance, title, attitude or compensation.

• Protect the team, ensuring they are always clear on the goal, at the same time work to create space for them to make decisions and grow. Manage stakeholder expectations and serve as the bridge in conversations between HOD and team. 

• Lead the team's design delivery momentum and ensure the quality of product shipped is consistently high. Define multiple interlinked problems across various areas of the product, work with team to provide structural solution and drive implementation. 

Project Background

Switch is the Airbnb of workspaces, it is a platform product to meet the worldwide work-from-anywhere trend. We believe in building a workspace-on-demand platform can bring innovation to the market and help shape the way people consume spaces.

Key Selling points

Under the influence of COVID, people around the world are in need for new workspace options other than home and fixed offices more than ever. Believing in space-as-a-service, the best way to accommodate the need is with the model of paying for access not ownership, this model is similar to some common applications such as Netflix, Spotify and Uber, which embraces the concept of sharing economy. As of today, Switch has proved that this model is viable and profitable with workspaces.

Key product offerings

Serving as a platform, Switch is a network that connects workspace supplies and demands with a mindfully crafted app. People can find workspaces from various space providers based on location, distance, price, amenity, workspace type, usage type and more. Usage type refers to the way people pay for the workspace and it is at the core of Switch product offering. With Switch, user can enjoy a “walk-in“ visit where you only have to pay for what you use by the minute, or go with the traditional way, make a booking beforehand.

The workspace providers on Switch includes but not limited to Switch booth network, shopping malls/commercial complexes, co-working spaces, traditional office spaces, hotels and residential complexes. Right now, Switch offers the following workspace types:

Target users

Based on user interview and user survey, we have identified 1) user’s current workspace options 2) working patterns and 3) frequency of alternative workspace needs as the key differentiator for user types. See below for the two primary personas:

View fullsize

View fullsize

Switch was launched in Singapore in 2020 and is continuously expanding the market globally. Visit official website for more information.

Process & Approach

Throughout the sprint-based product development process, the product design team has been working closely with product managers and engineers, where squads were formed to maximize efficiency. In every sprint (=2 weeks), the design process is compressed yet solid; in general, after receiving product feature briefing from the product manager, the following steps will be taken to complete the design for a new feature or existing feature improvement.

Design

• Product research - Find similar features on 3-5 products, both online and offline if possible, to 1) breakdown and study the design for inspiration, reference and avoid bad user experience, 2) compare the planned feature to other competitors to see if we can further enhance user need fulfillment.
• Product design - Conceptualize key page layout and user flow, then go into detail design by following branding guideline to create new components that aligns with the visual look and feel, or take existing components from the design system.
• Deliver & iterate - Brief all related parties on the new design, receive feedback and alternate design.

View fullsize

View fullsize

research & data

Over the course of 1.5 years, the team conducted three main user research and continuously tracked key performance metrics.

• Heavy user interview - Conduct user interview on 10 heavy users. Definition of heavy user is based on cohort analysis, users who joined the Switch platform for at least 6 months and 1) has more than 10 total stays, 2) has an order in the last 30 days. The goal of this interview is to verify value proposition, build persona and gain deeper understanding on users’ decision pattern.
• Heavy user survey - Conduct user survey and received 157 responses. Gain an overall understanding on demographics, user needs (reason to use, stay time etc.) and NPS. The survey result was mainly used to provide product feature planning insights, it was also used to help shape Switch primary personas.

View fullsize

View fullsize

View fullsize

• Usability testing - Set up 2 tasks to test out key user journeys on 6 internal team members to discover usability issues. The testing result was used to help us make crucial design decision on the homepage revamp later on.
• Competitor analysis - Select 14 similar products from various markets that offer similar workspace option to compare value proposition, user segmentation, business model and product design.
• Data tracking - Continuously track key metrics including: GTV, MAU (active user = user who stays in the app for at least 10 seconds), MAUP, app install (new install, re-install, update install), app open (stay time irrelevant), user registration, total stay, total usage and more.

View fullsize

View fullsize

View fullsize

Design Results

The scope of the Switch product design is a mini eco-system; with mobile app in the center, key features are made possible by the operation happening backstage on web-portals, usage and feedback results from mobile app are aggregated and flow back to web-portals and Superset (data analysis platform); official website serves as the major online marketing tool, where key product offerings are communicated, site visitors can easily take action to become an user as well.

In turns of design, with the branding guideline setting the basis of color and typography, each product has a standalone design system as some of the UI elements are unique to the platform. All designs are created to optimize user experience while aligning the overall look and feel. Lastly, a product writing guideline is created and followed so that all UI copies appear on screen are standardized.

Main Achievements

• Create cross-platform designs on app, WeChat mini-program, web portal and official website by optimizing usability, simplicity and consistency, pixel by pixel.
• Design the user experience for core user journeys including 1) check in and check out of workspaces with QR code and prevent malicious use on app, 2) enterprise user self-serve registration via official website 3) Feedback receiving channel with very little man power. 
• Establish design systems including 1) fundamental components that will be used repeatedly such as input fields, selector, dropdown menu, table, date & time picker, pagination and more, 2) common UI elements that can be used cross-platform.
• Collaborate with engineering team to build synced up component libraries.

Design Showcase

App design: iOS download link | Android download link

Web portal design:

View fullsize

View fullsize

View fullsize

View fullsize

View fullsize

View fullsize

View fullsize

Some early UX design examples:

View fullsize

View fullsize

View fullsize

View fullsize

View fullsize

View fullsize

Tool used: Figma
Work done @  REinvent / 2020-2022

Role & Responsibilities

• Role: Project lead / Duration: 2017 Q1-2018 Q2
• As project lead, I am responsible for giving design direction, overseeing deliverable quality, presentation and fostering communication.

Project Background

Being the top selling brand in the sportswear category on Taobao Tmall (the leading e-commence platform in China), Nike is highly motivated to remain dominant and progressive by bringing premium experiences to Tmall users. In 2012, Nike opened its first official Tmall store. During the time of our collaboration since 2017, two more stores were opened on Tmall; the first standalone online Jordan flagship store and Nike Young Athlete store. Tmall is a highly commercial-driven platform, nevertheless, our goal in shaping the Nike Tmall store is always to strike a balance between branding and profitability. Our major opportunity areas included:

• Overall store usability improvement - micro innovate module interaction, leverage platform technology to better support product exploration and keep the store experience fresh.

• Campaign page design and design workflow improvement - with lowering design cost in mind, improve work flow efficiency by setting up reusable templates.

• Conversion design - gradually integrate Nike’s membership into Tmall, leverage user data to create a personalized store experience for everyone.

Approach & Result

The design process can be divided into 3 key phases: research + design opportunity, concept design and detail design.

• Research/Market trend and competitor analysis - Understand market and consumer trend, where Nike places in terms of providing digital services and addressing true user needs compared to other competitors.

• Research/User interview, persona and user journey - Understand and provide reports on Tmall store customers, decision pattern and user journey.

• Research/Stakeholder mapping - Understand key person and resources related to project, how will the final design affect these personnels in what way.

• Synthesis - Provide advise on service integration, experience personalization, overall digital channel strategy and insight on retail innovation.

• Design - Based on research, conceptualize key module layout, display logic and information structure.

• Design - Based on branding visual styleguide, visual look and feel.

Takeaways

What is the real challenge of building the Nike Tmall store?

To any Chinese consumers living in first tier cities, there are at least 5 ways to purchase Nike product. Among all the purchase channels, Tmall is the most commercial-driven one, people expect to find a bargain here and would use Tmall as baseline price. However, as new generation of consumers become the main source of store revenue, Tmall store owners must acknowledge the fact that their consumers are less price sensitive, and values brand recognition more than ever before. At the same time, the smooth mobile payment process and well-established logistics Tmall provides no longer stands as a prominent advantage. Consumers are expecting to receive better services, their definition of good shopping experience is not limited to the moment of purchase, rather, before and after purchases are included.

Facing the change, Tmall brings in membership and provide brands the tools to personalize their store experience, a big part of this is to utilize user data that Tmall has been cumulating. That being said, Nike will be able to provide Tmall store users a wholesome brand experience, from better product selection, brand content, professional customer service and be more aligned with official events/campaigns. We can see that Nike Tmall store design direction is directly linked to Tmall’s overall strategy as a e-commerce platform. Realistically, to perform a major store experience upgrade, you will need content (such as rich merchandise information, brand stories, blog posts) and system integration (such as membership, offline event sign up portal) to be ready, at the same time, making sure all these changes will not affect revenue is of top priority. We landed on an approach to modify one module at a time and only for a limited duration of time, then, analyze data feedback (such as click rate, conversion rate, increase of traffic) to determine if the change is to be made. A key person from Nike is assigned to oversee the process, monitor data and make long-term plans accordingly.

The real challenge lies in the partnership between Nike and Tmall, to name a few: how long and to what degree can Nike access user data, how to integrate existing systems with Tmall system without effecting Nike’s technical infrastructure, how to keep growing store revenue without directing Nike consumers away from their official channels (Nike app, Nike offline stores etc.). The decision of any problem mentioned above will eventually affect the store design, as a partner agency, we must provide our professional advise to key stakeholders, make sure they are well-informed to move on with an optimal strategy.

Work done @  ARK Innovation Consulting / 2017-2018

Role & Responsibilities

• Role: Project lead / Duration: 3.5 months (2018-2019)
• As project lead, I am responsible for giving design direction, cooperating with engineering team from both front and back end to develop the app, oversee deliverable quality, give presentation and foster communication.

Project Background

With the ambition of becoming one the top maternity hospitals in China, chairman of New Changan Group believes it’s time to introduce the highest medical care quality to China. A small yet necessary part of the roadmap is providing digital services to their customers. As a first step, our goal is to help New Changan set up the infrastructure to revolutionize this traditional industry, apply technology to empower offline experiences and to enable continuous, seamless service with the official app.     

Approach & Result

Research/User interview - Gain deep understanding on expectant mothers, mothers, fathers and their needs and pain points during pregnancy, labor and after pregnancy period. 

Synthesis - Provide advise on app design strategy, in terms of short-term actionables, target users, function release priorities and long term goal.

Design - Create app structure/ information architecture, detail interaction flows. 

Design - Create visual design based on existing brand language. We developed 2 visual directions, one expresses an organic/life-form style, the other is after a young/clean-edge style.

Takeaways

Human or machine, which focus can provide a better service?

This project was my first case in the medical industry, and it delightfully broadened my view in many ways. It’s not unusual for a project to have multiple stakeholders, but they rarely disagree on each other on a fundamental level. On this project, two key stakeholders shared very different point of views on “what is the definition of innovative hospital service“, this made the team reflect deeply on “what is the next generation of medical service?” Their point of views dictates the direction of the app design, for example, wether to be creative on online-offline integration, build interconnected systems rather than standalone systems, bring in e-commerce platforms, or, stick to the basic functions (appointments, information inquiry etc.), simply make sure the user experience is smooth and leave the rest to human hands.  On the one hand, the Dean of hospital, in his late 60s, has travelled around the world to see how high-end hospitals operates, firmly believe in human service is the way to go; On the other hand, the construction/project director, in his late 30s, wishes to fully introduce internet into the ecosystem, this is how revolution is done. The debate was never resolved.

If you look at the whole picture, for a new hospital that is just about to open, the design of related digital platform is really at the bottom of the priority list, we ended up creating a design that steered away from being “too innovative” with basic function and good user experience, then, focused on the key service (maternity care) to bring fresh ideas online (for example, the mommy nest), targeting a younger generation, as the first step towards bringing internet services to this hospital. In the end, there’s no definite answer to whether a hospital should adopt more machine or human approach to their services, this depends on the scenarios where service is required, also, the cost of building the service must be taken into account. Bear in mind that a maternity center is different from medical hospital, there’s also potential to set up different tiers of service package, catered to various user journeys and customer preferences. In the long run, a project with such scale requires sophisticated planning and good supervision over execution for this to work.  

Work done @  ARK Innovation Consulting / 2018-2019

Role & Responsibilities

• Role: Project lead / Duration: 4.5 months (2018)
• As project lead, I am responsible for giving design direction, overseeing deliverable quality,  presentation and fostering communication.

Project Background 

After entering China for more than 10 years, Citibank continues to be one of the top foreign banks that comes with oversea financial benefits and global professionals, however, the appeal is no longer enough to capture the interest of Chinese customers, as local banks offer competitive products, services and more importantly, mobile conveniency. Our goal is to identify and resolve the most urgent user needs that are unique to the digital environment of China and help Citibank reconnect to their customers.

Major opportunity areas: 

• Discover pain points and user needs - We already know that the user experience of current digital products are lower than expectation, but what are the most pressing issues that should be fixed and can potentially bring immediate improvement? 

• Re-evaluate value proposition - Citibank offers competitive credit card benefits and financial products, how to articulate product values and communicate with current/future customers in a memorable way? 

• Redesign customer engagement - How to engage and connect to customers in order to cultivate more dedicated customers?

Approach & Result

The design process can be divided into 3 phases: research, synthesis and design.

• Research/Market trend, competitor analysis - Identify the key challenges Citibank is facing in the Chinese market for major business units: credit card and finance, provide advise on digital channel strategy (prioritization and key functions).

• Research/User interview, user journey - Gain deep understanding on both Citibank client and front line employee.

Synthesis - Communicate unique user needs, design preferences and product expectations in China to Citibank global in order to reshape the digital experience of Citibank China.  

Design - Based on research, conceptualize key visual looks.

Takeaways 

What matters most in terms of digital platform design for a bank operating in China?

There are 3 key points to the design of digital platform in a finance context: security, clarity and conveniency. 

There are two levels of security, actual security and perception of security. Actual security comes from a technical stand point, the steps to take in order to ensure safe transactions and inquiries, this has to translate into actual interaction. For example, how long does it take to complete an action? Is there any redundant security checks? Does the platform offer security without users having to memorize too much information? Perception of security is built on a smooth user journey and sufficient visual/textual cues, users has to be clear about what is happening right now and receive feedback of successful/unsuccessful actions.

Clarity is crucial as the amount and types of information on a bank app is enormous, keeping users informed so they can get around without hesitation. Know what the pillar services are and layout the entry points accordingly; know the connection between different services and lay it out on the user journey to enhance service experience; make clear explanation handy when it comes to important numbers.

To this day, the above two principles are considered minimum requirement in China, most of the banking app designs you see are identical, as the layout and functionality are becoming standardized, there is little room for interaction and visual design innovation, after all, in a financial context, efficiency is required, and familiarity makes sure of it. 

From a designer’s standpoint, conveniency is the most interesting aspect among the three, making it intuitively convenient for users means being proactive without being intrusive. This demands a lot of thinking and workaround. For example, are services available on mobile environment whenever it is needed and some services may be partially working when offline? Is there an experience consistency across different platforms so that user doesn’t have to choose? Can an online service help speed up offline service or potentially save users the trip to visit an offline bank? There are many design opportunities to explore, this is also the area where every bank is trying to innovate and stand out, which calls for stakeholders to smartly strategize the design direction and consider priority of resource allocation.   

Work done @  ARK Innovation Consulting / 2018

Role & Responsibilities

• Role: Project lead / Duration: 2.5 months (2018)
• As project lead, I am responsible of giving design direction, overseeing deliverable quality,  presentation and fostering communication.

Project Background 

The new energy automobile industry is booming in China with government support on policy and infrastructure levels, local enterprises rose to seize the chance of creating the next-generation automobile equipped with what the latest technology can offer. Lixiang entered the market with firm ground, nailing a specific user group: families and a strategically budget price range, they want to build a car that their employees will be excited about. Our goal is to work with Lixiang, explore how the future generation of HMI could be on a 4 screen setup, focusing on the deep integration of internet services and voice UI. 
More information on this client: https://www.lixiang.com/

Approach & Result

Research/User interview, persona and scenario, user journey- Gain a deep understanding of drivers and different types of passengers, as well as identify key driving scenarios & corresponding core needs. 

Design - Conceptualize 4 screen HMI interaction structure and visual style, provide prototype and demonstration video. 

Design - Create visual design.

Takeaways

How to elegantly shove all the functions and services into a car? 

When it comes to new energy automobiles powered by the internet, people’s imagination goes wild, the 4 screen decision is an embodiment of being bold and different, almost as a statement. Naturally, one has to know what the car can offer with this huge screen across the board? I think something is exciting about what could be achieved by such an unusual screen size, however, it’s hard to shake off the notion that anything that catches the driver’s attention could potentially cause safety issues. 

When you start to examine exactly what is going to be displayed on screen, you see functionally distinct systems: dashboard (speed, gas, car light information, etc.), center system (settings, connectivity, notifications, etc.), entertainment system (media, games, etc.) and hardware control system (air-conditioning, seat heat, etc.). For these systems to work and more importantly, be understood by users, the design has to be precise, information has to be structured. Especially when the target user group is likely to have prior driving experiences and are accustomed to the way things were. A complete innovation on a mixture of systems, or interaction style that deviates too far from smartphone interaction might cause a negative effect on the purchase decision. This was the initial assessment we had before getting into the actual design. From another realistic business perspective, you don’t want to go all-in with the resources at the risk of not being fully accepted by the market, it is wise to identify your pillar services that match market needs first, then release them with a solid plan. Consumers need time to adjust their expectations, making the transition period smooth is part of the responsibilities for any enterprise when introducing a new product to the market. So, a short answer to the opening question is: you don’t shove all the functions and services into a car at once.

In order to gain a clear view on the scope of design, we created a system structure that includes only the essential building blocks of the HMI. This graph helped us focus on the essentials for the first release. The fundamental elements includes: account, car, service, voice control, notification and applications. On the right side, the relationship between these elements were depicted. See below:

How to push the boundaries of design?

One of the most inspiring characters I encountered during my 3-year consulting career is the director from Lixiang, who was in charge of the entirety of the automobile production, from hardware to software. Many discussion and workshop sessions were held, though the topic and occasion might differ, he would consistently ask the right questions and would not stop until everyone really starts to think before responding, these questions had pushed everyone on the project to a deeper level, examine and refine the solution to a much more sophisticated, wholesome state. See below for a documentary on a transition of the thinking process:

From a surface level (starting point: user research, market research etc.) that tackles the practical problems to an abstract level (transforming everything into design elements) that lets you make sense of things with a minimal filter, getting to the core of what is essential. How does element A connect to element B? When put in environment C, what happens to the connection? Does the element change under different conditions? In the end, we were able to build an automobile system that’s logical, well-supported and, simple. This is how we tried to push the boundaries of design.  

Work done @  ARK Innovation Consulting / 2018

• Role: Key project driver
• Drive and shape the design methodology at our agency: ARK Innovation Consulting.

Project Background & Result

Every consulting agency has their own flavor of the design methodology, although similar in their ideals and process, ultimately it is up to the design practitioners to determine the how, what and why. I had learned and practiced the many facets of design during my professional tenure, of which I’ve filtered and refined into the key driver of ARK’s core design methodology that is applied to the culture, people, and work. The 3 building blocks I am including in my design methodology are:   

1. Mindset - the mindset of being a consultant, from junior to senior. 

2. Process - the general guideline of a project cycle, how to adapt to different industries and project types. 

3. Technique - the specific techniques to use from phase to phase, how to choose from the pool and why.

Here’s a look at the draft structure:

In this manual, I built a book-like structure covering the 3 areas mentioned above, each area includes a series of related topic, seeking to answer the burning questions everyone needs answers to, such as “How do I even begin to form business strategy when I am just a recent graduate?” or “What does NEW RETAIL even mean anyway?”, the goal is to provide thoughts and guidance from experienced designers who had been through the same puzzling phase, and give practical pointers for the audience to take action right away. The format is highly concise by design, so as to make sure everyone gets the message in an effective, light-hearted way, and be inspired to practice independent thinking, one chapter at a time. 

This manual is also a proud collaborative work, after the fundamental building pillars is finished, a suitable designer will be chosen based on their strengths and abilities to own the corresponding topic. Topic owners are free to research and do a write-up to answer the key question, provide academic materials or case studies as supporting evidence. Once the manual is in shape, an internal sharing plan can be arranged, content release will be followed by a discussion forum. 

Aside from the above internal facing methodology, I created an external facing methodology together with our CEO, the goal is to elaborate the innovation process and important thinking behind it. There are 3 key steps:

1. Define growth opportunity - based on brand and realistic market needs to define a clear opportunity area, as well as the main goal of collaboration. 

2. Provide the most effective solution- think outside AND inside of the box for solution, specify the criteria for determining how is the solution effective. 

3. Convert solution into execution - create feasible working plans and detail design to be followed and executed.

Another attempt to capture the design process is depicted below, note that variation may apply for different project types (research-oriented, design-oriented, specific industries):

Work done @  ARK Innovation Consulting / 2018-2019

• Role: Senior interaction designer /Duration: 3 months (2016)
• As senior interaction designer, I was responsible for conducting user research, creating interaction design and presenting project results.

Project Goal

Design the first version of companion app for underwater bot. 
*see http://www.qysea.com/cn.html for more information.

Approach & Result

Research/User interview - Learn about needs expert outdoor players and business use cases for underwater robot. 

Synthesis - Identify key functions for launch and provide advise on business development roadmap.

Design - Create app structure/ information architecture and detail interaction flows.

Design - Create visual design.

Work done @  ARK Innovation Consulting / 2017

• Role: Senior interaction designer /Duration: 3 months (2016)
• As senior interaction designer, I was responsible for conducting user research, creating interaction design and presenting project results.

Project goal

Redesign the app for one of the top short term lease platforms in China as well as explore future business opportunities.

Approach & Result

Research/User interview - Gain deep understanding on family traveling scenario.  

Design - Create app structure/ information architecture and detail interaction flows.

Design - Create visual design.

Work done @  ARK Innovation Consulting / 2016

• Role: Senior interaction designer /Duration: 3 months (2016)
• As senior interaction designer, I was responsible for conducting user research, creating interaction design and presenting project results.

Project Goal

Differentiate service capability of a community bank from retail bank and provide unique online to offline experience, in order to increase customer satisfaction and activeness.  

Approach & Result

Research/User interview - Gain deep understanding on elderly customers, learn about finance in a community setting. 

Design - Create app structure/ information architecture and detail interaction flows.

Design - Create visual design.

Work done @  ARK Innovation Consulting / 2016

Focusing on scalability and adaptability, H5OS is a customized HTML-5 based, commercially ready OS, created for mobile and the IoT. A series of core apps that you would expect to see from smartphones are included in H5OS for the smart feature phone.

Working on multiple apps has been a very challenging and rewarding experience, as we were transforming what people love about smartphones into feature phone adapted usabilities. Differing form factors can introduce very different interaction models. We want to utilize physical keys while avoiding the navigation burden it might incur. As a case in point, vertical list looping is enabled to allow user quickly access of top/bottom of list.

Another design task is that the unique functions of each app needs to be highlighted while maintaining the design consistency across apps. We discussed extensively to identify what the key features are for apps within the same category (such as communications, productivity) and what are the ways to make those features easily accessible. For example, most used functions are always place on the left side of the soft key bar. This is particularly important considering the target user may be the elderly. Applying similar interaction models to different apps can effectively lower the learning curve for them.  

Main contribution

• Designed and created a wide range of smart feature phone app wireframes including Browser, Message, Camera, Gallery, FTU, CMAS, Music, Secondary screen, Notifications and home / launcher.
• Assisted on scheduling interaction spec delivery deadlines and collaborate with PMs to clarify requirements.
• Worked closely with visual designers to create the best UI with both aesthetics and usability .
• Worked closely with developers to discuss the feasibilities of features and potential solutions.
• Worked closely with QA members to assure the quality of H5OS smart feature phone.

Sample wireframe

WIREFRAME 1/12

WIREFRAME 2/12

WIREFRAME 3/12

WIREFRAME 4/12

WIREFRAME 5/12

WIREFRAME 6/12

WIREFRAME 7/12

WIREFRAME 8/12

WIREFRAME 9/12

WIREFRAME 10/12

WIREFRAME 11/12

WIREFRAME 12/12

Work done @  ACADINE Technologies H5OS 2015-2016

These guidelines describe in detail of the overall physical key behavior, common UI component purposes, general patterns (such as navigation through items, selecting items, processing etc.) and audio channel competing rules that are applied in H5OS for the smart feature phone.

 Many problem solving revolved around balancing the visual design and usability. Due to the nature of the device input, navigation visual cues has to be explicitly clear, as almost every key press will result in changes of focus or screen status. For instance when there's a disabled function in the list item format, the focus visual indicator has to be able to allow the user to see the state at a glance. We also made many attempts to strike a balance between creating a spacial look & feel and utilizing the limited screen space. The dimensions of each UI elements were carefully designed through multiple iterations. 

Main contribution

• Set up guideline for overall common component, system responsiveness evaluation standard and audio channel competing rules.
• Designed and created guideline documents for the above items.
• Worked closely with visual designers to create the best UI with both aesthetics and usability .
• Worked closely with developers to discuss the feasibilities of features and potential solutions.
• Worked closely with QA members to assure the quality of H5OS smart feature phone.

Sample guideline

WIREFRAME 1/13

WIREFRAME 2/13

WIREFRAME 3/13

WIREFRAME 4/13

WIREFRAME 5/13

WIREFRAME 6/13

WIREFRAME 7/13

WIREFRAME 8/13

WIREFRAME 9/13

WIREFRAME 10/13

WIREFRAME 11/13

WIREFRAME 12/13

WIREFRAME 13/13

Work done @  ACADINE Technologies / H5OS  2015-2016

Sample wireframe

WIREFRAME 1/6

WIREFRAME 2/6

WIREFRAME 3/6

WIREFRAME 4/6

WIREFRAME 5/6

WIREFRAME 6/6

Work done @  ACADINE Technologies / H5OS  2016

The purpose is to rethink the way we communicate and share. To explore, to participate, to remember as we live. To break the boundaries of predefined time. To look back with a certain nostalgia, and to write down your own chapter of the story.

Main contribution

• Collaborated with team and brainstormed ideas on this project.
• Designed and created paper prototyped UI interface for concept communication.
• Presented the idea to multiple teams within entire Mozilla Corporation.

Work done @  Mozilla Taiwan / Firefox OS  2015

View fullsize

View fullsize

View fullsize

View fullsize

View fullsize

View fullsize

View fullsize

View fullsize

- Visual credit Ceci Cheng.

One thing to bear in mind when designing for big screens is that the distance between the user and the device; the amount of information the user perceives at once and the interaction model are quite different from handheld devices. We want to make sure that the users can focus on their task and know exactly where they are every step of the way. For example, search results are clearly categorized with cards.

Main contribution

• Collaborated with team and brainstormed ideas on the concept of TV apps.
• Designed and created TV app wireframes including Search, Settings and Tutorials.

Sample wireframe

WIREFRAME 1/10

WIREFRAME 2/10

WIREFRAME 3/10

WIREFRAME 4/10

WIREFRAME 5/10

WIREFRAME 6/10

WIREFRAME 7/10

WIREFRAME 8/10

WIREFRAME 9/10

WIREFRAME 10/10

Work done @  Mozilla Taiwan / Firefox OS 2015

Firefox mobile browser restructure aims at resolving the two pain points we observed. First, the browser has become too cluttered, confusing and complex. It should be simple, easy to use and ready when needed. Secondly, at times when connectivity can be unpredictable and the concept of offline may not be understood by  some users, they expect their content to be available when they need it.

Visual credit Eric Pang.

Main contribution

• Collaborated with team and brainstormed ideas on this project.
• Designed and created wireframes for concept communication.

Sample wireframe

Work done @  Mozilla Taiwan / Firefox OS  2015

Main contribution

• Set up guideline for overall system responsiveness evaluation standard and audio channel competing rules.
• Designed and created guideline documents for the above items.
• Collaborated with PMs to raise awareness on the system responsiveness evaluation project.
• Worked closely with developers to discuss the feasibilities of features and potential solutions.

Sample wireframe

WIREFRAME 1/5

WIREFRAME 2/5

WIREFRAME 3/5

WIREFRAME 4/5

WIREFRAME 5/5

Work done @  Mozilla Taiwan / Firefox OS 2015