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
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
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.
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.
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.
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.
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.
Low-Fidelity Prototype
The low-fidelity prototype connects primary users to different screen size flows:
-
Desktop
-
Tablet
-
Mobile
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
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.
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
Key Desktop Mockups
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.
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.