Archslate
A job marketplace for the architecture industry
.png)
Overview
Background
Archslate was a start-up founded in 2021 through Harvard Innovation Labs with a vision to revolutionize the hiring process and portfolio hosting. The product was a job marketplace designed specifically for architecture, engineering, and construction job seekers.
Problem
Archslate was attracting new users, but many had issues with the platform and found the interface confusing, eventually leading to drop off and abandonment of the product in many cases. Archslate needed a user friendly interface that would encourage continued engagement with the product and better retain users.
Goals
-
Streamline and gamify the onboarding process to incentive users to complete their profiles and portfolios
-
Improve the layout and visual hierarchy of the site to increase usability
-
Implement a new brand identity that is clean, modern, and eye-catching
Role
UX Designer
UI Designer
UX Researcher
Tools
Figma
Photoshop
JIRA
Hotjar
Timeline
July 2022-July 2023
Discovery
Research and Understanding
I spent my early time at Archslate discussing pain points with the founder & CEO, who had been gathering feedback from users to improve the product. She told me that users were dropping off during onboarding, and that if they did finish creating an account, they were very rarely completing their user profiles. Though the job posting and application processes were still in early development, it was also becoming clear that users were not drawn to the format, and did not return frequently to the site to look for jobs.
​
While synthesizing my CEO’s findings, I studied Archslate’s current site on my own, and took notes of potential pain points that could be contributors to user drop off. Archslate seemed simple at the outset, but revealed itself to be a very ambitious product- a job seeking platform that aspired to be as useful for full time job seekers as it was to freelancers and contractors.
Target Users
-
Job seekers in the AEC industry (architecture, engineering, and construction)
-
AEC Industry employers
Competitive Analysis
I conducted extensive competitive analysis of other job marketplaces and talent showcase platforms such as Greenhouse, Behance, Dribbble, Braintrust, and Contra and would continue to dive deeper many times as the scope of work grew. For each feature we wanted to add to the platform, we would begin our research by analyzing other established companies who provided a similar service before designing a prototype to test with users.
​
My findings from competitive analysis can be synthesized into the following major points, broken up by product feature:
​
For onboarding ​
-
A checklist clearly lays out objectives and reduces cognitive load while gamifying the onboarding experience
-
Using persuasive language like "strong", "intermediate", and "weak" helps the user view completing a task as improvement rather than busy work​
​​
For job posts and applications
-
Feature the main information an applicant wants to see at the top of the post, the description can follow
-
Break up monotony with sections to eleminate extra whitespace and help job seekers stay focused
​
For user and company profiles
-
Design a profile that is not dependent on all information being filled out. Respect your user's time, and be realistic about the effort they will be willing to put in.
​
Using these findings as a jumping off point, we moved forward with an ambitious scope of improvements we wanted to make to the platform.
Personas
Our main persona was Penny Green, an associate level architect in her 30's looking for work. To expedite my work, I used Penny's persona as the prototype for the user profile redesign. She was based on the feedback we had gathered from users, and her goal was to share her work and find a new role. Penny showed up in every iteration of Archslate, some of which can be seen below.
It was a top priority for me to update the site with speed an efficiency. Although we did continue to conduct more research as the product progressed (more on that later) we decided to move ahead to the design phase with the research we had. We wanted Archslate's current clients to be able to give feedback on the new version as soon as possible, and planned to gather more feedback from there.
Design Process
Archslate would have two sides of the platform to design which we referred to as
-
Talent (job seekers)
-
Company (job posters)
​
We started with the talent side, since that encompassed a larger portion of our user base.
​
Note: We were simultaneously working on a rebrand that went through a few iterations during the user experience design process, so there will be a wide variety in the style of the product images I'll be sharing. To keep things from getting too confusing, rebranding will have it's own section.
User Flows
I started off by mapping out the steps of Archslate's current onboarding flow, and then created a new suggested flow based off of insights from competitive analysis.
​
We wanted to make onboarding as quick and easy as possible, so I suggested we add the option to sign up with already existing accounts on other sites and eliminate some steps from the initial form. Research showed that the less time it took a person to complete a task, the more likely they were to decide they might as well complete it.
Original Flow
Suggested Flow
With most aspects of the product after onboarding, we skipped user flows entirely and went straight to low/mid fidelity wireframes. My team found user flows to be too abstract and slow moving, and preferred to see the flows on actual pages.
​
Although I would have loved to have more time to focus on formal research, moving straight into wireframes and prototypes early in the design process was a workflow that saved us time worked well for our tight deadlines.
​
User flows
Empathy Maps
Affinity Maps
Sketches
DEADLINES
Wireframes
Creating wireframes in Figma was usually my first step in the design process after discussing our goals with the CEO. I would keep these goals in list format and check them off as I designed low-mid fidelity flows to present during design meetings. ​
Log In or Sign Up
.png)
User Profiles
User Profiles
There was a wide range of needs within our target demographic. For architects and interior designers, an attractive portfolio hosting site can be a very important feature. For a construction manager looking for a contract job, not so much. So we wanted to make sure that we were providing a space for portfolio hosting, but not letting it dominate the design space of a user profile so much that it would alienate those who didn't need it
Archslate Original User Profile
The main problem with current user profiles was that people weren't finishing them or using them at all. The reasoning makes sense: People looking for jobs want to apply to lots of jobs as quickly as possible. From that perspective, filling out a profile is just a roadblock and waste of time. The problem was that the platform was only half functional if companies weren't able to get any information about the applicants.
​
We needed to make user profiles feel worth doing for talent. Archslate had a good start with the progress bar and multiple invitations to edit, but too much whitespace and little visual hierarchy drove users away.
An updated user profile right after signing up,
containing little information
An updated user profile after all information
has been added
-
Problem: Little visual hierarchy, overwhelming users with too many options
-
Solution: Added a collapsable checklist that orders profile creating steps and allows users to check off items, given them an agenda and a sense of accomplishment
-
​
-
Problem: Too much whitespace creates little interest or motivation to complete tasks
-
Solution: Dynamic sections that collapse when no info is present, keeping the label clear while not drowning the page in empty whitespace for unfinished sections​
-
​
-
Problem: Although the progress bar is helpful for motivation, it does not give users actionable steps
-
Solution: We added a collapsable checklist with steps that would get checked off once completed for direction and a little dopamine boost.​
-
Company Profiles
For company profiles, we faced many of the same challenges that we faced with talent profiles, the main one being that many users will not complete a profile, so we needed a design that looked as appealing as possible with almost no information.
An updated company profile right after signing up, containing little information
An updated company profile after all information
has been added
Job Boards
We wanted to increase traffic on job posts, so we updated the job board with our new UI.
Our CEO really like the idea of a cloud with applicable filters for industries and a toggle for full-time vs freelance roles as a way to give the job search variety and make it more interactive. I used her ideas as my focal point as I worked on more updates for the job board.
​
-
Problem: Users were not able to quickly apply filters
-
Solution: Made filters always visible, with a clear indicator of applied (black) vs unapplied (white)
-
​
-
Problem: Job posts were taking up too much space on the screen and displaying an overwhelming amount of information on the thumbnail
-
Solution: Made the job post thumbnails smaller and removed excessive information like knowledge requirements, number of openings, experience, etc. This information would be available in the job description, and it was causing cognitive overload for users hoping to quickly skim jobs.​
-
​
-
Problem: Users did not know how to check the status of their saved and applied jobs
-
Created a submenu that allowed all of these pages to be visible as options on the main job board to make them easy for users to find​
-
​
-
Other Additions:
-
Added a Sort By function to allow users to sort by date posted or relevance (based on their skills)
-
Original Job Board
New Job Board
.png)
Talent Application Process
Talent Application Flow (click to zoom)
.png)
The application redesign was more of an interface update than anything. Since Archslate allowed users to apply with one click once they completed their profile, it was a very simple flow to apply to jobs and track application statuses. ​
​
There were two major improvements we wanted to make for users during the job application process. ​
-
Improved visual hierarchy on job descriptions​
-
We accomplished this by dividing the job description into sections with clear headers to break up the monotony. The main section would still allow free text for the ease of the job poster, but typical highlights like skills, salary, years of experience, etc. were given their own section to make them easier to find. ​​
-
-
Easier navigation to check the status of applications
-
We addressed this need by adding a submenu to the ​main job board where users could easily find their saved, applied, and recommended jobs.
-
We also added recommended jobs and featured the job's status (accepting vs not accepting applications) as we had received feedback from early users of the platform that they were features that the site was lacking.
Original Job Description
New Job Description
Original Applied Jobs
New Applied Jobs
Hiring
Hiring flow (click to zoom)
The hiring flow was also fairly straightforward and mostly consisted of UI updates. Below are a couple of examples.
-
Problem: the original design had major components and calls to action, but lacked a cohesive design that helped the user know where to focus their attention.
-
Solution: We kept the applicant's resume and portfolio easily visible throughout the process, and eliminated the Grade field, which took up unnecessary space when there was already a section for notes. ​
-
-
Problem: The user could not update the candidate's status from the page if they wanted to move them backward rather than advance them, without rejecting them entirely
-
Solution: Added a drop down that allowed direct changes to status, which also eliminated excess buttons.​
-
Original Finalist and Offered Pages
New Finalist and Offered Pages
Rebrand & UI Updates
While we were working on improving Archslate's user experience, I was also trying out ideas for the rebrand. Our CEO had voiced concerns that the site lacked personality, and she wanted to start from scratch with a new color palette, typography, icons, and buttons. We kept only the name and logo from the original style guide.
​
As a jumping off point, I created some quick moodboards drawing inspiration from various architectural images and pairing them with complimentary fonts and colors.
.png)
We didn't end up going with any of the moodboard choices.
To provide more options and apply the color palettes in a less abstract way, I used multiple options on a layout created by our graphic designer. The CEO and CTO decided on the third palette shown below, as they felt it was the most professional and clean while grabbing attention with high contrast.
Style Guide
The next step was to create a style guide with all the updates. This style guide started out very simple, but was updated frequently as the product evolved. I found that it made everyone's lives easier if I just operated with the thought "when in doubt, add it to the style guide".
User Testing & Validation
We were continuously testing the product as we designed new features so it was an all hands on deck situation. The CEO, CTO, and I all conducted research and synthesized our findings that I would then turn into design solutions.
User Testing Main Take Aways
​
-
Problem: Companies were not usually seeking individual talent, and overall wanted a dashboard with data visualizations of jobs they had already posted.
-
Planned Solution: We would need to create a landing page that was useful to them to keep them invested in the platform.
-
​​
-
Problem: User profiles continued to be an issue. No one wanted to fill them out. I was very sympathetic to this. When you're applying to jobs, the last thing you want is to be slowed down by needing to create another profile on yet another site.
-
Planned Solution: We needed to find a way to make data entry as fast and painless as possible for the user, and started looking into integrations with LinkedIn, Indeed, etc. to save our users some time. ​
-
​
-
Problem: Users were not uploading their portfolios to the site, which nullified some of the appeal of Archslate. It was meant to be a hiring platform geared towards creators who wanted to showcase their work- with the efficiency of LinkedIn and the artist appeal of Behance or Dribbble, but users were mostly concerned with applying fast to as many jobs as possible.
-
Planned Solution: We would update the UI to be less dependent on portfolio hosting, and accommodate external portfolio links for talent.​
-
We gained some really valuable insights from user testing, and it really felt like we were hitting our stride with the product and chiseling it into the best version of itself.
The Pivot
Through many pitches and meetings with investors, it became clear that there was simply not a huge demand for a specialized job market platform. Most users already hosted their portfolios on their own sites, or they preferred to provide a PDF version upon request. Any job that could be posted on Archslate could also be posted on a broader and more familiar site.
So, while keeping their core mission of providing a unified platform that would improve the lives of AEC professionals, Archslate adapted to the changing market and re-worked their strategy. It was decided that the company would become a productivity and project management platform, since a common issue that architecture projects face is a lack of organization and communication between many different teams. I created a separate cas
e study for the new product, Zenoya; please feel free to take a look on my Work page.
​