OVERVIEW

– Sponsored by ExtraHop Networks (University of Washington Information School Capstone Project)

– Research = company wide survey + 5 interviews + focus group + 3 products analysis

– Design = 2 iterations of user flows, mockups, and prototypes on 2 platforms

– Deliverable = Chrome extension + dashboard (web application)

– Jan 2017 to June 2017

TEAM

– Xuan Liu (UX/UI & Front-end dev)

– Yijie Yang (Project Manager)

– Zhizhen Lin (Back-end developer)

– Shuyi Xiong (Front-end developer)

– Bingjie Chen (Data analyst)

CONTRIBUTION

– Research: Led research planning, requirements gathering, and analyzing

– Design: Individually contributed all UX and UI design using Sketch

– Development: Individually coded the dashboard web application (front-end) using React.js, HTML, and CSS


CHALLENGE

What causes the problem of low productivity and a high turnover rate that many organizations face? It’s said that a lack of recognition could be a significant factor. Our client, ExtraHop Networks, wanted to avoid such a problem by creating an employee recognition system to encourage appreciation at the workplace and keep track of the good work, positive behavior and attitude that can help the company innovate and grow. The existing employee system at ExtraHop cannot meet those new requirements. Hence, ExtraHop reached out to us to build another complementary employee system which will facilitate communication and recognition across the company.

“How to encourage and lever appreciations at the workplace to improve morale?”

Vision of the Hoppy project

APPROACH OVERVIEW

The ExtraHop’s product team provided initial requirements and constraints. But before jumping into implementation, I planned to conduct user research to understand if there is any gap between the product owner and the end users. What would help shape the new product are users’ pain points in the current employee ystem, previous experience with similar products, and expectation for our new system. Thus, it is necessary to conduct user research to complete and validate the product requirements. Besides, I planned to analyze the existing employee appreciation softwares at the market to summarize the best practice. What’s more, based on our research findings, we discussed about which platforms are the most efficient and feasible ones, what metrics are effective to report and evaluate appreciation data, and what features will make the product more engaging and intuitive.

When requirements are finalized, we moved to the phase of design and development. First, I translated concepts into user flows and created detailed interaction and user interface for all platforms. Meanwhile, my teammates worked on database and server to build the foundation of the technical architecture. After design and architecture were reviewed by ExtraHop, we started to develop and test the product. Our final deliverables are a Chrome extension with an interactive HR dashboard (web application).


RESEARCH

research methods

Methods

First of all, how to encourage appreciation among employees? Appreciation is the core input that drives the new system. To find the answer, I started with a company wide online survey that asks about employees’ behavior patterns, attitudes, and goals about making appreciation at the workplace. The survey collected 37 valid responses out of 60 target participants, and four respondents manifested interests in participating one-on-one interviews to tell their story of using with similar products in the past and expectations as well as concerns for this new appreciation system.

Once staff is ready to make appreciations, how can we use the data of appreciation to facilitate the performance review? After the survey and employee interviews, I conducted a focus group with 4 HR people to understand the requirements from the HR side. For example, I asked about the current appreciation dynamics and performance review mechanism at ExtraHop, the data points that should be collected and visualized to help decision making with regard to employee’s promotion and rewards, and the concerns and expectations for the potential social impacts of this new system.

Findings, design implications, and rationales

1. Adoption: How would employees make appreciation? In what way? With what concerns, expectations and motivations? How can my product better meet their goals?

First, I aimed to understand the current culture of making appreciation at ExtraHop, such as the frequency, motivation, and medium of expressing appreciation. This information would help me identify the existing patterns, issues, and opportunities, and therefore I’d be able to design the new system according to the users’ preferences and expectations. At the beginning, I tried to get demographic information about the employees via survey. I thought this data could be helpful because previous research shows that people from different cultural backgrounds would interact with others differently. For example, people from the west usually communicate with low-contextual messages that are more explicit, while people from the east prefer high-contextual interaction that is more intuitive and relationship-based. ExtraHop has more than 200 employees with different origins, so the demographic data could help shape the interaction and style of the new system. However, my request was rejected by the company’s HR manager as the demographic information could cause privacy issues.

How did I make a compromise to find out the answer? Rather than collecting the demographic data, I modified my research questions and explicitly asked about the behavior patterns of the end users. For example, my questions were like: How do you recognize your coworkers? Would you prefer to speak out loud your gratitude when you meet them, send messages or emails, bring them gifts, or tell their managers how great they are? As 97.3% respondents would like to verbally recognize their colleagues when they see each other, I got to know that the majority at ExtraHop prefer an explicit way to express appreciation. Accordingly, the interaction and feeling of our new system could be explicit.

Besides, many users manifest the interest in advocating for the behind-scene-roles. 43.2% respondents mention that they would like to tell their colleague’s manager or HR how awesome their colleague is. Accordingly, it indicates that some users want to make feedback more visible to their coworker’s managers, so that the person who contributes good work can eventually get a chance to enjoy compensation and promotions. Thus, the motivation is more than showing appreciation between peers but building a channel that can translate the appreciation from peers into recognition from managers.

What’s more, 27 out of 37 respondents in the survey believe that it is important to know who and what is appreciated at the workplace. However, from interviews and focus group we found that some users prefer anonymous recognition, and some might be uncomfortable with public appreciation. Thus, the “who” part should be more sensitive but the “what” part could be public to show the dynamics at the workplace.

When it comes to platforms, the top system integration of choice is email, followed by chat client and intranet. This result indicates that it would be easy to adapt if we build the system as a web browser extension or a chat client plug-in within ExtraHop’s intranet.

2. Appreciation: What would drive users to appreciate? What values does the company want to advocate? Is there any gap between them?

I researched the values that employees would like to appreciate. My goal was to understand the focus of appreciation: Would users focus more on professional values or human-centric values? If our sponsor prefers professional values while the end users prefer the other, I should design a solution to bridge the gaps and meet goals from both sides. If focuses vary across different departments, my team and I have to figure out how to design area specific metrics for better evaluation. Also, if the majority of users would like to focus on a same group of values, the product could include those values tags as short-cuts to add comments. From the survey, we found that the top 3 reasons people would like to recognize have no significant correlation with respondents’ roles or years have been at ExtraHop. It is widely accepted that the top 3 values to appreciate are: 1. Teamwork/Collaboration 2. Innovation 3. Commitment.

One respondent shared his experience of using a similar system: one colleague won the top amount of recognition only because that person helped fixed a ping-pong table in the break room, which was disappointing to that respondent as it did nothing to the company’s business goals. Thus, it reinforces the indication that employees would like to appreciate professional values over human centric ones at the workplace. According to this kind of concern, the new system should carefully differentiate the evaluation metrics for the human centric values and professional ones to make sure that the system meets the business goal (e.g. improve productivity and advocate company values).

How to do that? After discussion with the sponsor, we initiated a solution: once the sender sent out an appreciation record, the manager of the recipient will get notified to review this record. By reviewing the record, the manager can know who did a good job in his/her team can filter out those records that are far from serious or don’t agree with the company values.

3. Evaluation: How to reward those who get tons of appreciation records? How to engage the end users in interacting with the system? How can HR people make use of the data?

The research result shows employees’ desires for both tangible and intangible rewards. On the one hand, respondents expect to redeem the points for ExtraHop recognition for tangible rewards and compensation. On the other hand, the social need of being valued and supported is repeatedly mentioned as a key to improve morale and achieve self-fulfillment. However, our sponsor stated that the specific reward and evaluation metrics was out of the current scope due to time and resource constraints. Although it takes a time to finalize the reward mechanisms, we can still let the system do the data work, and let human figure out the evaluation metrics then. Thus, the system could focus on collecting data rather than evaluation and rewarding.

From the focus group session with HR people, I found that the system should focus on soliciting qualitative feedbacks rather and quantitative ones. It’s hard to quantify one’s contribution to a company wide criteria as priority and goals vary in different areas, the evaluation criteria applying to department A may not work on department B. However, it would make more sense to focus on the trend of individual(employee, department, etc.) over time. It’s hard to compare the number of records across teams and departments as the nature of work differs. For example, the helpdesk team might get 10 records per day but others might only accumulate 10 points per week. Also, the number of points one gets is dependent on his/her current work’s workload, stage, confidentiality, etc. Thus, it would be more helpful to compare one’s current status with the historical records to identify progress.


DESIGN

User flows

Based on user research and sponsor’s requirements, the core flow seems super simple: users can make appreciation with a Chrome browser extension, where the sender expresses appreciation, the recipient gets the appreciation, and finally, the data will be tracked and populated in the admin reporting dashboard. It works well at the first glance, but cannot fully fulfill the users’ needs and avoid stakeholders’ concerns. From interviews and focus group, we knew that some appreciation might have nothing to do with advocating the professional values, so that kind of records should be filtered out. Also, the user research shows that employees want the recipient’s managers to know how great their staff is so that the recipient’s hard work will pay off. What’s more, the sponsor initially imagined that the system can quantify the appreciation: suppose one appreciation record equals to some points, and those points could be accumulated to redeem rewards. But from research, we found that it might not be effective to give awards based on the number of records across teams and departments as the nature of work differs. How did I address those concerns?

After discussion with stakeholders, I created the following user flows:

user flow of hoppy
User flows based on research findings

The difference I made to the initial flow is that I put the recipient’s manager as a “filter” for the appreciation message. When the sender gives out an appreciation, the message will go to the recipient’s manager first. The rationale is that the manager could timely know who contributed great work at his/her team, and the manager could also review the content to identify whether the appreciation is closely related to work. Also, interviewees told me that managers are the key decision makers when it comes to promotion or rewarding, so it would be helpful to let the recipient’s manager know the recipient’s good work. Thus, in this new flow, the manager will be notified to review and give approval to appreciation records. Once a record is approved, it will go to the dashboard and the recipient.

As some users might be uncomfortable with public appreciation, the message could be confidential and only visible to the sender, related managers, recipient and admin/HR. According to HR’s requirements, if the real-time data is available, the HR department can better track the popular values, good work, and engagement at the company. What’s more, the data can help HR people to identify issues in the workplace. For example, for those who work on confidential projects, their managers play vital roles in recognizing their hard work. If HR people find teams that are super “quiet”, HR can get chances to inquiry the progress at those teams or prompt those managers who rarely appreciate team members.

Another big change to the initial plan is that we removed the assumption of “one appreciation = X point(s)”. We thought about “points” because many other companies and appreciation software do so. For instance, the staff at Google can send out bonus points to their colleagues to show gratitude. However, during interviews I found that if the feature of assigning points to one appreciation is available, it might cost users extra effort to figure out how to quantify other’s contribution, making the process more complicated. Also, our interviewees and sponsor pointed out that assigning points could cause unexpected social concerns. Suppose the sender assigns 5 points but the recipient expects more, the appreciation process actually makes people feel worse. Besides, it’s hard to quantify one’s contribution to a company wide criteria. As priority and goals vary in different areas, the evaluation criteria applying to department A may not work on department B. Consequently, I made the appreciation focus on soliciting qualitative comments rather than quantitative evaluations. Therefore, the dashboard would focus on visualizing the trend of the company as well as individual employee and department rather than comparison across teams.

Wireframes

Our sponsor initiated the basic wireframes based on the user flows. The left-hand side is the process of making appreciation (express appreciation, receive feedback, and approve records, etc.); the right-hand side is the requirements for HR dashboard (a company wide summary screen with interactive charts and dynamic query screens to search for individuals).

wireframes of hoppy
Wireframes drafted by sponsor

Based on sponsor’s ideation, I created scenario specific wireframes and flows. First, users can be categorized into 3 groups: employee, HR/admin people, and manager. Users with different roles will be provided different initial screen once they sign in. For example, employees will be directed to a form to write an appreciation. For managers, if they have pending appreciation records to approve, they will be directed to the pending list view, and then they can choose one appreciation record to see details and make approval (or rejection). However, if the manager’s pending list is empty, the manager will be directed to the appreciation form as well. Once the user fills out the appreciation form and sends it out, the view will change to a feedback view with the corresponding UI to show progress and confirmation. For HR/admin people, they will be directed to the appreciation form but can also go to the dashboard from the Chrome extension. With customized default views, different user groups can achieve their goals more efficiently.

The flow chart presented below is simplified because I omit some screens, such as the empty state of the pending list for the manager role.

As for platforms, I separated the reporting dashboard from the appreciation extension and make it a web application. The reason is that the appreciation form only needs several fields so it can fit into a concise, pop-up extension view. However, the charts and reports need large a space to show the details and legends, and the interaction, such as hovering over charts to show tooltips, would make the pop-up extension view too complex. Thus, I move the dashboard view to a stand alone web application to fully support its feature and functionality.

user flow and data flow
Flow with basic wireframes
Mockups

Fonts and colors are chosen based on ExtraHop’s branding guidelines. I also followed the visual specs to create all the UI components. Design iterations were conducted based on sponsor’s feedback as well as the technical problems we faced during the implementation phase.

1. Login screen

iteration of login screen

At the beginning, I created an ID field and a password field to log in, but then we found that ExtraHop’s business email is bound with Gmail. Since Google provides sign in and authentication functionality with Auth2, I changed the design to simplify the development process. Also, I illustrated some characters UI to feature the the system is employee-facing.

2. Navigation

navigation

Since the appreciation extension contains multiple views for different scenarios (express appreciation, approve appreciation, and direct to dashboard), it is necessary to build a navigation. At first, I designed a side navigation that includes navigation items, account information, and link to the dashboard. However, when I developed the Chrome extension, I found it’s technically difficult and realize this design. So I moved the navigation to the top of the pop-up extension view, which is technically feasible and easy to refactor the code.

3. Appreciation form (write an appreciation message)

appreciation formThe appreciation form is a core view to collect user inputs. I had summarized the best practices and design patterns of employee appreciation software. Based on the best practice and our user research, I designed the form with 4 parts: “who” field, “why” field, “what” field, and a “send” action button. Those 3 fields together can be informative enough to act as an appreciation message. Suppose a scenario: “Mike appreciates Jimmy because Jimmy helped Mike out on project X and demonstrated values of collaboration and innovation.” Accordingly, “Jimmy” is the “who” to appreciate, Jimmy’s work on project X is the “why” part, and collaboration & innovation is the “what” values to highlight.

I aimed to make it a concise and intuitive form that users can efficiently achieve goals and readily provide the information the product team needs. To realize the simplicity, I used placeholder text as labels to save space while providing detailed instructions about how to fill the form. For example, in the comment field, there is a paragraph placeholder text: “Why do you appreciate? This message will go to recipient’s manager first for notification and approval.” This text not only acts as a label to indicate the field is for a short comment but explicitly tell the user what will happen next. I believe this information will help users set reasonable expectations and avoid confusion. Also, the name field provides the auto-fill feature and reacts to various user input (name and email). Therefore, users can type or search names in an efficient way.

Besides, users can choose from the given value tags to highlight good attitudes demonstrated by the appreciation recipient. Those values are selected based on sponsor’s requirements and sorted by the popularity we found from user research. For example, the target users would appreciate professional values more, so I l positioned the professional ones, such as collaboration and commitment, at a more dominant location.

4. Form interaction

form interaction

I designed multiple interactions for the form to help users stay focused. First, the appreciation comment needs to be concise so we set the word limit as 300. To show the progress timely, I put a real-time word count at the corner of the text field. The word count will react to the user input and pop up an alert if input exceeds the limit. The value tags will turn to green when hovered over or selected. Also, the “send” button will become active when required fields are filled, and will turn to green when hovered over. Once the user sends out the appreciation, a success UI and a paragraph of instruction will show up to provide feedback and set expectation for next step.

5. Pending approvals & notification

pending list

Managers will have the access to “Approval” tab that shows a list of pending appreciations to review. When appreciation records come to the manager, the extension icon at the manager’s side will show a badge with the number of pending records. The badge will be automatically refreshed to display notifications. When the user has no pending record, the default screen will be the appreciation form, and the pending approval page will show an empty state UI as feedback.

6. Approve an appreciation

approval

The process of reviewing an appreciation is designed as a list-detail view. I positioned a chevron UI component to provide affordance, expecting users to notice that they can click on the chevron to expand the detail view. Similarly, the rotated chevron on the detail view indicates the ability to collapse the content. Once the user clicks on the rotated chevron, the view will switch back to the list. What’s more, I created a consistent layout for the view of appreciation detail and that of appreciation form (the right-hand side of the graph). For example, I positioned the same components (recipient, comment, values, and action button) at similar locations, because I thought this relative position would help users to easily recognize the content.

7. Dashboard
Dashboard home shows company wide summary data
Report tab enables users to query individual data

Based on the user research, I designed  the dashboard with the features of visualizing the company wide data and dynamically querying the appreciation data of individual employee and department. According to the current scope and requirements, the dashboard homepage will show the real time statistics such as the frequency  of each value tags and the count of appreciation at each department. To see the details of each individual, users can go to the report page and query the data based on a given time range. I built the front-end of this dashboard with React.js, HTML, and CSS. I request data with API calls and conduct JSON processing, data filtering and grouping with JavaScript on the client side.


SOLUTION

The main idea of our project is to build a Chrome browser extension that allows all employees to show their recognition of each other. Employees at ExtraHop can use this system to find their colleagues and send digital thank you notes. Also, the HR/admin dashboard can populate the real time data visualizations of the company wide appreciation activity data. Also, the dashboard enables users to dynamically query the data of individual employee and department. The dashboard helps admins to monitor appreciation engagement, optimize the workforce, and identify potential issues across the company. Overall, The system would help enhance relationships between employees while helping the HR department and managers to track employee involvement.



More details coming soon…