top of page
HH Careers Page Strip Image.png

Hungry Howie's
Careers Page

Project Background

This was my second project while working towards my Google certificate. I designed, prototyped, and tested this app idea I had for my current job at Hungry Howie's for a Careers Page on their consumer website. From October 2021 to February 2022, I sketched out paper wireframes, created digital wireframes, did testing and re-iterated on my designs based on the results. My target audience were those who were looking for employment, particularly those who are looking for their first jobs (16 years old to 22 years old)

Role

UX Designer

Date

October 2021 – February 2022

Methods & Tools

Survey, Secondary Research, Competitive Analysis, Figma & FigJam

Practices

User Research, UX & UI Design, Prototyping

Frame 1.png
Concept

A dedicated website page on our consumer website where job seekers can visit, learn more about the company, and apply for available positions. 

The Problem

Currently we have a single webpage application for in-store job seekers to apply with. We don’t show current openings or explain benefits of working for Hungry Howie’s.

The Goal

A sperate website for Job seekers to visit to find a list of openings, an application process, and to learn about working for the company.

User Research: Summary & Pain Points

I conducted user research and interviewed potential users. With those notes in hand I was able to create persona and user journey map. Through that I then could identified who the primary users would be: teens to young adults who are looking for their first job. But there is another group that came out of this research which are adults looking for jobs at corporate or distribution offices.

 

 

While this did confirm my assumptions, I also learned that there are others who are interested in as well. While research did reveal that there is a diverse group looking at this website. We need to make sure that all possible individuals can easily access this website and can get to where they want to go.

1

Lack of Info

In our current website, there is just a job application form. There is nowhere for the user to find out what it means to be a Team Member or Delivery Driver for example.

2

Lack of Clarity

Within the current setup of the Jobs page, we don’t include anything about why someone should want to work at our stores.

Persona 1: Bryon
User Persona - Bryon.png

Problem Statement: Bryon is a high school graduate who needs to find their first job because they want to gain experience in the workforce.

User Journey Map

Right now perspective employees searching for jobs have no issue applying. However, there is no information on why they should work for our company and what the job entails. The argument could be made that if someone is applying to work with us, they have applied to similar jobs and should have a general idea. But we shouldn’t assume anything.

User Story.png
Sitemap

My thought process on how the sitemap should work is based on the idea that the user should be able to reach the majority of the website’s different sections.

Screen Shot 2022-05-06 at 2.48.22 PM.png
Paper Wireframes

My thinking when creating these wireframes is trying to make sense of what is the most important tasks the user will want to complete.

These paper wireframes for a bigger screen allow me to label things more accurately. Also it gives me a better sense of how mobile view can transform into a nice desktop or tablet view.

IMG_0351.jpg
IMG_6612.jpg
Digital Wireframes

I always start out on mobile designs first since it is typically the most difficult for solving problems. The main problem to solve for these designs was putting at much information at the for front for the user to read. Another aspect of these wireframes you may notice is that these are not traditional wireframes, I use some color, and even label what I want some of the objects to be potentially. While this is standard practice and I don't do this with every project, for this project it was necessary for presenting ideas to others in the company. That is one lesson I have learned while working at Hungry Howie's, those who are visual learners will see past the gray boxes, circles, and lines. But those who are number driven don't see the vision as easily, and it is better to label objects. 

HH Careers Page Mobile Wireframes.png

Once mobile designs are figured out, next comes desktop. Desktop is much easier to design for since the user has a bigger screen and a mouse to move and click. Versus on a mobile device where they user has a smaller screen and uses their fingers to tap.

Screen Shot 2022-05-06 at 8.33.39 PM.png
Low-Fidelity Prototype

The low-fidelity prototype connects primary users to different screen size flows:

  • Desktop

  • Tablet

  • Mobile

Screen Shot 2022-05-06 at 8.19.07 PM.png
Usability Study: Findings

I conducted one rounds of usability studies. I used my wireframes and low-fidelity prototype in the study and found the following results according to my group of test users. 

Findings

1

Users want filter options to find jobs that suit them, are near them.

2

Users want the ability to share job postings with others.

3

Reduction in the number of clicks to apply for a job.

Mockups
Screen Shot 2022-05-06 at 8.45.26 PM.png

Before the usability study, I thought the application should be separate form the detailed view of the listed job posting. However, the reason why other company’s website have them separate is because they are using a third party website. So by combining the detailed view with the application, there is one less click for the user.

Screen Shot 2022-05-06 at 8.48.42 PM.png

Here is the mobile view of the changes based on the usability study. For mobile, the difficulty was in how to show the information for the job description, requirements, etc. It is now managed by a “Show More” button, where if the user needs to or wants to read more about the job, they can easily. While still keeping the application on that page as well. 

Key Mobile Mockups
Frame 2.png
Key Desktop Mockups
Frame 33.png
High-fidelity Prototype

The final high-fidelity prototype has now cleaner user flows for searching for adoptable animals, filter searches of adoptable animals, and different listing views.

It has also met the users need to quickly find adoptable animals and apply for them in one site.

Screen Shot 2022-05-06 at 9.17.05 PM.png
Screen Shot 2022-05-06 at 9.19.34 PM.png
Accessibility Considerations

1

Provided alt text for screen readers to read to those who are visually impaired.

2

Consider the color contrast ratios when designing the web pages.

3

Highlighted navigation controls so the user knows where they are at.

Takeaways

Impact: The impact of this webpage hasn’t been seen to as of yet. However, when implemented, the hope is to have an increase in applications.

What I learned: The biggest challenge for this project was to created a process to get the user to the application as fast as possible, without losing information the applicant would want to know. 

Next Steps

1

Possibly try to include back in the general application where the user can just apply with one application to a bunch of jobs at once.

2

Possibly have a highlighted job section where we would showcase job positions that are being actively hired at majority of stores.

3

Adding in more breathing room.

bottom of page