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
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.
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
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
I made this prototype interactive and created an animation of the whole flow to ease the communications with PM and devs.
Following the same method for the web version:
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.
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.
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.
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.
We divided the Design System in 5 sections: Principles, Basics, Components, Templates Applications
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 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 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.
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.
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.
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.
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
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.
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.
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.
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.
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.
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.
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.
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.
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.
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…
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.
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.
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.
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.
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.