small_Fcsqb5pWQAAzPIK.jpeg

thumbnail_Fcsqb5pWQAAzPIK.jpeg

Adobe acquires Figma, cue the memes 🤪

large_Crossover Series NFTs.png

medium_Crossover Series NFTs.png

small_Crossover Series NFTs.png

thumbnail_Crossover Series NFTs.png

From Photography to NFT Art: Twisted Digital Landscapes with Nate Hill

large_featuredImage

medium_featuredImage

small_featuredImage

thumbnail_featuredImage

What Is the Open Web?

From Design System to ‘NFT Design System’: Creating TinyFaces

<p>Published on <a href="https://blog.prototypr.io/case-study-ux-optimisation-for-talent-marketplace-ac5e93fa73f4?source=rss----eb297ea1161a---4">| Prototyping: From UX to Front End &mdash; Medium</a> Anastasia Kolokolnikova </p>
<p>For our final project at RED Academy I worked with two other UX Design students on TalentMarketplace.ca, an online platform for project management specialists looking for work, on one side, and potential employers looking for project management specialists, on the other side. Our main task was optimising the sign up process for job seekers. At the same time, we also worked on the search function for employers, as well as the visual elements and layout of the user interface.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*vTkatZubnGXnU4k25qwyBw.png">Final version of the TalentMarketplace home page (desktop and mobile)</p>
<h3>About TalentMarketplace</h3>
<p>As a highly customised digital platform for project management staffing, TalentMarketplace is highly valuable to both candidates and employers. On the candidate side, it eliminates the tedious job application process. All you need to do as a candidate is complete your profile and wait for interested employers to send you interview requests. For employers, it helps save time and money on the hiring process, as the candidates are prescreened by TalentMarketplace specialists. This guarantees that each candidate’s profile contains relevant and verified information.</p>
<h3>Project goals</h3>
<p>For the platform to maximise its value, it is important to attract more candidates. However, as we discovered at our kick-off meeting (and as Google Analytics data confirmed), many first-time visitors leave the TalentMarketplace website without creating or completing their profile. We hypothesised that this was due to a complex and confusing sign up process. Therefore, our primary goal was to <strong>(1) optimise the process of creating a candidate profile</strong>.</p>
<p>As we spoke to current TalentMarketplace users, we found that employers valued the detailed and relevant information presented on candidate’s profile, as well as the ability to search for a very specific set of qualifications. However, the visual presentation of the candidate profile and the search function interfered with employer’s user experience, creating a steep learning curve and preventing them from finding the perfect candidate as quickly as they would like. So our secondary goals became <strong>(2) improving the visual layout of the candidate profile</strong> and <strong>(3) creating a better search page</strong>.</p>
<p>This is how we went about achieving each of these goals:</p>
<h3>1. Creating a candidate profile</h3>
<h4>Analysing the current design</h4>
<p>On the current version of TalentMarketplace website, you have to go through multiple steps before your candidate profile is created and published. First, as one expects, you create a username and a password. But wait: there are a few requirements your password has to meet (at least 8 characters long, one upper case letter, one number, etc.) These are listed at the bottom of the page; however, there is no way to check if your password meets them until you’ve hit “Next” — which is when the things you’ve missed will jump up in red. Eeek!</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*vY-5UAwYjtBVZ6TJSzQ-nw.png">Creating a password (current TalentMarketplace website)</p>
<p>After that you are taken through a series of questions on their professional experience. There is a progress bar at the bottom, but you might still be wondering exactly how many steps are left and what they will be.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*-XOH6FgXxsUgRuz7L7fjxQ.png"></p>
<p>Then, finally, you are presented with their profile, and your job here is done!… or not.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*Bc3J4FFldw9DadVGkwYQHw.png">Candidate profile at the end of sign-up process (current website)</p>
<p>This is what we found out upon closer examination of the process:</p>
<ul>
<li>First of all, the candidate profile is <strong>still incomplete</strong> at this stage. Some of the information (that user provided in the setup “wizard”) has been pre-populated for them, but there are still quite a few blanks to fill in. However, these blanks are not obvious at the first glance.</li>
<li>The profile <strong>has not yet been published </strong>and is not visible to employers. There is no indication of this, either.</li>
<li>Once the user completes their profile, they must <strong>submit it for review </strong>by TalentMarketplace and <strong>schedule a call</strong> with a TalentMarketplace specialist to have their information verified. Only after that will their profile be published, and employers will be able to access it.</li>
<li>If the user cares to read the blue pop-up in the top right corner, it will tell them that some information is still missing, and all fields must be completed before they can proceed to the next step. However, when we tested this design, most users dismissed the popup without reading it. When we pointed it out and asked them to read the popup, they were still mildly confused about the next steps.</li>
</ul>
<p>We also interviewed some TalentMarketplace users and realised they did not have a full understanding of the process even after successfully completing all the steps. For example, one user recalled:</p>
<blockquote><p>“I got a call from TalentMarketplace because there was a mistake in my profile and I had to fix it”.</p></blockquote>
<p>In reality, the call is a standard procedure, not an indication of a mistake made by the candidate. It’s true, however, that TalentMarketplace will make recommendations to candidates on how to best present their profile; this adds extra value to candidates, who can rest assured that the employers will be aware of their most relevant skills and qualifications.</p>
<p>Our users found all the information displayed there highly relevant and useful, but it took them a while to decipher it. For example, they easily overlooked the sidebar, which contained some key statistics. They also disliked the pie chart that represented the number of years of experience in specific industries, finding it harder to read than the bar chart for role-based experience.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/958/1*Y_1JYiwDohbkKh4qHr1wzA.png">Candidate profile page. Highlighted in red: sidebar; pie chart vs. bar chart.</p>
<h4>Important findings</h4>
<p>Based on user tests of the current website, interviews with current TalentMarketplace users and heuristic evaluations, as well as our own attempts at creating candidate profiles for ourselves, we came up with a list of user problems and usability heuristic violations. The most important ones included:</p>
<ul>
<li><strong>Visibility of system status</strong> (e.g., progress bar in profile creation)</li>
<li><strong>Consistency and standards </strong>(e.g., an easily dismissed popup being used to convey essential information)</li>
<li><strong>Error prevention and recovery</strong> (e.g., list of password requirements)</li>
</ul>
<p>As discussed above, we also identified some problems with the <strong>visual hierarchy</strong> of the profile page (e.g. the hard-to-notice sidebar).</p>
<h4>Competitive-comparative analysis</h4>
<p>In order to understand how other job finding platforms deal with similar issues, we examined some competitors (including sites like LinkedIn, Hired.ca, BCjobs.ca and others) and identified their key strengths and weaknesses. We identified the most relevant findings as “takeaways” and implemented them in our first prototype.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*Mv1z5im2i9iNB48_sPVXBg.png"></p>
<h4>User personas</h4>
<p>We were lucky to get extensive data from our client, who did some research on their own and prepared their own user personas. We used our own research to validate these, and, after putting together an affinity diagram, came up with a unified candidate persona:</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*GFcGz1_tSvPC3XyN897WQA.png"></p>
<h4>Paper prototype</h4>
<p>Our next step was creating a paper prototype that would allow us to test our early design ideas. We used the Design Studio method, where each team member creates a quick sketch, and ideas are quickly iterated and combined to create an initial version of each page. Based on our research, we concentrated on making the system status visible at all times, as well as providing lots of user freedom and control (for instance, allowing users skip certain steps and come back to them later). We also strived for a strong visual hierarchy even at this low-fidelity stage.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*FAZpjNQMYHqdWf81htyPHQ.png"></p>
<p>As we tested our paper prototype, further details came up. There was a significant improvement on system status visibility, and users had a more solid grasp of the entire process from username creation to profile publication. However, on long scrolling pages (like the completed profile) they wanted to access call-to-action buttons more easily, and so we added the buttons and tooltips to the top and the bottom of the page.</p>
<h4>Form design</h4>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*NXjX__RCs5fiVAVyMpZSmg.png"></p>
<p>Most of the TalentMarketplace sign-up process is interaction with forms, and so we spent most of our time designing forms and their elements. To ensure consistency across different form elements, we followed the Atomic Design methodology and started with designing the smallest elements of forms, such as text fields, checkboxes, dropdown menus, etc. As we progressed to the high-fidelity prototype, we also considered how colour and other visual elements would be used to distinguish between active and inactive form fields, error states, hint text vs. entered text, and so on.</p>
<h4>Style tile</h4>
<p>Speaking about high fidelity, we paid a lot of attention to user interface design in this project. Because of its detail-oriented and text-heavy nature, we wanted the website to have a lot of breathing room to facilitate information processing. We also strived for consistency and strong visual hierarchy. In addition, we created a few custom icons to better illustrate some key concepts on the home page.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*zwIVgmPfqo6xslCMxLLVCg.png"></p>
<h4>Key design elements</h4>
<p>The most significant change was replacing the ambiguous progress bar with a clear <strong>step-by-step progress indicator</strong>. In the screenshot below, the candidate has just created their username and password, and they are at the first step of the sign-up “wizard”. However, they already know how many steps there are in the entire process, and what information they will be entering at each step. They even have an indication that some of the steps are optional (which is giving them more control over the process).</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/778/1*Kcw4mnjNeeNK-ReIgx2SWw.png"></p>
<p>When they arrive to their newly profile, users now have another progress bar which informs them about the next steps they need to take. The status banner coupled with a call-to-action on top of the page provide more detailed information and prompt the user to keep going through the process.</p>
<p>In the screenshot below, the user has completed their profile, and they are ready to schedule a review call. Their profile won’t be published until after this call, which they see in the progress bar; this information is also reinforced by the status banner.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*zSAZlPGFpCMNJ1W1u7z2pw.png"></p>
<p>To sum up, we achieved our first goal — optimising the sign up process — by ensuring better system status visibility and enhancing user freedom and control. We clearly outlined all the completed and future steps at every stage of the process, and high-fidelity testing showed that this made a significant improvement in users’ understanding of how the TalentMarketplace worked.</p>
<h3>2. Better layout of the candidate profile</h3>
<p><img alt="" src="https://cdn-images-1.medium.com/max/761/1*a0t5quKUt6vfU6DAxOu45Q.png"></p>
<p>The major problem with the candidate profile was that the information was presented without a clear structure. To ensure that data-heavy profiles could be easily read, we presented the sections of the profile in a sequence, stacked on top of each other.</p>
<p>We also changed how numbers (like years of experience) were presented visually, getting rid of the pie charts that most users found confusing. Instead, we opted for bar charts and made them even more readable by using the Gestalt grouping principles of proximity and continuation: all information relevant to one industry or role is presented in one line.</p>
<h3><strong>3. Better search page</strong></h3>
<p>Employers are presented with a multitude of filter options when searching for a suitable candidate. While these options are very useful, their layout and the possible interactions are quite confusing, so we wanted to suggest some improvements here as well.</p>
<p>First we took inspiration from other websites with multiple filter options, like e-commerce sites, Craigslist, etc. Many of them featured a filter column, and we added it to our first paper prototype. We then came up with an alternative design featuring a search bar, which would allow to narrow down the search results even further by using keywords. To choose between the designs, we ran an A/B test on our paper prototypes.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*-pS_UTwLRW8a5pAnQb5BuA.png"></p>
<p>We found that users really liked using both the search bar and the side bar. However, their respective layouts were confusing, and it took our users a while to determine whether using one cancelled the settings in another. So, after a few design iterations, we came up with an alternative design, combining the search bar and the filter list in a horizontal layout.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/571/1*aQCW9xT6JvhcoYEOErQW4w.png"></p>
<p>User testing showed that this was a more successful design, and therefore this version made it to the high fidelity prototype, as seen below.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*iRq8tlkJzKP_2Bp4yqtFaQ.png"></p>
<h3>Interactive prototypes</h3>
<p>The interactive Invision prototypes can be accessed here:</p>
<ul>
<li><a href="https://invis.io/MCCFIP8UG">Click here to view the project `Talent Marketplace`</a></li>
<li><a href="https://invis.io/YFCHZQI85">Click here to view the project `Mobile_Talent Marketplace`</a></li>
</ul>
<h3>Future considerations</h3>
<p>TalentMarketplace proved to be an exciting project to work on, and we tried to cover as much ground as we could within three weeks. However, there are (potentially) even more improvements to be made. Further evaluation and testing of the entire employer user flow, including the search functionality, would be extremely helpful. There are some parts of the user flow (such as general browsing and exploring) that would need to be addressed, too.</p>
<p><img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=ac5e93fa73f4" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou"></p>
<hr>
<p><a href="https://blog.prototypr.io/case-study-ux-optimisation-for-talent-marketplace-ac5e93fa73f4">Case study: UX optimisation for TalentMarketplace</a> was originally published in <a href="https://blog.prototypr.io">prototypr</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.</p>


Case study: UX optimisation for TalentMarketplace

Case study: UX optimisation for TalentMarketplace

Top Stories