Tim Householter

Perfect Loop

Perfect Loop takes a different approach to help job seekers find a new job. Through online “conversations” an app asks basic questions about education, job experiences, and what you love in order to match the right candidates with the right employers.

My Role

I acted as the lead designer for both UX and UI. My duties included research, wireframes, and visual design. I was in charge of overseeing the project from beginning to end including communication with developers to ensure the best outcome and keeping the project on time.

Goals of the project
  • Drives job seekers to start a conversation and sign-up
  • Show free and easily accessible resources
  • Have the ability for the site to expand to include login and profile screens.
  • Have dedicated pages for both employees and employers

Branding

The idea of no such thing as a “Perfect Loop” gave us a concept. Andrew and I set out to create something that cuts through the hazy world of job hunting sites. Heavy saturated gradient lines and a simple multiple effect gave this mark many layers. The mask is an organic shape that mimics the interior lines, although contained still feels free. The mark is bright and optimistic while featuring rigid type treatments that keeps it grounded and feeling professional.

Animation of the Perfect Loop logo

Making sure the CMYK translated was critical to the success of these cards

Web Site Strategy

Before we dove into design we looked at competitors websites to gain an idea of why the client wanted something different. Right away one can see most job boards are on display for everyone to see. Some are even hidden behind an email sign-up form that promised big things to come. All the sites felt very professional, easy to navigate, and gave you exactly what you were looking for.

Areas of opportunity for perfect loop
  • Personalized job posts that are tailored to job seekers interests and passions
  • Allow users to feel in control through conversations and access to talent advisors
  • Provide helpful blog, video, and audio content that helps them navigate their new career path

After we established what current job finding websites were lacking it gave us ideas of where we could take the structure of the website. Working with the client and his team we set out to find a voice for the content and how the site will flow from one page to the next.

Wireframes

We built out wireframes that would test the major user flows of the site. We focused on simplicity while incorporating important CTAs and helpful snippets of information. We started merging the best wireframes into a comp for testing. We had two major directions to pursue.

Quick grab of my sketch book documenting a meeting

Two major directions:
  1. Introduce Perfect Loop by showing featured resources and give users the option to answer a simple CTA “Are you looking for a job?”, this would launch them into a conversation and start building their profile. This main CTA would only be placed on the home page and would allow users to always know where that CTA was at all times. This option was limiting in CTAs but felt less salesy.
  2. Option two would have the same featured resources and information about the company but allow the users to enter conversations through multiple places on the site. Adding simple CTA's throughout the site would allow users to gain more information about Perfect Loop while giving them the freedom to enter a conversation at anytime.

The client decided to test option one. The testing came back with mixed thoughts about the structure of some of the pages. The home paged lacked information and with only one CTA users felt like it wasn’t important. We came back and fused the two directions together and tested again.

Finished Wireframes

Users felt this direction was enough information to learn about the company as well as thought the resources were great. Having the ability to enter a conversation at multiple areas of the site felt like the user was in control. After the initial test we continued to fine tune the content and build out more wireframes for testing, taking pieces that worked well and taking out others that felt confusing or misleading.

See full mobile wireframes here:

Visual Design

We started adding branded elements such as large wavy gradient lines as color fields to contain important information. Secondary pages used thinner lines to help break-up areas of content. A friendly rounded typeface was chosen to complement the current brand while remaining professional. Whitespace was added with detail to keep the site from feeling cramped. Additional branded elements were added to the menu and footer to keep every facet of the site feeling optimistic.

All employer facing pages utilized the warmer Perfect Loop color palette while employee pages featured the cooler color palette.

CTA for job seeker using cooler color palette.

Scroll through the home page showing off resources, testimonials, and CTAs

Small breakpoint of the home page to show off the responsive design

Candidate Resources featuring page pagination to promote discoverabilty.

Overview

The finished project is something I’m really proud of. The identity is strong and can be built on for years to come. The client was thrilled and now has site they can can continually build upon. The current launch is labeled as Beta and there has been some modifications to the structure of the site but expect more great things to come.

prev-project-arrow

Prev Project

Next Project

next-project