Prime Ocean

Visual Design for Offshore Recruiter

The Challenge

The offshore recruiting industry is ripe for disruption. Prime Ocean developed a relationship-focused process to source quality candidates for their clients and business is booming.

Prime Ocean is not as well established as competitors in the marketplace as the business is still in its infancy. Their rapid success pushed their marketing efforts to the back burner, however they aspire to expand into new offshore markets as soon as possible.

Key Goal

Define the Prime Ocean brand and improve the paperwork process .

CHALLENGE

Our stakeholders were so busy running their business that we did not always receive timely, helpful feedback.

Project timeilne

From strategy through QA, it took us less than four months to launch.

Tools

Paper and Pen
Sketch
InVision
GatherContent
Webflow
Trello/Slack/Zoom

Year

Fall 2019

My Role

I was the lead designer for this project.

As the lead designer, I was a key contributor to our strategy report. This included preparing and conducing stakeholder interviews, defining website goals and making recommendations.
As the sole designer, I presented hi-fi mockups directly to the clients. During development, I worked directly with an in-house developer to implement a mirco-service feature.

My Role

  • Market research and analysis
  • Stakeholder interviews
  • Assist with business strategy
  • Visual Design
  • Webflow Development
  • Visual QA

RESEARCH

During strategy phase, I conducted secondary research to educate both my team and myself about the offshore recruiting industry so we could conduct effective stakeholder interviews.


Two of our goals during this phase include

  • Define the needs of potential candidates
  • Understand Prime Ocean's unique approach to recruiting

Market research

We initially reviewed over 15 oil and gas recruiter websites to understand Prime Ocean’s international competitors as well as understand how candidates discover new opportunities.

Indirect Competitor Analysis

From our initial research, I choose three competitor websites where the client and future team members could learn the most from. We reviewed each website’s tone, visual style and usability.

Secondary Research Insights:

  • Avoid large blocks of text. Rely on strong hierarchy for a easy to digest mobile experience
  • Speak directly to candidates. This helps persuade them to apply and can increase their confidence in their choice of employer
  • Ensure the web experience is optimized in mobile, call to actions must be clear and optimized for clumsy thumbs
Atlas Professionals
Strengths
  • Featured jobs components can promotes jobs that must be filled quickly
  • Site clearly communicates Atlas’ service offering
  • Candidate statement component helps humanize the brand
Weaknesses
  • Job requirements are buried on the description page if present at all
  • Contact info per job is hard to read and engage with in mobile
  • The mobile navigation is not optimized for candidates
Complete Logistical Services
Strengths
  • Site is not verbose
  • Comprehensive overview of their services and capabilities
  • Quick and simple application process per role
Weaknesses
  • Job descriptions do not provide helpful details like requirements for applicants
  • Site does not address how candidates can connect with them
  • Job listing page is not optimized for mobile and is hard to use
Spencer Ogden
Strengths
  • Job description layouts highlight important informations so applicants can skim
  • Several candidate specific pages address needs of applicants and employees
  • Site allows candidates to save multiple opportunities in a variety of ways
Weaknesses
  • Secondary navigation causes usability issues for clumsy thumbs
  • Readability can be challenging due to the bold visual style
  • Users must have an account to apply for roles

Stakeholder Interviews

The business analyst and I interviewed all three Prime Ocean executives.

With a better understanding of the offshore recruiting industry, we first prioritized what we should learn from our stakeholders, then crafted stakeholder specific questions.

After the interviews we learned how the hiring processes worked between Prime Ocean, a candidate and the offshore rig.

Take-aways

  • Prime Ocean's expertise has allowed them to be one step ahead of their clients
  • Most candidates primarily use their mobile device when applying for roles
  • Candidates respond better to listings when requirements are clearly stated
  • Prime Ocean's proprietary approach enables them to select quality candidates

Provisional Personas

Unfortunately we were not able to interview our target users. So, we had to rely on the executive team to educate us about the website’s main audience: candidates and their clients.

Aaron
Job Applicant
This is a new Prime Ocean candidate. They are looking to start a new role ASAP.
Goal
  • Secure a contract with an offshore rig
Pain Points
  • Needs to start working off shore within a short time period
  • Doesn’t fully understand Prime Ocean's role in the hiring process
  • May be frustrated about slow communication by employers
Bill
Job Applicant
This is a seasoned offshore-man who wants a permanent role.
Goal
  • Secure a long-term contract with an offshore rig
Pain Points
  • May not be technically savvy
  • May have a skillset that recruiters do not have an opening for
  • Needs to quickly see if they qualify for a specific job posting
Blake
Client Rep
This is Prime Ocean’s main point of contact with their clients, they make the hiring decisions.
Goal
  • Secure the right candidate per open position
  • Decrease the risk of hiring the wrong candidate
Pain Points
  • Hiring needs may change with little notice
  • Need partners to anticipate hiring needs to keep up with their rapidly evolving hiring situation

define

We defined the website architecture and content structure through a comprehensive sitemap before beginning design.

Because Prime Ocean is a fairly new business, we worked directly with the executive team to define the tone of their brand. The sitemap was referred back to as a source of truth during design presentations so our client could review mockups with the right lens. Due to NDA, I created this chart of priorities to represent the sitemap.

Design

My team decided to expedite our process and present a hi-fi mockups of the homepage during our strategy presentation.

We found scheduling difficult, it was hard to to get all executives in a room at the same time. We only presented two of the five unique pages to the entire Prime Ocean team during the design phase.

Low Fi

When starting a new page design, I sketched my ideas out on paper to get a good grasp on how components could work together. Here are a few sketchbook pages.

Homepage

I had less than two weeks to design a homepage concept. Even when working under a few tight deadlines, our clients loved the initial concept so I did not have to change directions.

Goal of the page

Educate clients and candidates on who Prime Ocean is and showcase their current opportunities

hero

The hero defines who Prime Ocean is to their clients. We designed with the mobile experience in mind so I leaned into layouts that broke the grid.

Current Opportunities

Prime Ocean posts their openings on a popular industry job-board where many candidates search. Their website pulls those listings so they do not have to post jobs twice.

Candidate stories

We hope this section will set an expectation with candidates, giving them a glimpse of the working relationship they could have with Prime Ocean.

Scroll to view this mockup

Job Post Details

We knew the majority of candidates would be viewing the website from their device. I designed with mobile in mind to ensure all layouts are modern, sleek and stood out from competitor sites.

Goal of the page

Streamline the application process

Overview

Job opportunities are created daily. I designed a template page that is flexible with Prime Ocean's formulaic job description.

Application Form

Prime Ocean recruiters often struggle with receiving a candidate's certifications in a timely manner, we created a form that could capture and store an applicant's professional details.

Before presenting to the client, we made sure this form design was ADA compliant.

Scroll over the image to view the entire mobile mockup

About

After we received content from our client during development, the layout of this page evolved.

Goal of the page

Position Prime Ocean as an industry leading expert

Client Commitment

This section is a high level overview of Prime Ocean's approach to business.

Team + Value

Because the business is young, showcasing the leadership's industry experience adds weight to client commitment section.

The Company Value section was intended to speak to future in-house employees and community organizations. When writing copy, our client decided to table this section for launch.

Track record of Success

By highlighting operational success, potential clients can expect their needs can be met when partnering with Prime Ocean.

Scroll over the image to view the entire mockup
View the Site

Outcomes & Lessons

The visual design was approved quickly. We launched the site mid-November with no qualms.

Design lessons

Part of the reason design was approved quickly is because we took time to create and iterate on a mood board. The mood board allowed us to expand the brand colors, choose an imagery style and propose a grid-breaking mobile layout.

Webflow lesson

I built several micro interactions on this website to create a smooth and engaging scrolling experience, my favorite is the sticky scroll on the about page. I partnered with an in-house developer to ensure Internet Explore11 users would not have a fragmented experience.

more work