Konstruct_Header.jpg
 

Konstruct

The construction industry primarily relies on word-of-mouth recruitment, since many jobs come up last minute and require quick turnaround times. Current traditional networking sites in the construction market lack empathy. Their time-consuming profile setups do not lend themselves well to booking jobs on the go, and many online applications often go unanswered. Konstruct reimagines the traditional job search process in a way that streamlines how contractors and workers navigate the job market. Ideally, they wanted both mobile and desktop platforms; however, aware of the project’s schedule constraints, my team was to focus on mobile, and only move to desktop if time permitted.

My Role: UX researcher, lead visual designer


Research

In addition to some data Konstruct had already collected, we conducted some field interviews of our own. We mapped out users’ behaviors, goals, and pain points and put together 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.

Konstruct 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

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.

 

(L: Jess; R: Emily)

 

Determining Product Features

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.


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 Konstruct 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. Konstruct opted for board #2.

 
Konstruct Mood Board 1.png
Konstruct Mood Board 2.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 desktop, 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.

 
StyleTile_wotitle.png
 

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.

 

Desktop 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 screens for desktop, which received incredibly positive client feedback.

Web.png

Testing

With a clickable prototype, we conducted 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. Participants were confused on how to switch between profile modes, or that they even could change modes.
2. Job post form is still a tedious process.
3. No confirmation for job postsparticipants did not know if a job post had gone live or was still a draft.

 
KonstructMuralAffinityMap.png
 
 

Next Steps

Based on client feedback and usability test findings, our next steps would be to completely build out contractor mode and desktop 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