HCSS Construction Software is a B2B software company that provides solutions for construction companies to manage their workforce, contracts, and equipment. Employee App a mobile app that helps construction laborers clock in/out, keep track of weekly hours, and receive schedules from their managers. This application is available in iOS and Android versions.
My responsibilities for this project involved initial user research problem scoping, as well as UX/UI design.
UX/UI Designer
Interviews
Whiteboarding
User Flows
Wire-framing
Mid-High Fidelity Mock-ups
12 weeks
Figma
Whiteboard
Confluence
The HCSS Employee App has been revamped and launched in the previous years, with continuous struggle to foster consistent adoptions from its users within the construction industry.
The Challenge
How can we elevate the Employee app to become more engaging and exciting for our users?
The Solution
Build trust by increasing transparency of user's recorded hours and fostering positive emotions through color psychology.
Business Goals
As an app with large potential but unfortunate luck with gaining traction, the business challenge for this project was creating an enticing application that would bring value to our target audience: construction laborers.
Understanding our Users
To discover what would be valuable, I sought to learn more about our users through a series of SME (subject-matter-expert) interviews with the project manager and development leads of Employee App. As someone who goes onsite to interact with our real users, the project manager served as an excellent proxy by providing insight into the typical daily responsibilities of construction laborers, as well as their existing struggles with the app.
Interview Questions
From these interviews, I collaborated with the PM and dev lead to identify and document the key goals of our users into a singular persona.
Male | mid 30's | Limited tech experience
Primary Goals:
• easily clock in/out for work each day
• know what their schedule is for the day
Secondary Goals:
• make sure he submits the correct hours for each day
• update his skill certifications so he can get more jobs
Subsequently, we translated this needs into 3 primary goals that we believed would bring value to the user in their day-to-day work.
As construction laborers, much of their day is spent outdoors, completing various jobs. Recording one's hours via an app can easily turn into feeling like a way for your superior to keep tabs on you. The existing UI branding colors for the app did not help.
Original Employee App Screens
As part of the first goal, I brainstormed new color paletters for the Employee App branding. Researching into color psychology, I settled on a blue, with light and dark theme accents to promote trust and serenity, while maintaining a more masculine feel since the majority of our users are male.
To complement the blue, I selected a vibrant yellow, which would bring attention to important areas on the screen, while promoting a positive and happy emotion.
These colors were also tested in various light and dark outdoor environments to account for accessibility.
From the user insights, I brainstormed with a fellow UX designer on what information would be most important to laborers. We wanted to place this onto the main landing screen of the app to reduce the amount of navigation required to discover relevant details. Ultimately, we decided on a "widget" approach that would allow future modules or functionalities to be added in a clean and systematic way.
Whiteboarding Session
Keeping in mind that most laborers have limited tech experience, I strove to make actions more clear by illuminating what was tappable within each module. Shaping the widgets to look like buttons, as well as adding a drop shadow contributed to showing a "tappable" element on the UI.
Initial Widget Wireframes
As part of this redesign, I created a new notifications section within the app to increase transparency of the user's work and time card status. This would also facilitate communication between the laborer and their manager.
Initial Notification Wireframes
Throughout the rest of the modules, I continued to collaborate and gather feedback from the project manager and dev lead on the designs, iterating and refining until the designs are development-ready.
Original Employee App Screens
As our user clocks in, the home screen changes to start recording their time. When they have not taken their break, the banner will become yellow, drawing attention to the reminder. When it becomes close to clocking out, the banner changes to dark blue to signal ending the day.
Additionally, if the user is clocked in for overtime, the banner becomes red to indicate warning.
When tapping on Clock In, the user selects the job and any additional information needed for starting the job. Then, as the timer starts, there is a timestamp that updates throughout the day, keeping the user aware of his work hours. Lastly, after clocking out, the user can fill out the required legal questions before submitting their time for the day.
To view all the modules designed, check out this prototype:
👋🏻 Thanks for reading!