UI & UX Design

Tencent 💠

SCOPE OF PROJECT
UI & UX Design

Timeline: June 2022 - September 2022 (Extended by an additional month)

What I did: Web design, wireframes, service blueprint, UX research, design system, iconographs

Team: Sarah Jade Yao, Elizabeth Wu (Co-Intern)

Tools: Figma

VIEW FIGMA FILE / Live Website

Tencent 💠

I built an internal onboarding process that was so successful that it ended up scaling into OEC, the Overseas Employee Center, a self-serivce platform for all Overseas employees (around 30% of total 112,000 employees). This product for internal systems was critical, as it allows for an intuitive self-help approach by streamlining all articles into one database and website without needing to consult a real person.

Ideal MockUp

The first half of my internship consisted of Part 1: Pre-Website Building: An internal auditing of existing components.

The second half of my internship consisted of Part 2: Iterations based on User Feedback.

This project outline will be going through the process of what I did, to get to the final ideal UI mockup above.

OEC Website (by internship end)

1️⃣ Part 1: Audit of Internal Systems

😖 Unearthing Personal Pain Points

The first step that I took was recounting the pain points (questions, people I wanted to reach/search up) that I experienced during my intern onboarding process to understand how I could best address these issues through the website. A noticeable trend that stood out to me was the discrepancy between the online onboarding information sessions as compared to the skills and information (who to contact, different softwares, ordering food to the office) that I needed to work in-office.

Updating Internal Systems

Updating the Placement of the Search Bar

One of our main pain points from our user's side was that a Tencent employee would NOT know what they're searching for. As a team, we proposed multiple ways that we could do so, including a live chat bot, AI, a differently featured Nav bar etc. However, we eventually decided that the best way to make the site prompt users was to make the site "search-centric". This meant structuring the home page of the site to emphasize a search bar as its main feature.

We then brainstormed the ways that we could prompt users to use the search bar. I made two Gifs to explore animation on the site.

However, we eventually decided that this would be too busy - thus, eliminating the animations altogether.

Banners (Placement and Updates)

One of the big changes that we made to the Beta website was the arrangement of the banner. We realized that in the Beta version, the banner was taking up a lot of real estate on the page, but offered little information other than Overseas Tencent announcements. The posters were also inappropriately formatted by size and font. Thus, we created multiple, appropriate banners to fit the website.

We also implemented the idea that the banners, which were mainly geared for new Tencent hires, would disappear after 90 days.

Creating a New Logo

I also. drafted up various versions of the OEC website logo. We ended up deciding on the last logo because it ticked off all our requirements. It emphasized the OEC brand, was simple and easy to read, and was distinct from all other Tencent platforms.

Updating Iconography

I also helped update the iconography of the site. I kept the design style consistent to the Tencent theme and logos on other internal sites. We needed to update the line art of the logos- we wanted something solid instead.

Internal Audit Summary

2️⃣ Part 2: Iterations Based on User Feedback

💡 The Opportunity: Create a global navigation bar 3 levels deep using a repository of 400+ articles. 💡

Strategy: Bottom-Up

I used a bottom-up strategy to build the level 1 to level 3 categories. I started with getting hands-on by taking post-its and grouping the articles into subcategories that I thought were fitting. This initial categorization was based on tentative groupings on the team's Excel sheet. Understanding the structure of the articles better informed our ability to create a frictionless user-flow during our build of the website's nav bar.

Final Taxonomy

We decided on the 4 below categories to serve as our final taxonomy.

Initial (Yellow) to Final (Green) Taxonomy

⚒️ Site Architecture

Information Architecture

To dig deeper into the User's Experience as a fundamental part of our website, my co-intern and I worked on creating a user flow using the categories that we determined from above. After making the IA, we realized we wanted to make structural changes for pages to reduce redundancy, emphasize more important sections, and make additional UI changes.

Service Blueprint

Part of understanding what our users, Tencent employees, needed, was laying out the services and resources that were possible from OEC. Thus, part of my task was to make a comprehensive Service Blueprint laying out all the interactions between the front-end and back-end (emphasized in red) as well as any services that were offered by OEC. We primarily focused on putting outselves in the shoes of those that would use the search bar vs. navigation bar.

⚒️ User Testing

In the final phase of my internship, we began interviewing OEC users to get feedback.

We used both qualitative (task completion success, issue resolved, valid search result, points of confusion) and quantitative (# of clicks, time to complete task, # searches completed, search bar vs. navigation bar usage) and user feedback (rating ease of navigation, quality of content, and open ended questions). 

Our three scenarios targeted different areas of the website we wanted to improve upon. Here’s a condensed version of our discoveries from our user testability with over 30 participants. These participants included senior dev ops., system engineer, and system admin.

Our first step was to address moving the “Open a New Case” (purple) button. After feedback, we realized that the “Open a New Case” button would be best suited for the right side (both after using the Search Bar and Navigation Bar to search). We knew that this worked because we reduced "new cases" from 14 from the first week of launch to 3.

Submitting a Help Ticket Email

We also created a new email template to complement the movement of the "Open a New Case" feature.

📊 Results

In a month after we launched my first version of the onboarding process, the total amount of new users increased to 201, and our page went through 747 sessions. There were 3,184 page views, 1,001 total article views, and 263 total searches

🪞Reflection

✍️ Reflecting on the Design Process

This was my first internship under an established technology company. It was great going in-person and learning from both my manager and my co-intern. I loved learning about the structure of building a website, and all the thought that has to go into planning the best user's experience. I'm glad that I got to build a project from scratch and contributing my research to the fundamental structure of OEC.

🔥 Aspects I Can Improve Next Time

If I had more time to work on Tencent OEC, I would focus on improving these aspects:

  • Create a more coherent visual language / visual system
  • Conduct more user research with a larger pool of participants and with those outside of Service Now
  • Reconsider how we could fit in the Tweets/Stocks
  • Establish the Requests and Active Items (not touched upon in this portfolio description) to sync with Asana and Slack