icon1 icon2 icon3

Navigation tips

Swipe/Drag Use keyboards arrows Switch view
img6

2018Anker: Soundcore app

img1

Small BatchRedesign Nubia checkout

img2

2017Nubia Design System

img3

2016Nubia web products

img4

2015OnePlus web products

img5

2014GBI web applications

img7

2012AQM app and website

img8

EXERCISEMicrosoft Bing

2018Soundcore Mobile app

This arcticle is under construction! Please come back soon to see the updates!
img6 AQM

Small BatchRedesign Nubia checkout: add new payment methods

img1

Introduction

In 2016, Nubia launched an E-commerce platform that operates in Indonesia and Thailand. Because of fast pace development and the progressive increase of components, the design became inconsistent with a lot of usability issues. When we decided to implement additional payment methods, we decided to take time to redesign the entire checkout process, from cart to payment confirmation, with a special focus on the mobile version, since 60% of our users are using smartphones to visit those pages

A look at the current checkout process

checkout

To avoid any consumer loss during the purchasing process, we must provide a really smooth experience. Looking back at the initial design with new features we identified several problems

The first pain point is right after validation of the cart where the user is forced to create an account with email or social media account. UX researches show that users tend to leave the page during this phase. To increase the buyer’s motivation to finish the purchasing process, my recommendation was to integrate a guest checkout. Offering the flexibility to the user to decide whether he wants to create an account or not at the end of the process greatly improves the buying experience.

Then, from Shipping to payment, the additional features that were added the past months seemed incoherent with the flow and quite disturbing. We have worked on improving the consistency of the overall flow ensuring a certain logic amongst each component.

Adding payment methods

Even though all the checkout process has been redesigned, in this article, I will focus only on how we added new the payment methods.. Those new payments include: pay with bank card, with 3rd-party internet banking, with partners installments or at affiliated counters

checkout

To work on this project, I decided to use a tool I'd been testing for a while: Adobe XD

I’ve started by analyzing the requirements, exploring different e-commerce websites and sketching all the potential user scenarios. Then, using components from our library, I quickly designed a high-fidelity user-flow including all the different mobile screens

checkout

I made this prototype interactive and created an animation of the whole flow to ease the communications with PM and devs.

UI video

Following the same method for the web version:

checkout

Front-End and Design System

After the mockups are validated, we code a responsive HTML prototypes using the code library from the Design System I have created. If any new component is created, the Design System will be updated.

checkout

2017Nubia Design System

I've implemented our first design system at Nubia in 2016, it was similar to many design systems you can find on the Internet today. Designed to appeal to and support a broad audience within Nubia and contained a large selection of common design patterns. This was purposely done to drive adoption of design standards trying to ensure that Nubia developers integrate consistent looking pages.

The original system was a success internally, but we started to notice growing pains over the time. It worked well for basics like buttons or text boxes, but wasn’t enough to address our needs for more complex patterns such as store homepage or buying process.

The constant necessity to modify and scale design patterns introduced inconsistency and wasted the initial purpose of a design system. In addition, a design system that only provided a set of independent parts wasn’t that straightforward to interpret for different people. As a consequence of this, constant questions and additional enquiries for design direction resulting to an important waste of time. It was necessary to find a solution to improve that method.

img2

A design system should be more than a library of UI components to be effective. Based on that experience, we decided that our next version of Nubia design system would focus on learning and sharing by including examples on how design patterns are used in real products and use cases.

Based on Atomic Design

The Atomic Design methodology envisioned by Brad Frost is a hierarchical manner of organizing design patterns (by ascending order: Atoms, Molecules, Organisms, Templates, Pages).

The foundation is composed of basic design patterns, like a button, checkboxes, icons, etc.. (Atoms). Then, the second level (Molecules) could be for example a login form which brings together button, text inputs and checkboxes into a more structured pattern. Each increasing level is composed of a combination of the patterns from the precedent levels.

There are two main benefit in this approach. First, the designer doesn’t need to redescribe how buttons or text boxes behave. Second, the ‘Molecules” (login form) gives a a perfect example of how to use the “Atoms” (button, checkboxes, icons..) reliably. Atomic Design simplify the learning process of how should the patterns work and is a lot easier to maintain when expending the design system component.

Atomic Design at Nubia

Nubia

We divided the Design System in 5 sections: Principles, Basics, Components, Templates Applications

Principles

Principles are the guiding ‘rules’ that shall be followed and respected when creating new design patterns. Principles are the basis of the design system and establish a stable logic (like motion rules, spacing, etc..)

Basics

Nubia

Basics level based on Atoms from Atomic Design methodology, including the simple design patterns like buttons, check boxes or icons. Basics are the smallest pattern and can’t be broken down to smaller structures

Components

Nubia

Components level is based on Molecules from Atomic Design. It includes the patterns that are composed of several Basics like a drop down menu, a modal window, a pagination,.. Components is one of the most used level for designers and developers.

Templates

In our system, Templates is regrouping Organisms and Templates concepts of Atomic Design. The main intent here is to document the layout and structure of a entire interface or section.

Applications

The Applications level is the biggest concept in the hierarchy. It includes a combination of several Templates components demonstrating how they interact with each others.

2016Nubia web products

Introduction

Nubia started as a division of ZTE and quickly became a recognized independent brand selling mid to high-end smartphones with a focus on Photography.

After 6 months as Senior UX/UI Designer, I got promoted Director of international web products with the goal of building from scratch all the global websites. It includes official websites, stores, and technical support sections. After a successful start on these projects, I’m now implementing UX/UI principles to the Chinese domestic website, working closely with different teams including Official, Store, Support, ROM section, Community… Each different sections of the website being the responsibility of different departments implementing principles is helping to improve the consistency.

The goal is to create a cohesive user interface across all Nubia web products, for global and domestic. To do so, I implemented a Design System. But this is a story for another article.

Process

The work process is an Agile inspired methodology, implemented with a small team: 3 PM, 1 UX Designer, 1 Visual Designer, 1 Front-End developer.

Every 2 weeks, all the team meet together. In this meeting, we discuss about the tasks from the past sprint: What are the results? Did we find some obstacles? Did we succeed to achieve the task easily?

Then we discuss and plan the next sprint and the coming tasks. The PM propose new features, we analyze these requests, we identify what will be all the tasks to accomplish in order to design this feature. We give a time estimation for each task, and assign them to the adequate member. It goes from doing an UX research for a new idea, to design a new UI component or code a prototype and support the dev when they’re implementing it

The team members are not located in the same office . So all tasks are listed in a online spreadsheet that everyone can access online. . In this document, we record the time estimation, the time effectively spent, the status and who’s working on the task.

Every morning, team members connect to the document so that they can update the status and see what task they have to do. This allows us to know in real-time what the team is doing and what is the progression

One more thing...

Summary of achievement at Nubia

  • Leading and creating the design strategy, UX, IA and UI for Nubia global responsive websites, achieving:
  • Large UX Design research including (Usability test, Competitive analysis,..)
  • Work closely with the executives on the brand design strategy
  • Launch of official websites in more than 18 countries, including India, Italia, Germany, Russia, Spain, Thailand, USA…
  • Launch of Online Stores in Thailand and Indonesia
  • Normalization of products pages
  • Implemented “Atomic Design” strategy to help Designer and Devs to create new web product efficiently
  • Develop style guide and standards for all coming web products
  • Improve branding and user experience by ensuring consistency and guideline are respected
  • Designed various UI elements on the website
  • Hi-fidelity HTML prototype
  • Monitor and circulate latest design and technology trends information

2015OnePlus web products

img1

Introduction

OnePlus is probably one of the most interesting startup in the mobile industry. In just few years, it became one the most famous mobile phone brand in western markets.

OnePlus brand is well known for the quality of its smartphones , the vibrant community of users and its clever marketing actions. Although OnePlus is owned by the company Oppo, it operates independently.

OnePlus

In Shenzhen headquarter, I served as Senior UX/UI designer in the global web products team. My main mission was to completely redesign the community section of the website and to solve different design challenges for various web products.

Process

The project managers and myself to discuss about a new feature or new project and at the end of which ideas and potential sketches were recorded in a brief.

OnePlus

Then, a formal kick-off meeting was organized including all stakeholders and during which I used to introduce the preliminary design explorations with rough mockups or wireframes.

OnePlus

After that, I worked in tandem with a front-end developer to create a prototype. During the sprint, regular meetings were held with the project manager to review the design proposals.

OnePlus

Once the team agreed on the user flow and felt ready, we used to develop a functional prototype to share with internal testers from any department and collect feedbacks.

OnePlus

Once test feedbacks were addressed, UX and visual design completed, the development team started to develop the project keeping a certain flexibility in case of unforeseen challenges.

OnePlus

For some projects like ‘Community’, we recruited few of our community members and offered them an early access to our beta version so that potential issues could be identified before eventually releasing the official beta version.

OnePlus

Summary of achievement at OnePlus

  • Led and created the design, UX, IA and UI for Community new responsive multi-language website, achieving:
  • Hi-fidelity HTML prototype
  • High satisfaction according to users survey
  • Added gamification principles
  • Creation of the mobile version
  • Be responsible for front-end quality assurance and pre-launch review
  • Created the design, UX, IA and UI for ROMs download section
  • Created and maintained complete UX documentations (User Flows, Flowcharts, Interaction models..)
  • Collaborated with project managers, marketing team to define and translate strategies into creative concepts
  • Designed various UI elements on the website
  • Designed an advanced automatic translator tool

2014GBI web applications

img5

Introduction

GBI is an American big data company which provides business intelligence system in healthcare industry. GBI’s web and mobile applications enable organizations and individuals to make data-driven decisions and communicate more effectively.

In Shanghai headquarter, I served as Senior UX/UI designer. My main mission was to completely redesign GBI web products. To create a cohesive user interface by contributing to the development and maintenance of a style guide/ pattern library. To achieve this goal, I led a team of 3 (1 Visual Designer, 2 Front-End developers) and together we collaborate closely with business analysts, product managers and developers to practice user-centered design within an Agile process.

GBI

The Process

The process begins when I get a request from one of GBI's Product Managers (Each product is owned by 1 Product Manager).

The request usually presents itself as a user scenario such as : “A user needs to have access to GBI data on his way to the office. He’s using a tablet and wants to view charts and annotate them. Afterwards, he wants to share the updates with colleagues.”

In response, I start investigating the problem the feature aims to solve. This initial research consists of doing some design research: Competitive analysis, Personas, Wireframes, User flows, sketch…

GBI

Once the rough feature sets are decided, the team holds a formal kickoff meeting with Developers, PM and BA. Once the team members divided their specific tasks and made time evaluation to complete it, I include these tasks in the next 5-days sprint for the team.

When the sprint begins (usually the next Monday), the team starts working on the different tasks, designing mockups and coding HTML prototypes.

Some projects require to create simple wireframes, while others will be directly coded and added to high-fidelity HTML prototypes, easily accessible online by the Developers, Business Analyst, PM, Designers.

GBI

To speed up the process of the team, I created templates for all UX documents. To consolidate GBI’s team knowledge, we created interactive HTML Design System pages to present our Guidelines and Components libraries. Every time new components are created while adding a new feature to the products, we add it to the Design System.

Since our team’s work focused on specific features within existing products, the prototyping, testing, and iterating process continues until the system feels refined and complete.

Once a prototype is ready for development, the team will update the Design System with mentions of any major changes to the interaction models.

GBI

As the developers build out the feature, the design team prepare their next sprint. We also provide support for the devs and review the ready-to-publish version, in order to be sure the design is respected before implementation.

Summary of achievements

  • Led and created the design strategy, UX, IA and UI for all GBI enterprises products
  • Defined work process following Agile/Scrum methodology for the Design Team
  • Created a new and cohesive user interface
  • Creation and maintenance of a style guide/ pattern library and the consistent deployment across the digital platform
  • Worked closely with the CEO on the design and product strategy
  • Improved product usability by designing products focused on user needs
  • Created mobile version of emails, web applications
  • With support of Engineering VP, implementation of a new HTML framework for Front-End developers
  • Created and maintain the user interaction model, information architecture, schematics, wireframes, affinity diagrams
  • Created user needs documentation including heuristic evaluations, persona development, user scenarios and concept models
  • Created UX documents templates
  • Lead training sessions and inspire products team to develop innovative design solutions, from broad concept, information architecture and development through implementation
  • Support for UX/UI of JiBo mobile applications

2012AQM Applications

img7 AQM AQM

AQM website

img6 AQM

ExerciseMicrosoft Bing: Celebrities search experience

In early 2017, Microsoft recruiters contacted me for a UX/UI Designer position at Microsoft Bing. After several rounds of interviews, I made it through the first seed and was selected to participate to an exercise. While later the design team invited me for interviews in Beijing, the recruiters eventually turned me down with a kind but heartfelt email.

I was a bit frustrated of course, but this was a great opportunity to really dig into UX of Search Engines. It was a fascinating experience and since I spent many hours on that project, I decided to publish it on my portfolio after few months.

What you’ll find below is the result of an exercise completed in few days. My process was guided by user research, competitive analysis, Microsoft’s official Design guideline, and my own designer intuition.

img8

People often search for celebrities on mobile when there are trending news associated with them. The exercise was to design a celebrity search experience in Bing on iOS/Android platform.

First, I did some design research during few days, intensively using Bing app, Bing Search in browsers, other search engines, news aggregators… to see how others solve similar problems and try to not reinvent the wheel.

Testing Bing was also useful to have a good understanding of the features already implemented in Bing and make sure to respect the product requirements.

While Bing app delivers an overall good experience, I still felt that there was room for improvement. Despite its modern color palette and elegant interface, the navigation felt unperfect.

I started to sketch and bore everyone around me with my crudely drawn wireframes. Then structured my ideas with Illustrator, and created different pages.

Finally, I integrated those pages in the user flows based on the scenarios I had sketched previously.

Microsoft