Jibjobs

Jibjobs is a fictitious job board website I designed. With this project, I wanted to create a website that properly utilized design patterns common to an effective job board style site design. A design pattern is a typical solution to common problems experienced in user interface design. I will explain these design patterns in more detail below for all pages I created.

 Logo

Color Palette

The colors chosen for this website are a combination of gray and blue color values. I wanted to go with something neutral and muted, which is accomplished by using gray, while incorporating some blue, as it is known to be a color that promotes security, loyalty, stability, and depth. All these characteristics apply to a job board style site, which is meant to be a secure and stable system.

Typography

I chose to use Poppins as a universal font for the website design, as I was looking for a style of font that was geometric, modern, and minimal. I wanted a clean design that doesn’t distract too much from the content of the site, since the focus of the site design is to utilize different design patterns typical to a job board style site.

This project includes five different pages that utilize different types of design patterns. I will explain the design decisions made for each page below.

• Home

• Search Results

• Detail (Job Post)

• Account View (Resume)

• Content Submission (Review)

 Home

The most important design pattern of the site is the search feature, so on the homepage, I placed it front and center in the first main section of the page under the title, “Find your dream job.” I included a keyword field where the user can input job titles, companies, etc, along with a location field to allow for filtering the results by a chosen location. 

As an alternative navigation option, I also created a browse section underneath the main search section, under the title, “Get Started.” This allows the user to browse three different locations of the site: job postings, reviews, and salaries. The search and browse options are a common pairing for design patterns, as they give two different ways to navigate the site.

Global Navigation

For the rest of the pages on the site, the search and browse design pattern is always present through the global navigation, where there are links to the Jobs, Reviews, and Salaries pages, along with the keyword and location input fields for the search function.

Search Results

The search results page uses the cards design pattern for all individual job postings. This approach encloses information for each job posting visually in its own box, and lists them in one center column of the page underneath each other. The cards all take up the same width as each other, but the design of the cards allows the height to vary with the content. 

I included sort filters to help fine-tune the results that the user is looking for. Included are three dropdown menus: 

• Sort by, with options “most recent,” “most relevant,” and “highest rating”

• Located within, with options 10 miles, 20 miles, 30 miles, etc

• Posted within, with options 2 weeks, 4 weeks, 6 weeks, etc

And two other sort filters as radio buttons:

• Job type, to toggle between full-time or part-time positions

• Remote?, to toggle between on-site or remote positions

Detail (Job Post)

This page includes more details on a job posting presented as a center stage article with information organized under titled sections, such as Salary, Job Summary, Responsibilities, Qualifications, Education, and Work Experience.

I used a breadcrumbs design pattern above the job article to give the user a way to return to the search results page. I also included a call to action button “Apply” so the user can apply to the job, a secondary button to the left “Save” to save the job post to their account, and a “Print” button at the bottom of the job article so they can easily print the article.

Account View (Resume)

The account view page essentially displays the user’s resume and personal information. I incorporated a settings editor into the design with the presence of “Edit” and “+” buttons along the right side of the article. Each “Edit” button allows the user to either edit the main personal information up top, or any job positions listed under Work Experience and any information under the Education section. The “+” button allows the user to enter a new entry.

This page also incorporates a dashboard design pattern, which allows the user to visit other account related pages other than the Resume page, and includes Job Preferences, Recent Activity, and Saved Jobs.

Content Submission (Review)

The content submission or review page allows the user to leave a review for position with a previous employer. This page is populated with input fields paired with input hints that describe what the user needs to input. These inputs are as follows:

• Company (with text input)

• Rating (with star selection, out of 5)

• Employee Status (with dropdown)

• Job Title (with text input)

• Review Headline (with text input)

• Pros (with text area)

• Cons (with text area)

This project was a great example of utilizing design patterns to create an effective UI design for a potential job board style site. These design patterns are the focal point of the design, since they make up the main content of the user interface. The visual design aspect is kept to a minimum to allow the content to shine. This was a great exercise in familiarizing oneself with a wide range of design patterns, since every page design has different functionality. However, each page still uses the same branding guidelines and can be easily identifiable as one complete design.