top of page

Thomson Reuters

B2B Website Design 

Left faced Silver Macbook.png
Gold iPhone XS Plus left faced.png

Overview:

Thomson Reuters is a leading provider of business information services for intelligence, technology and human expertise. The products include highly specialized information-enabled softwares and tools for professionals across different industries, including Legal, Tax and Accounting, and News & Media.

Team & Role

I provided UX and UI support to Customer Success Platform team, mainly in charge of designing and developing customer account section, including billing and payment, account user access, and so on. My responsibility was to create design system, built design flows and documented key guidelines to fill in the gaps for brand consistency and product vision. I worked closely with content designers, accessibility professionals, and developers to optimize the features on the site we are rebuilding for.
 

Duration:

2021- 2022

Tools:

Figma, Sketch, Jira Confluence 

Problem

Before the development of a unified B2B Customer Success Platform at Thomson Reuters, the organization grappled with the challenges posed by multiple legacy systems. These systems not only presented significant privacy concerns but also resulted in a fragmented digital landscape, characterized by diminished customer productivity and satisfaction, particularly in the customer account section. Despite Thomson Reuters offering a suite of high-quality products tailored for legal and professional companies, there was a noticeable increase in call center inquiries from users.

The primary goal was to design and implement clear, cohesive, and functional digital platforms. This initiative aimed to deliver an impactful and user-centric design experience, thereby enhancing overall user engagement and satisfaction.
 

Standarding Design Files

Upon joining the company, I encountered a transitional phase where the design team was shifting its collaboration tools from Sketch to Figma. I assumed a leadership role in this project, facilitating the migration of UX and UI design files. My initial focus was on converting the design files from Sketch to Figma, a process that I streamlined to enable a smooth transition for team members. In addition, I played a pivotal role in developing comprehensive guidelines and training materials for various teams within the Digital Product division. This effort was aimed at ensuring efficient and cohesive use of Figma, allowing team members to easily access, browse, and iterate on design files. My contribution significantly enhanced team collaboration and design workflow efficiency.

1_edited.jpg
2_edited_edited.jpg
3_edited.jpg

Building Design System

Together with a colleague specializing in UI design, we enhanced and expanded the design system, enabling other team members to access a shared library of UI components across our range of products. This initiative significantly reduced the reliance on multiple design tools and licensing costs, thereby optimizing the budget. Moreover, it laid the foundation for a unified design system.

The creation of this design system began with the establishment of core principles, dictating the aesthetics and functionality of every product component. This encompassed the design of fundamental elements such as buttons and fields, as well as icons and illustrations, ensuring uniformity in appearance and behavior across various applications. We compiled these elements into a comprehensive, user-friendly guide. This guide served as a vital resource for designers and developers, aiding them in maintaining consistency while developing or updating product features. Analogous to a recipe book for the product's design, it provided detailed instructions on the utilization of each 'ingredient'. As the product evolved, we regularly updated this 'recipe book', ensuring that despite the changes, the product remained intuitively familiar to users and aligned with its original design ethos.

Usage.jpg
Components.jpg
Sizing and Guidelines.jpg
spot illustrations.jpg

Design Process

In my daily role, I concentrated on crafting user interfaces, incorporating new features subsequent to the transition of UX wireframes from the UX design team, which were made accessible through Jira. During this process, I engaged in collaborative problem-solving with UX designers to preemptively address any issues via Slack and Figma prior to advancing with the UI design. Concurrently, I partnered with a content designer and accessibility professional to ensure that the textual content within my UI flows was accurate, and that any new UI patterns with associated text I developed adhered to the appropriate linguistic standards.

We instituted a routine of weekly meetings with stakeholders, including product managers, to review our progress and deliberate on issues from a business strategy standpoint. Bi-weekly design sessions were also scheduled, during which we presented our high-fidelity designs, solicited feedback from team members and the lead designer, and iterated accordingly. Once the design was refined and updated in Jira, developers commenced their work, often consulting with me for any clarifications. This process left room for further design iterations as needed, ensuring a dynamic and responsive design development cycle.

Banner.jpg
1.0 - User profile page.jpg
3.1 - User profile error #2.jpg

Accessibility Test

As a UI designer, teaming up with an accessibility expert involves a blend of learning, collaboration, and iterative design. Starting early in the design phase, it was crucial to integrate their insights to preempt accessibility barriers as they are a source of specialized knowledge. We reviewed the work by complying WCAG AA, such as ensuring adequate color contrast and navigability for assistive technologies.

Together, I would refine designs through feedback loops, incorporating user testing with diverse audiences to validate and enhance the user experience. Documenting these accessibility practices became part of my design specs, serving as a reference that upheld inclusive design principles. By staying educated on accessibility trends and actively advocating for inclusive design within my team, I contributed to a culture that prioritizes accessibility as a core aspect of the design process.

 

Accessiblity Notation_1.jpg
Screen Shot 2023-11-08 at 4.13.18 PM.png

UI Design 

Designing wireframes and UI flows for auto-pay features and user account access on an e-commerce platform required a thoughtful balance between functionality and ease of use. Initially tasked with UI responsibilities, I occasionally delved into UX creation. The process started with drafting rudimentary wireframes that mapped out the user's journey through the setup and management of auto-pay, detailing essential steps such as selecting payment methods, scheduling, and receiving clear confirmations. For the user account access, the wireframes were designed to facilitate easy navigation to personal and account details, as well as product information.

My role evolved to include the development of high-fidelity UI designs from the foundational UX layouts, incorporating the platform's visual language with a keen eye on typography, color schemes, and imagery to maintain consistency and reinforce the brand. At this stage, the focus was on crafting a user experience that made managing auto-pay and account settings an intuitive and straightforward process.

Screen Shot 2023-11-09 at 12.02.58 AM.png
Screen Shot 2023-11-09 at 12.04.31 AM.png

Results

Successfully designed and executed a unified Customer Success Platform, which migrated 100K+ customers in the first year off of multiple legacy systems. The new experience increased customer productivity and call center containment:

94%  self-service containment rates

56%  auto-pay adoption

$94M  in online invoice payments

40% 
call center reduction

Prototyping and Iteration

In our design team, creating prototypes is not a requirement, yet I believe that prototyping is essential for converting abstract concepts into concrete experiences, making it easier for stakeholders, including team members and clients, to grasp the design proposals beyond static images or descriptions. With this in mind, I took the initiative to develop a prototype for the Autopay Setup for Multiple Products to facilitate a more comprehensive understanding of the design. Here is the link for details: https://shorturl.at/aceI8.

Regarding user account access, I recognize potential enhancements. Implementing a dashboard for users would be beneficial, providing them with the ability to monitor, measure, and analyze crucial data in key areas, while offering a consolidated overview of high-level information. Furthermore, I have refined the UI design to foster a more modern and user-friendly interface. To demonstrate the improvements, I have prepared a design for the Autopay Setup flow that showcases these updates. Here is the link for details: https://shorturl.at/iovB5

A Short Video of Prototyping Will be Added Here Soon. 

Key Takeaways 

Explore More on Micro-interactions Design

Nowadays, users are putting more attention on functional interaction design. The interaction can be very small, such as adding a progressive bar, dragging elements on the pages, or siding different images. However, small but meaningful micro-interaction design can let users have a sense of engagement and satisfaction. Therefore, I spent time searching a variety of inspirations and exploring smart tools to make useful micro-interactions.    

Create the Opportunity for Myself

It is important to build connections with UX designers in the company, not only it will help foster great working environment, but also it will give me opportunities to learn from others and grow quickly as a UX/UI designer. I always enjoyed hearing good advices from other experienced designers on how to become a successful designer. Meanwhile, I also enjoyed sharing my journey on how I transitioned from fashion design into UX/UI design. In addition, I attended different training sessions and workshops to keep developing myself, as I believe the nature of a designer job is not only about being a worker, but also about being a thinker. 

bottom of page