professional social network and Employee Career Growth

This client provides IT support services in 34+ countries with 1400+ employees to companies such as Google. Employee retention and engagement is critical to their business model, and therefore employees having a sense of community, growth and satisfaction are at the core of their business.

The client had commissioned an outsourced firm to do the development and designs for their custom built and designed HR application but had been quite disappointed as the designs did not capture the business goals or user needs. As a result, I was brought in to lead all Product Design and UX aspects, and to act as the bridge between design and development.

This case study will only highlight the core feature of the HR application that I designed from scratch: Career Growth. The goal of the project was to design the Career Growth feature end to end, with the grand vision laid out in medium to high fidelity. The following goals were to “reel it back” to the MVP, considering technical limitations, existing content and content creation limitations, and finally an analytics tracking plan. This case study will focus on the first goal.

Other features and goals of the HR SaaS tool (highlighted here) that I designed included:

• a focus on decreasing employee outreach to HR support by delivering relevant HR content to employees in a timely manner

• providing a “Club” feature allowing employees to unite and organize into Slack channels based on common interests and locations

• allowing managers to publicly recognize and praise employees

• allowing employees to track and submit their timecards

• a comprehensive “Help Centre” to further decrease HR support costs

• building a sense of community and culture by welcoming new hires, birthdays, promotions, and work anniversaries, and allowing employees to connect with their managers and peers — essentially a corporate social network with a twist

Design Process

Defining the Problems, Core Users

I kicked off the project by conducting User Discovery sessions with 

• anyone within the company who has frequent interactions with the end users 

• anyone within the company who influences the way the product is designed or what features are prioritized

• stakeholders who have been involved with defining the product

• various executives, decision makers and domain experts

Quickly it became clear that the head of HR was a wealth of knowledge, as she was an expert on the end users and problems they face since every employee outreach was brought to her attention. She had also led a thorough company wide survey to discover employee problems, which was an artifact that I familiarized myself with. As a result, I had several ongoing sessions with her, and was pointed to specific individuals and resources within the company to deepen my understanding of the business problems at hand. As with any User Discovery interview, the subject matter experts couldn’t articulate the pain points themselves, so part of the process was excavating through all the conversations and survey data, and other artifacts to find the core problems faced by employees.

Core user: 21-25 year old digital natives in their first professional role, earning $20-$30/hour, with no prior work experience, trying to start a career in IT

Problem statement: Employees are getting stuck in their role and don’t know how to advance in their career within or outside of the company

Vision: “We will drive our employees to their next interview if it means they moved up in their career”

use cases and goals

Based on the conversations I had, the existing artifacts and designs, and by understanding the vision of the executives and leaders, I defined the following as the use cases:

• An employee should be able to see which other positions they can work towards, and how they can get there, all based on their current role and how long they’ve been there

• An employee should be given a timeline on how fast they can advance to the next position, and the resources to do so

• An employee should be able to have a 30,000 ft view of where the next position will lead them to in their career as well

• An employee should be able to advance out of their current career path and into another one, and be shown how to get there

Design Iterations and Feedback Process

Everything was designed mobile-first, as the client was using React Native and planning on launching on mobile native, as well as desktop web. I made a point to use existing UI elements to cut down on development time, as React reuses components. I created new UI components only when it was necessary, and made them in-line with was already in use both visually and functionality wise to keep everything as consistent as possible.

I followed a quick, iterative process, presenting a first draft within the first week of joining the project, to key stakeholders and decision makers. The first draft was mobile-only, and had key open questions about ideas that I came up with that would solve the problems defined earlier. 

With every iteration and feedback session, I would present the designs to the group which consisted of the lead development manager, the CEO and product sponsor, the project manager, and on more refined iterations we would include the head of HR. The goal was to capture feedback quickly, so that I could iterate and in the following iterations present both an enhanced mobile experience and a desktop web experience that incorporated the feedback received from the previous presentation.

With each follow on iteration I would modify and tweak the previous iteration’s designs, as well as continue building on the feature by having completely new screens and flows, as well as screens for desktop web.

During each presentation I would call out changes made, and mention the type of feedback I was seeking (such as: user flow, user interaction, UI placement, visual).

New ideas during iterations

In some iterations I would present new ideas and alternatives. In this example I came up with an indicator for each role that would signify to the user if the role is up-and-coming or on the decline. The idea was that it would be based on data that the company already has, such as current number of job openings, and future number of job openings. It is indicated by a simple UI element, “Growth Role” in this example, with others being a “Steady Role” or “Declining Role”.

Integrating it Within the Existing Product

A big part of this feature was figuring out how it would play with the other features of the application (listed above). So one other idea that I threw out was a “Whose done it” and “Whose doing it” feature, to show social support, or peer pressure, of other employees who have committed to moving up to a higher position. This would have the benefit of raising awareness of the new feature within the social network aspect, as well as push for engagement of the feature.

The way to capture this was to allow the user to publicly commit to it, leading to a publish post within the portal, as well as capturing this data on the back end to display it for those who are considering taking this career path.

Going from Mobile to Desktop Web

After several iterations we had reached a very comfortable place with the mobile designs, as they had captured all of the use cases and solved all of the problems which were discovered earlier in the design process. The key stakeholders no longer had any feedback for tweaks on mobile, which was the time that I jumped over to converting the designs to Desktop Web. This was not a very long process, since converting mobile designs to desktop isn’t tricky especially if the desktop web already has some structure in place.

I followed the same iteration process as I did for mobile, however since I was just converting mobile to desktop, this process was much quicker and required much less iterations.

Handoff of designs

The finalized designs capturing the end to end flows on both native mobile, as well as desktop web were handed off to HR to empower them to create the content for the launch, which would be the prerequisite for development hand-off and presentation to their investors and board. As for the rest of the product, all features were launched in a private beta with pilot groups. I supported that launch with Mixpanel event tracking plan capturing all useful insights that would then guide further iterations.