PROJECT OVERVIEW
INTRODUCTION
I designed this responsive website and mobile app as a part of the Google x Coursera UX Design Professional Certificate program. With a focus on designing a product for social good, I designed a web and mobile application that allows for easy job searching for the elderly population and those experiencing homelessness.
Role
UX Designer
Tools
Figma
Timeline
3 Weeks
THE CHALLENGE
The challenge for this portfolio project came from a problem I encountered in my own community. After volunteering at a local job placement organization, I saw that most clients were older (above 70) and often had extremely limited experience searching for and applying for jobs online. Some were experiencing homelessness, others were first generation immigrants who spoke little English, and others were elderly people who needed to re-enter the workforce after years of being retired or never having worked.
Even though volunteers encouraged the clients to operate the computer themselves, many were discouraged or overwhelmed, and volunteers ended up doing all the computer work themselves. After COVID-19, in-person help ended, leaving many clients to fend for themselves in their job search at home with no guidance.
RESEARCH
WHO ARE THE USERS AND WHAT DO THEY WANT?
After interviewing a handful of potential end users, two distinct user personas emerged.
Paul Jefferson
68 years old
Lives in Omaha, NE
Retiree
Recently Widowed
“As an elderly, computer-illiterate retiree, I need an easy way to search for and apply for jobs so that I can keep myself busy and active while establishing income to help me live out the rest of my life without worry."
After a long career of operating a local grocery store, Paul retired from work. But after his wife passed away and his savings dwindled from her hospital stays, Paul wants to find a part-time job so that he can stay busy and active while making a little extra cash. He never had to use a computer in his career, so online job portals and application methods are difficult for him to navigate and understand. He needs a simple website that allows him to search and apply in just a few clicks.
Jennifer Langston
39 years old
Currently experiencing homelessness
Former waitress
“As someone currently experiencing homelessness, I need a quick and easy way to search for jobs so that I can rent an apartment and get on my own two feet again."
After losing her job as a waitress at a restaurant in Miami, FL, Jennifer is currently experiencing homelessness. She is searching for a job in an office environment, so needs to be able to connect with the jobs that are hiring via online applications. She does not have consistent access to reliable internet, so needs a mobile app that allows her to download interesting position descriptions for application later on. She is eager to find a new job soon so that she can afford an apartment she has already picked out.
COMPETITOR AUDIT
After researching competitors on the market, I found that there are not many solutions for the problem identified. The below three direct and indirect competitors were selected as they are leaders in their respective markets, and are mostly targeted toward older audiences. As such, their designs include easy search, large font, and understandable navigation. Ideas for replication are highlighted.
Strengths:
-
Features jobs for individuals over 50 years old, only
-
Included resources for resume writing
Weaknesses:
-
Text is lengthy and jumbled
-
No easy apply option
-
Many broken links
Strengths:
-
Includes in-depth filters
-
Easy Apply makes applications simple and fast
-
Consistent design ensures users know what to expect
Weaknesses:
-
Text heavy
-
Amount of options and information can be overwhelming
-
Jobs are tailored to younger users
Strengths:
-
Designed for older generation
-
Sleek design with large font, lots of imagery, and obvious calls to action
-
Look and feel reflected users
Weaknesses:
-
Requires account to participate
DESIGN PROCESS
INITIAL DESIGNS - WEBSITE
After defining my target users, identifying main competitors, and sketching out several potential designs, I began wireframing the designs the users expressed as being the most useful.
Home Screen
Design inspiration for the home page came mostly from Airbnb's intuitive design. Based on user insight upfront, I knew an interactive map had to be included, along with "property cards" with key property information along the side and overlaid on the map as users clicked around at available pin points.
Users can easily save properties to their "Favorites" by clicking or tapping a "heart" icon, and can then quickly tab between their saved favorites and available properties, based on their filters.
"Learn" Pages
To cater to target users who search for apartments in a city they don't know much about, I created a separate "Learn" page with a range of city options. When users select a city, another page can pop up to show key city information, inclding details about different neighborhoods.
This page can be built out to include a blog with tips and tricks on moving, budgeting information, and other resources for first-time renters and renters moving to a new city.
Property Descriptions and Tour-Booking Pages
When users select a property they're interested in, they are taken to a product description page, which lists more details about the property, and allows them to continue the user flow to book a tour, view floor plans, virtually tour the apartment, share the property with a friend, submit an application, and contact the property manager.
When selecting a tour time, a pop-up activates to allow users to select available touring times to best fit their schedule while giving them control. After submitting, another pop-up activates to show confirmation details.
INITIAL DESIGNS - MOBILE
I created a seamless responsive layout for mobile phone users, which are a majority of this particular products' target users.
Home Screen
On mobile, I prioritized the map, since target users cared most about seeing the location of each property. Users can pinch and drag the map to zoom and move. Interactive pins are tap-able and can be saved instantly, like on the website. Tapping on each property takes users to a detailed property screen, and a list view can be accessed by dragging the bottom overlay screen up.
"Learn" Screen
The mobile version of this page is similar to the website. I decided to show all information on one screen, instead of linking each city to another screen. The city "cards" are tap-able and the information below auto-populates depending on which city is selected.
USER TESTING
I shared the low fidelity prototype with some users from the original group of target users from the research stage to get feedback before creating the final designs. Overall feedback was positive, and everyone could complete the task of selecting a property and booking a tour. But small adjustments were made to several pages that included a way to see more photos on the property description page, and a way to quickly add booked tours to calendars. After several iterations with this group, I continued on to the final mockup and high fidelity prototype.
FINAL DESIGNS
Web
Mobile
