The Professional
Women's Sportswear
The Professional
Women's Sportswear
Thomson Reuters
B2B Website Design
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.
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.
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.
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.
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.
