UI project
Data visualization & Information design
This was a project I worked on during my time as the UI Designer at hya - a small scale start-up developing a web-based ATS and HR platform (SaaS).
For this project I worked closely with the engineering team; James Whyte (Front End Developer) and Nick Procopiou (CTO & Back End Developer), sharing the designs and notes through Figma and notion. The goal was to refresh the original designs from the initial launch of the platform which were created by Bobbi Brant (Product Designer) and Harry Gray (UI Developer). I worked to refine the insights section based on user feedback collected by Bobbi.
hya is an online recruitment software, also known as an 'ATS' (application tracking system).
The platform has been designed to help companies organize and track candidates through their own specific hiring processes. It boasts many unique features, including an interactive kanban board to track candidates, a library of recruitment guides in the 'knowledge hub', and a breakdown of key data in the 'insights' section.
The 'insights' section of the hya platform provides recruiters with visual representations of key data and statistics regarding their recruitment processes.
Being able to quantify and visualize the hiring journey of a role is extremely useful for recruiters; they can identify any points of friction or concern and make adjustments accordingly. This helps keep the overall hiring process running smoothly for not only themselves, but also for the company and candidates too.
Our Product Designer, Bobbi Brant, conducted user testing of the insights section upon its introduction to the platform; it was found that users were having difficulty reading data from the graphs and often struggled to notice the key data highlights. This resulted in users taking unfavourable journeys to complete tasks, meaning that the primary user flow is not obvious and that the visuals are difficult to navigate.
Users need clear and intuitive data visualization to monitor and assess their hiring pipelines.
To refresh the insights section of the platform to provide clear, intuitive and sleek data visuals that users can easily comprehend and navigate.
Users should be able to read off key information effortlessly and be able to navigate the graphs with minimal explanation from us (tooltips). The visuals should also help establish the design system and branding across the platform, bringing more colour to the site.
The insights section of the platform is intended for those who wish to assess the efficiency of a hiring process - hiring managers and superadmins.
It is not guaranteed that the user is familiar with data analysis, therefore, information should be presented in the most simple yet engaging format.
Although candidates will not interact with this section of the platform, it does have a 'domino' effect on the user experience of their hiring journey.
The data analyses presented in the insights have been specifically chosen based on feedback from recruiters and hiring managers; the information helps them to evaluate and adjust their processes to optimize candidate experiences.
The original insights section contained 4 main tabs; pipeline, sources, disqualification, and closed roles. Each contained their own subsets of data analyses and visuals.
Here you can see a screenshot of the original design for the 'pipeline' tab.
Users are shown how many candidates are in each stage across all open roles. The data is displayed in a horizontal bar chart and table.
User testing informed us that the chart was difficult to read which often resulted in users referring to the table to summarise data instead, thus defeating the point of a data visual.
This tab also includes information on 'stuck candidates' which was a highly requested feature as it helps the user identify any candidates that require action.
Here you can see a screenshot of the original design for the 'sources' tab.
Users were shown a breakdown of where their candidates are coming from. Like the previous tab, this data was also displayed in a horizontal bar chart and table.
The categories of data were quite vague and could be broken down more to provide details in terms of sources; users want to see a breakdown of the different sources.
Here you can see a screenshot of the original design for the 'disqualifications' tab.
Users are shown a summary of the reasons behind candidates' disqualification. The data was presented in two different categories; 'at' or 'after' the application stage.
The same issues with the readability of the bar chart applied for this tab.
Here you can see a screenshot of the original design for the 'closed roles' tab.
The data summaries were chosen to help users evaluate the efficiency of their hiring processes.
The 'interview to hire ratio' breakdown (bottom graph in blue) was found to be very confusing for users and thus needs redesigning; both in terms of analysis method, and visual presentation.
As mentioned, the user testing for the insights section was conducted by our Product Manager, Bobbi Brant; the feedback was recorded, analysed and a design criteria was finalised.
My role as UI designer was to...
The data visuals were the main focus on each insight tab; allowing users to gain intel at just a glance. In this redesign project I developed and refined visual templates to present different formats of data analyses.
In the initial designs all data was shown in horizontal bar charts with each data set represented by a different shade and stacking to form one bar. This format is useful for some data sets as it shows a net total and its breakdown, however, in terms of the specific data being shown by hya it was not the optimal display format.
The most efficient and clear way to display most data was in vertical bar charts.
Due to its simplicity, the vertical bar chart presented the data in the most user-friendly way whilst adhering to good data analysis practices. This format is familiar to nearly all users and enables them to quantify and compare variables instantly without having to read values. Vertical bar charts are extremely versatile since multiple data sets can be shown per variable without compromising clarity or space.
After deciding on this style of chart I began to experiment with the aesthetics and display format.
The bars were styled to align with the developing design system; rounded corners and flat blocks of colour. I chose to include visible y-axis guidelines at regular increments since it enables easy reading for users. Another design choice was to ensure that the bars do not touch; the whitespace maximises the visual clarity thus boosting accessibility for users.
To ensure that users can read data with minimal effort, each bar includes a label to display its y-axis value. I played around with the label styling as can be seen in the two options above; design 1 features a bubble-style counter, whereas, design 2 displays a simple text number. Since the goal is to optimise readability and clarity, I decided to opt for the simple styling of design 2.
Sometimes multiple data sets of the same series would be displayed so users can compare and analyse them; I needed to find the most efficient yet intuitive way to present them.
Design 1 shows two data sets plotted on two separate charts; this design pattern would be acceptable if the user had only a few sets of data but we need a more compact format to show multiple data sets.
.png)
Design 2 is the most efficient way to show multiple data sets and enables the user to have control over their experience; I chose to utilise the tick-box component from the design system as it is intuitive and compact.
This chart template would apply to data sets that sit on a common x-axis thus enabling the user to make easy comparisons. Due to the limitation on horizontal space, a maximum of 4 data sets are shown at once; this prevents the chart from becoming too crowded. Each data set would be displayed in a specific shade of the same colour with the contrast taken in to consideration; accessibility should be maximised.
This situation applies specifically to the disqualification tab where users see the reason for disqualification 'at' and 'after' the application stage; the data sets do not have the same x-axis hence cannot be shown on the same graph.
Since there are only two graphs to show, it would be acceptable to show them stacked vertically as in Design 1; however, it is not optimal. From user research (gorilla style interviews) it was found that out of the two data sets, the 'after application stage' data takes priority in most cases, hence Design 2 was created.
Design 2 guides users through the primary flow since it displays the 'after application stage' data as a default, thus saving users the extra click or scroll.
In the original 'closed roles' tab of the insights there was a data highlight labelled as 'average interview-to-hire ratio'; it was displayed as a single percentage and caused a lot of confusion for users.
The 'average interview-to hire ratio' was the percentage of candidates that made it from the interview stage all the way through to being hired; in other words, it is a measure of candidate success rate. The value was a single measurement covering multiple stages, whereas, users actually want to monitor the success rates between hiring stages along the whole process.
Given the nature of hiring processes, the candidate pool decreases in size with each consecutive stage; this trend is often referred to as a 'funnel'. The challenge was to find a sleek yet intuitive way to visualize the analysis of this for users.
I knew that I wanted to show the data as some form of flow chart/map since it would be most efficient in terms of layout, responsiveness and clarity for the user.
.png)
Since this there is a lot of detail and information to present, users may be overwhelmed; I used typography and colour to establish hierarchy and guide users through the visual.
Each hiring stage and the number of candidates within it are shown in boxes which are linked together by arrows. The arrows show the calculated success rate of candidates between stages, in other words, the percentage of candidates that made it to the next stage. The success rates are displayed dark yellow to draw attention and match the chosen colour palette. The number of candidates (in the box) is shown in a light gray shade since it is raw data and not the primary information we wish to convey - users want to know the success rates (arrow labels).
The original table designs were functional and clear, however, they needed updating to adhere to the branding and design system.
In the original designs, the tables are greyscale and span the full containing box with no margin; despite maximising the use of space, this appears unfinished and not particularly aesthetic. Since the tables contain a lot of numbers and detail, I wanted to retain the simplicity and clarity whilst also striving for a sleek aesthetic. I added colour and various font styles to create visual hierarchy that is engaging and intuitive for users.
.png)
The updated table design uses colour in the top row to separate the headers from the contents, and a 'total' row was added at the bottom to ensure users have easy access to quantify data series. I retained the original design pattern of displaying 'zero' values in a pale gray shade since this helps users clearly navigate the data and identify (or ignore) these points easily.
I also implemented the sorting function into each column heading, shown by the blue (active) and gray (inactive) arrows; by default the first column would be sorted by descending alphabetical order. In addition I wanted to ensure that all columns are of equal width since it is more visually harmonious; this also means that any longer text content would wrap to fit rather than extending the column width.
With the data visuals finalised, I could then experiment with the overall page layout; this affects the information hierarchy, thus influencing how users are guided through the content.
The key components featured in all tabs are the header, data highlight box, tooltip, and the chart. I drew up different layout options to see how they look.
Layouts 1 and 2 would not adapt well to longer tooltip copy (text); variation in copy length would result in irregular and unpleasant whitespace in the page, disrupting the visual harmony. In addition, layout 2 limits the width of the bar chart which would not optimize the user experience, particularly when viewing large data sets.
Layout 3 was the final choice for insights tabs since it optimised the use of space to create hierarchy; the data highlight is clear due to the whitespace, the chart is maximised by taking up the full width available, and the tooltip is contained in the relevant segment.
With the basic layout mapped out I then began working on the styling; starting with the key data highlight.
As mentioned, during testing users often failed to notice the key data highlight and would take laborious routes to complete tasks.
The aim was to create a key data highlight that got the users' attention without distracting or disrupting the page.
I decided to add an icon to the highlight box since visual aids are the most intuitive way for users to identify information. I also made use of the various text styles from the design system to help create visual hierarchy within the box and on the page.
Design 1 falls more in line with the basic card components used in the design system; the gray shades of text and whitespace is 'on brand' for hya. However, this may not solve the issue at hand since it is very similar to the original design of the key data highlight; users may still fail to notice it.
Design 2 was chosen as the final template for the data highlight box since it brings more colour to the platform whilst still being readable and engaging.
In order to maximise the clarity of the bar charts, we decided to include a hover function whereby users can see a detailed breakdown of values within the graph rather than having to refer to the table of raw data.
Since the the animation of a hover interaction appears instantly, I wanted to keep the design as simple as possible.
The information breakdown content sits in a clean and minimal box which pops up as an overlay. The borders are rounded to fit the design system; one corner is left unrounded, acting as an arrow to indicate which bar the data is referring to. The title and total (top line) is the same size font as the rest but heavier weights and different shades compared to the data; this is so that it can easily be distinguished without drawing attention away from the breakdown information.
This overlay was added to the design system as a part of the bar chart template thus establishing a design pattern across the platform.
.png)
.png)
.png)
.png)
The aim of this work was to refresh the existing insights section of the platform to improve the user experience and better fit the hya brand.
During this redesign project I was able to implement good data practices to ensure clear and logical data presentation.
The interactive prototype and design files were shared with our Product Designer, Bobbi Brant, who then conducted user testing to validate the designs.
Bobbi tested the interactive prototype with a few existing users and gathered feedback. There were no user experience issues or design revisions required, therefore, I prepared the design files for developer hand-off.
With the designs validated through user testing, I prepared the files for hand-off to our Engineering team, Nick Procopiou (CTO & Back End Engineer) and James Whyte (Front End Engineer).
I added annotated and added comments to the Figma file, explaining any interactions; I also drafted any empty states and edge cases. Any new reusable components were added to our 'Design System' file for easy access in the future.
The platform is constantly being refined and developed with user feedback in mind - hya has a public roadmap where users can share and request ideas.
The redesign of this insights section of the platform has helped refine the design system by creating reusable templates, such as page layouts, tables, and charts. It has helped form a cohesive and sleek interface across the platform which I'm sure will be refined even further over time.
