Overview

The construction industry primarily relies on word-of-mouth recruitment. Many jobs come up last minute and require quick turnaround times. Upright tasked our team with reworking the traditional job search process to be more in line with construction industry priorities. Ideally, they wanted both mobile and web platforms; however, aware of the project’s schedule constraints, we were to focus on mobile, and only move to web if time permitted.

PROBLEM

Current traditional networking sites in the construction market lack empathy, and their time-consuming profile setups do not lend themselves well to booking jobs on the go. Applications sent through traditional networking sites often go unanswered, so construction workers still depend on word-of-mouth to find jobs.

GOAL

Streamline the way contractors and workers in construction navigate the job market

TARGET AUDIENCE

Business owners seeking to hire workers and blue collar construction workers looking for jobs

TEAM

Emily Wong & Jessica Katz

DATE

3 weeks • Aug—Sep 2018

CLIENT

Upright, NYC agency that guides startups from concept to growth

MY ROLE

UX researcher, lead visual designer

DELIVERABLES

• Personas
• Mood boards
• Comparative analysis
• User flows
• Design process (sketches, wireframes, & visual design concepts)
Interactive mobile prototype
Interactive desktop prototype

 

Research

PERSONAS

Armed with Upright’s previous quantitative research, we conducted some field interviews of our own. We compiled all the results into an affinity map of users’ behaviors, goals, and pain points. We ended up with enough varying data for 4 personas: Jeremy, Steve, Lisa, and Mike.

Here are Steve, an individual contractor, and Lisa, a general contractor.

 

COMPETITIVE ANALYSIS

To better understand what we were up against, we researched Konstruct’s biggest competitors in the job market, such as Thumbtack, Upwork, and Workyard, to see where existing products succeeded and/or fell short.

KEY TAKEAWAYS

1. Allow users to search jobs by specific trades without it being overwhelming
2. Streamline profiles and resumes/portfolios
3. Make toggling between contractor and worker accounts easy and painless

 

USER FLOWS

Based on our research, we found that our target audience fit two main categories: CONTRACTORS and WORKERS. I identified the main tasks each group would need to accomplish with our product and put together some user flows:

Workers need to 1) apply for jobs and 2) create and edit a resume or portfolio.
Contractors primarily need to 1) post jobs, 2) hire workers, and 3) pay workers.

Upright did not think that paying workers through the app was a priority for the minimal viable product, so we dropped the payment feature.

 
 
 

Design Process

With features for both contractor and worker modes mapped out, we saw that there was some overlap. We chose to focus on workers first, so we would have at least one mode completely built out by the deadline.

5 sections crucial to worker mode MVP:

1) onboarding, login / sign up
2) search feature
3) user profile
4) applying to a job
5) posting a job

PAPER SKETCHES

I sketched low-fidelity wireframes for the search feature and user profile, while Jess focused on onboarding and the hiring process. After regrouping and discussing each other’s work, we did another round of sketching, accounting for the additional changes.

When we transferred our paper sketches to digital wireframes, screens started to accumulate. It became difficult to keep track of the features for both modes. I created the Trello board below to keep track of all these features we wanted to include, as well as their corresponding screens.

(L: Jess; R: Emily)

 

WIREFRAMES

With our features outlined, we continued to wireframe the rest of the app and experiment with color. Here are some of my initial wireframes.

The job post form was the biggest challenge. It required so much content that the pages looked messy and convoluted no matter what I did.

I reorganized the form into 4 main sections:

1) details
2) requirements

3) more about the project
4) logistics

By dividing it into 4 mini-forms, including one question per page was much more manageable.

 

MOOD BOARDS

For our first client check-in, I put together two mood boards, so we could get a better sense of the aesthetic Upright preferred. Their only visual design note at our kick-off meeting: NO ORANGE!

While both focus on earth tones, the left board is bolder and business formal with a darker palette, while the right one takes a subtler, lighter Scandinavian approach. Upright opted for board #2.

Konstruct Mood Board 1.png
Konstruct Mood Board 2.png
 
StyleTile_wotitle.png

STYLE TILE

Using our client-approved mood board, I played around with various color palettes, taking on the role of lead visual designer, before arriving at the final prototype.

In order to maintain a consistent look across the entire app from mobile to web, I assembled a style tile to help us focus our design discussions. This lightweight style guide includes fonts, colors, buttons, and a sample profile header.

 

Prototypes

With the color palette finalized, the look of the rest of the app started to come together. As I started to link them in InVision, I noticed a glaring gap in the application process. We were missing a confirmation dialog! There was also no differentiation between “apply,” “applied, and “application pending.” Luckily, it was a simple fix: we included an additional indicator on the job listings pages.

 

WEB VERSION

A couple days before our final deadline, our mobile prototype was pretty close to done, and Jess had taken lead on our presentation deck. I found myself with some extra time on my hands. I put together some web platform screens, which received incredibly positive client feedback.

 
Web.png
 
 

Testing

With a clickable prototype, we conducted 3 USABILITY TESTS with participants who worked in the construction industry. I facilitated 2 interviews and took notes for the other. We organized our findings into an affinity map and noticed 3 themes.

FINDINGS

1. Confusion between profile modes
Participants were confused on how to switch between profile modes, or that they even could change modes.

2. Job post form is still tedious
Some participants found posting a job a lengthy process, but understood why all the fields were necessary.

3. No confirmation for job posts
Participants did not understand if a job post had gone live or was still a draft.

KonstructMuralAffinityMap.png
 

Next Steps

Based on client feedback and usability test findings, for our next steps, we would completely build out CONTRACTOR MODE and WEB PLATFORM.

1. Clarify duality of profile modes (worker vs. contractor)

2. Continue to consolidate job post from. Also look into other ways to simplify it, such as a duplicate function

3. Differentiate between a draft or live job post with more obvious visual indicators