Connectr

Redesign of the modules page

Role

Product Designer

Connectr is a an HR software company with two main products CFE (Connectr for Candidates) & CFC (Connectr for employees) both of them desktop apps. They are specialising in helping businesses build a sense of belonging with all their people, from candidates to employees, and create a culture where everyone is included. Part of the apps is the training that companies provide through modules and tasks to their employees or potential candidates. I was asked to redesign the modules page and make it more human centric.

Goal

Redesign of the modules page

Timeline

2 weeks

Deliverables

• 3 screens (1920px, 1024px, 384px)

• Different states of the page, maximum number of module cards, empty state with no cards on the page
  

Overview

The PM, gave me this task based on the product insights it was discovered that many users drop out in this page and never complete their training. Our clients express that they wanted to make the training section more approachable, easy to digest to make the users keen on accomplishing their training.

Understanding the page

 I started the process by seeing what is not working on the page and where the problem really sits.

• Too much green

• No visual hierarchy

• Because there is no hierarchy the users do not know what to prioritise, what is the actions we are asking them to do, this possibly makes them frustrated and drop out

Solutions

• Make the page as simple as possible, easy for the users to digest

• Provide hierarchy this way the user will know what to prioritise on the page and what are the actions they need to.

• Follow the design system and patterns of the current product to be consistent with the rest of the pages

Design process

• The first thing I wanted to fix was the amount of green on the page, the amount of CTAs and the information architecture the details that the users see and will trigger them to complete the training. When asking from the user to accomplish a difficult ask the UX principle to follow is to have white background so it is easier for the eyes and the brain to follow.

• To declutter the amount of CTA, I tried to understand what is their action and what we really want to achieve from each one and which ones can be removed as they are not absolutely necessary. For this reason I decided to only keep one CTA per card, it will be the primary CTA od our design system and the only green on the page. I introduced the tags, which is something I took from my e-commerce background the product tiles, with the tags on the top left corner the user will know which one of the modules are in progress, have not started and completed. As our focus here is to prompt the users to continue the training the tag for “In progress” will be the most visible with our primary colour, the “Not started” will be the grey hex code we currently use for our disable buttons and the “Completed” with our primary brand colour only in the outline.

Information Architecture

After discussing with the design lead and the developers we have agreed that the height of each card will be defined by the longest card on the page, this way all the cards will have the same height and will match the consistency with the cards on the rest of the product. The reason that I kept the top module showcased is because it was a request from our clients, they wanted to have one big module that will be heavily focused but the rest will have no numerical hierarchy. I suggested that the top module will be the one that the users interacted and never finished, hence when they come back they will know where to pick up from.

Difficulties & reflection

During this project, I worked closely with the product development team. An obstacle I had to overpass was my way of presenting my ideas and supporting them in front of a big team with high level professionals. Having prepared a few different designs, considering the business values of the page and what is the true reason why we need to improve this page, to improve the training of the employees, I had a to please and convince a wide product team of developers, product managers and designers which one is my favourite ideas and why. I am proud I grew through that project and I successfully accomplished this challenging task.

Outcome

• Users clearly now understand what they need to do, from the user testing we have done

• Insights showed that they spend more time on training and accomplishing more tasks now

• None of the users were confused on where a CTA will take them