Client
Collabera

Core Team
Me in Lead Product Design, Visual Identity, Illustration Branding
Ahilia Agency in Design support, 
Trenna Sharpe in Copywriting,
Arup Dey in Front-end, WordPress Development
Kauslendra Narayan in Backend, API Development
Vinit Bhatt in Business Process, Head of Delivery
Patricia Wilson in Marketing, VP of Marketing

Challenge
How might we redesign the visual identity, experience, key product and interaction features of a digital platform for candidates to easily find and discover relevant jobs in a more human way?

Deliverables
Responsive website and job search platform,
Visual Identity, and Illustration Branding

Link
www.collabera.com

dell_&_nexus_male_hand_search_jobs

I got 99 Problems but a b***h ain't one:
Indentifying and understanding user needs

Collabera is a global IT Recruitment and Staffing Agency with 40 offices worldwide. They match talent to work with the 250+ organizations in their network, and manage the talent end-to-end in the project. They came to me, looking to redesign their entire website and job search platform. So I asked them Why and So what. 

In my kickoff meeting with Collabera, I learned that

  • 50% the site's traffic came from mobile phones, and they were only expecting that to increase in the future. But their current website wasn't mobile-friendly. At all.

  • Job seekers accounted for more than 50% of the site's traffic based on the pages visited and the incoming channels these users were coming from. But a majority of the same users also dropped off the site before engaging in a meaningful activity like spending time on the site to search for a job, or apply to a job.

  • They were spending too much money on 3rd-party services and platforms to recruit and staff positions for their clients, so much so that they decided it was time to re-allocate that spending on developing their own digital assets to recruit and staff quality talent.

  • They had also evolved as an organization. Like that teenager that goes through puberty, and one morning wakes up to find that she no longer fits into her favorite Levi jeans, Collabera's website no longer fit who they were, what they stood for, and where they wanted to grow.

I interviewed Collabera's Account Managers and the Head of Delivery to identify the biggest pain points that job seekers encountered while searching for a job on the site. Account Managers work directly with the talent and clients to ensure both their experiences meet their expectations throughout the whole project. The Head of Delivery oversees the whole recruiting and staffing operations. In asking these stakeholders, I learned that

  • Job seekers found it very difficult to navigate and find what they were looking for on the site. Many links led to dead ends and broken links, levels deep in the website that left them with little to no recourse. 

  • Job seekers would search for a specific job title or keyword, and often get 0 or irrelevant results with little to no meaningful recourse.

Deconstruct to reconstruct

"If you don't understand something, break it apart; reduce it to its components. Since they are simpler than the whole, you have a much better chance of understanding them; and when you have succeeded in doing that, put the whole thing back together again." - Hans Christian von Baeyer

I wanted to gain a thorough understanding of how Search and Discovery worked, so that I may begin to identify design patterns that created a meaningful and engaging experience for users. After interviewing stakeholders, I conducted a site audit and usability test to understand the layout of "the land", and how the current website and job search platform worked. I intentionally focused on noting what might've caused the problems that the stakeholders expressed, and how. I put myself in the shoes of someone searching for a job, and identified three critical activities that this person might do on the site:

  • Searching for and discovering jobs
  • Applying to a job or submitting a resume
  • Browsing through job-related information on the site

I put these activities on a stress test to see what would happen, experimenting with different combinations of job titles and keywords to see how the search worked, what I would find, and what could I do if I didn't find what I wanted to find, and a lot of clicking to see where the rabbit hole would take me. 
Aside from Collabera's own job search platform, I also tested the mobile and desktop experiences for  

  • Job search platforms of Collabera's peers (Adecco, Onward Search to name a few)
  • Popular job search platforms (Linkedin, Indeed, Glassdoor, Authentic Jobs, Angel List, SimplyHired to name a few)
  • Popular search platforms/marketplaces (Google, Amazon, Etsy to name a few)

 

Here is a stress test I did on Collabera's job search page

usability test ex

Setting the mood and finding a North star

 I worked with Collabera to tease out What websites inspired them and Why, What words and phrases, photos and videos, or a combination of both resonated with them and Why, What feelings did they want to evoke when users came to their site and searched for jobs and Why. I then created a digital moodboard to capture the visual direction for look and feel.


As I sat with all this research, trying to process and connect the dots, I found inspiration from this design talk on Architecting Experience: The Future of Interactive Design given by Patten Studio, an interactive design studio based in Brooklyn. They talked about how we as designers can create products that empower people to become the author of their experience. I saw this as a very strong concept, and used it as my North star to help guide me in my design decisions.

collabera.com moodboard

Designing the foundation

“The whole is greater than the sum of its parts.” - Artistotle

I then applied systems thinking to identify the key elements in the job search platform that work together to help users find and discover relevant jobs.

For the search platform, as well as all other pages in the site, I designed for mobile first and then used the Bootstrap grid to make the design responsive across viewports. Whenever I felt the mobile experience would greatly suffer from a responsive design, I diverged to create a more mobile-friendly pattern.

job search platform (desktop) and its components

Designing contextually relevant interactions

Designing with empathy for the users' needs requires that we anticipate What to show, When, to Whom, and How. 

From UX research, we know that people recognize an event or piece of information better than they can recall it from memory, and we also know that typing has a high interaction cost, is error prone and time consuming. I designed the following search patterns to make it easier for users to help themselves. When users starts searching, the search bar

  • Suggests recently searched criteria for returning users, so they can start where they left off
  • Autocompletes and auto-suggests matching job titles, keywords, or location as they're typing, over needing to recall the entire job title or keyword from scratch
  • Highlights the difference between inputted and suggested information by emphasizing (in bold), which characters match their input as they're typing
  • Highlights the best match job title, keyword, or location once it finds a high character match
  • Separates matching job titles, keywords, or location between new and recently searched ones to make it easier for them to recall if they had previously searched this criteria
  • Offers auto-location to automatically input their current location
jobSearchFlowDevice
pagination-w-device@.75x

After users submit their search query, the page

  • Displays a counter of total results found to give them an idea of what they're working with
  • Displays 15 results per page, which I estimated as a good starting amount of information to review, process, and decide to take further action upon
  • By default, sorts results by relevance and then date posted to encourage users to focus their efforts on reviewing the most relevant and recently posted jobs
  • Provides different ways for users to broaden or narrow their results by
    • Toggling between showing new or old jobs
    • Filtering by one or more of the different categories
  • Breaks up results with back/next/first pagination to help reduce cognitive load, and encourage users to focus on reviewing and processing the most relevant job postings first while always having access to the first page with the most relevant results  
  • Empowers users to explore and discover beyond the search query entered through recommendations like jobs they recently searched, people also searched… (when viewing found job results), and people who viewed this also viewed… (when viewing a job description)

Designing a forgiving ecosystem

We're human. We make mistakes, and especially so when we're typing from a small keyboard on our smartphones, as we're walking into the subway, and a text message pops up, distracting us temporarily from what we were searching for in the first place. We also need constant feedback on what we're doing, and how we're doing. To help people get started, and course correct along the way without too much pain and inconvenience,

  • I designed affordances to clue users into what is possible to do. In forms for example, I applied an inner shadow to the box to clue users where to input their info, the size of box to suggest character length of their input, and the label and placeholder text to indicate the information requested
  • I designed inline validation into all forms so users know that the information they entered was or wasn't valid and how to correct it right away, rather than after submitting the form only to find out that they've filled it incorrectly
form inline validation

Designing a human brand

"While we’re a company in tech, we’re in the business for humans." - my client

As a team, we worked together to redefine a brand with humans at the center. Every detail was an opportunity to build a relationship of trust, empathy, and understanding with users by treating them as humans, and not like robots.

From the placeholder text in blank states, to job posting details in results, error messages and ways to course correct at dead ends, I worked with Trenna to create natural language copy for the UI, across the different states and in edge cases.

I was drawn to the concept of a quilt tapestry for what it represented. By definition, a tapestry is a piece of thick textile fabric with pictures or designs formed by weaving colored threads, and is used in reference to an intricate or complex combination of things or sequence of events. I saw Collabera as this craftsman that weaves together a diverse network of people from around the world who then create a colorful tapestry of work together. The concept would later take shape in the site's homepage banner, filled with warm, inviting faces. 

quilt_inspiration
tapestry_concept
iPadPro_home

When you set out to look for a new job, you make yourself vulnerable by putting yourself out there, knowing the uncertainty of it all—if you’ll find any jobs worth applying to, whether you’ll hear back or not, what interviews and offers you'll get, the list goes on. Knowing that finding a job feels very much like a roller coaster of a journey, we could make the ride more enjoyable for people along the way.

As a final detail in creating a more human brand, I drew a set of hand-drawn llustrations throughout the site, giving a warm, personal touch to the experience by surprising users with delight when they find them.

chrome_submit_resume_success
chrome_consultant_support
application_success

                                                       ✌