Project:
Experience Manager (SHL Standard Template)

My role:  
Project Owner | UI/UX designer

Duration:
3 Months (from the ground up to complete)

Project status:
Shipped in June, 2020.

Overview

SHL is a global psychometric test publisher, talent measurement consultancy, and occupational psychology specialist. Helping their clients ( other companies ) get first pick of the top tier of talents and lighten the load on the HR team. Helping HR process more applications with the same number of staff. The project goal was a platform where to aggregate psychometric online tests, and at the same time providing the final client with a bespoke UI and content, in line with each company brand guideline.

Solution

• SHL standard template.*
• Create a customizable website in Webflow.
• The customizable website enables our clients to add their company information and to change to their brand/ color palette.*
• Create a professional and easy to use website.
• All SHL team members can use it and customize the website by filling out a request form.
• Provide them a guide on how to change the website brand.

Design fileDemo video

Working process

Brainstrom

We began with the brainstorming phase and tried to collect all the information we have based on the JIRA ticket and PPT. And wrote out the concerns/ questions/directions and plans for the launch.

• We did some research about design and code tools, and think that Webflow is the best tool for us. Because Webflow is designed for designers and also has a short learning curve. Most of all, you can make the website customizable.

• During the brainstorm, I noticed that the JIRA ticket has asked me to create a lock on each of the assessments and to make sure users can go step by step. ( We think creating a lock icon is not a user-friendly experience, and need to confirm with PM )

• Confirmed with product managers to make sure to have all the customizable areas available before we created.

Competitive analysis

We then created a competitive analysis. Understanding our competitor's websites can help us improve our website. We compared assessment test categories, customizable website, and how easy to use their website. And here are our findings.

• SHL has more than 1000+ assessment tests. Too many things on one website and looks a bit confused and overwhelmed. The user flow and interface design need to be fixed.

• Most of them have available specific requirements. But, none of the companies have a customizable website for the clients.

‍• . SHL is one of the largest assessment test companies. It has over 3000+ employees and still increasing. While most of the assessment testing companies are less than 500 employees.

Meeting notes / main decisions

After several meetings with the product managers and my teams. They all like what I showed them. And here are the main decisions.

1) Since SHL has more than 1000+ assessments on the website. Adding this new project to the website would be very challenging for our users. We want to keep it clean as possible. So, we decided to create a new website for this project.

2)  Compare to other assessment companies. 3 out of 4 have offered a customizable assessment package. But, we noticed that none of the companies have this customizable branding features project. We are very confident about this customizable branding idea and think can be one of the biggest selling points on the market. *

3) Lock feature is one of my main concerns in this project before the meetings. As a UI/UX designer, I feel the lock feature on each assessment and make the users go through each assessment is not a user-friendly experience. (Notes from the product managers: Our assessments have different skill levels. Ex: The junior design must go through the entry-level assessment before going to the advanced level assessment. And the coding is already coded. ) Sometimes, things can't be perfect. It would be time-consuming if we ask developers to change the already existing code. I understand that and will try my best to do anything under my control.

User flow / Functionality map

Digital sketches

After a few meetings, we then move on to the sketches. We started with digital sketches instead of hand drawing sketches because we think digital sketches are more effective and clear to show in the zoom meeting. Moving forward, we picked some sketches we think worked the best.

Grid system / Low-fi wireframe

Webflow template customizable areas

Final design

Design components

Final design created in Webflow

Screenshots of webflow template

I am very proud of this because the company SHL took the team design as one of the main design templates. Here are some screenshots of the company SHL's Webflow dashboard. Everything in this template is customizable, users can change the brand color, content, hide the unused tiles.

Our clients

Since we finished this template, we have been using it for more than 300 different companies. Here are some of our companies.

Reflection

What I learned
I am so grateful to have to opportunity to lead the design team in this project. I learned amazing leadership experiences, such as add all of the ideas together and make a quick decision, learning a new tool (Webflow), doing research with a UX researcher and strategist, working with different people and etc. I also learned how to deal with people from different backgrounds or perspectives. Leading a team is not easy, I truly appreciated all my awesome team members they are all very supportive and easy to work with. Moreover, the SHL company was really satisfied with the result we show them and pick our template as one of the main templates.

What to improve in the future
Due to the limited time, we didn't have much time for user testing and digest in more detail. Even we tried many rounds of internal testing, but we have never got the chance to do a formal usability test and go deeper with the user's feedback. If we have more time on that, I would like to do a formal usability test in this project because usability testing is such a big role in the UX process, and that could aid us in some unexpected areas that we didn't notice.