Project Management Web Application

MOKA is a small construction company serving the Bay Area, San Francisco. When I started working as a UX Designer at Moka Construction, I was tasked with helping the company solve their problem of monitoring work progress in multiple job sites' and tracking their crew's accurate working hours and payments. They had been doing the jobs traditionally at the time, which was inefficient considering the long commute between the job sites and the never-ending traffic in the area. I suggested creating an end-to-end web application for MOKA construction company enabling them to remotely monitor work progress in multiple job sites and track crew’s working hours. The app also calculates the crew’s wage payroll efficiently and accurately based on each individual’s working hours.

Project Overview

Role: UI/UX designer, User Research, Visual Design, Prototyping, Usability Test

Duration: 2 months

Tools: Figma, Photoshop

Location: San Francisco

11- Conduct a Usability test to understand how the application works.

12- Iterate the design to improve its functionality for Users.

13- Create a mock-up and high-fidelity prototype in Figma

14- Conduct another Usability test to see the web application functionality.

Empathize

Define

Ideate

Prototype

Test

1- Conducting User Research to understand users' behaviors, feelings, and problems.

2- Developing personas based on User Research.

3- Create a journey map to showcase the steps a user takes to accomplish a goal.

4- Identify the users' pain points based on user research and journey map.

5- Develop the problem statement

6- Develop the goal statement

7- Create a site map for the web application.

8- Conduct a competitive audit

9- Create paper wireframes

10- Create a digital wireframe and low-fidelity prototype.

Design Process

To understand what emotions, behaviors, and processes project managers experience to monitor their crew and work progress in multiple job sites, and calculate their wage payrolls, I conducted interviews with five project managers to identify their pain points and seek solutions for their real needs.

User Research overview

Interview Questions:

Pain Points:

1

2

3

4

MOKA Construction managers need to commute long trips between various job sites to monitor crews in multiple job sites. The process waste a lot of time due to heavy traffic in Bay Area.

They need to calculate material costs, taxes, and crews wage payrolls separately to see what the net profit of the company from each project is.

They usually are not sure about the accuracy of crews working hours because sometimes they need to trust what their construction workers report.

They need to track work progress in each job sites to see if crews reported working hours makes sense with the work progress.

Persona:

Sean

"I wish I could ensure that my crew is at the job site on time without me having to be there in person and keep track of their working hours."

Problem Statement:

Sean is a project manager at Moka Construction Company who needs to monitor and document the crew's working hours and work progress in job sites remotely because he cannot be physically in multiple job sites.

Goals:

• Make sure my workers are present at the job site on time.

• Keep track of their working hours

• Be able to monitor workers without me having to be physically at the job sites.

Frustrations:

• It is difficult to commute between job sites to make sure my crew is doing their job properly and efficiently.

• I cannot make sure what time my workers arrive at the job site without being there in person.

Scenario:

Sean is a construction coordinator in a small size construction company. He has a busy and demanding schedule. He needs to make sure all crew and staff in different job sites are doing their work properly and efficiently. He is responsible for providing materials for each job site and also documents and reports workers' working hours to the company's accountant to pay them hourly at the end of the week.

Age: 36

Education: Ph.D. in Architectural engineering

Hometown: San Francisco

Family: Living with his girlfriend

Occupation: Construction Coordinator

User Journey Map

to keep track of crew's working hours at a job site and monitor their work progress.

Empathy Map

To get a deeper understanding of our users, I visually mapped out users' thoughts, feelings, actions, and aspirations. This empathy map provides a holistic view of the user's mindset and helps me to step into the shoes of the users, facilitating the development of products and services that resonate on a more personal level. Through the synthesis of qualitative data, the empathy map guided me to create more empathetic and user-centric design solutions.

Problem Statement

Goal Statement

Our Construction management app allows users to monitor their crews across multiple job sites, recording working hours, and work progress. Using the app significantly impacts their efficiency, eliminating the need for lengthy commutes between job sites and the guesswork associated with assessing crew performance.

Sean is a construction coordinator at Moka Construction who needs to track their crew’s working hours and work progress remotely because he cannot physically be in multiple job sites. He needs to report the crew's working hours to the company accountant who needs to pay the crew weekly.

User Flow

This user flow shows the path a user takes on the app to check crews’ working hours remotely.

Competitive Analysis

I analyzed key objectives, marketing profile, overall strategy, and other factors including pricing, website contents, visual design, and accessibility in two direct and two indirect competitors, and created both SWOT and UX analysis. I found their common weakness in their expensive services because they require both managers and crew to install the app and register. What differentiates our app from our competitors is its affordable pricing, so that only construction managers need to register to use it for unlimited crew numbers.

Gaps

• Accessibility in all four time-tracking apps needs improvement

• Communication could be improved by adding audio features

• Inclusivity is another important feature that needs improvement, such as including more languages.

• The available time-tracking apps are expensive. There is room to decrease the costs and offer the same services at lower prices.

Opportunities

• Provide a more accessible time-tracking app for construction companies by adding some accessibility features like audio-to-text or screen readers

• Provide a lower-price app

• Include more languages in the app.

• Provide a live voice message feature

I started wireframing to design an app that simply helps construction managers track their crew’s working hours on different projects and monitor their work progress. The process helped me visualize what the app needs and how its features work in reality.

Paper Wireframe

Digital Wireframe &

Low-Fidelity Prototype

Creating a low-fidelity prototype enabled me to construct a comprehensive user flow that effectively addressed and resolved all identified pain points. This iterative process allowed for a detailed examination and validation of user interactions, ensuring that the final design solutions were both intuitive and user-centric. Leveraging this approach facilitated collaborative feedback, streamlined development, and paved the way for seamless transitions to higher-fidelity designs, ultimately contributing to the overall success and user satisfaction of the digital products I've been involved with.

Goals:

- Determine if the project management app is difficult to use and if users can monitor their finances, work progress, and crew’s working hours easily and quickly.

- Determining if there are other features users need to be added to the app.

Moderated Usability Study

Research Questions

• How long does it take for construction managers to check their crew on a job site using the app?

• How easy and precise is the process of monitoring the crew’s working hours using the app?

• What can we learn from the steps users take to check the crew’s working hours and/or presence on a job site?

• Are there any parts where users get stuck or frustrate them?

• Are there any features that users would like to be included in the app?

Key Performance Indicator (KPI):

- Time on task

- System Usability Scale (SUS)

- User error rates

Affinity Map

Pattern Identification

1. It was observed that 3 out of 5 participants wanted to see the history of working hours on each crew member's pages. This means that There is a need for more information in the crew section.

2. It was observed that 4 out of 5 participants mentioned confusion in navigating to the total cost section. This means that I need to make some changes in expenses and total cost navigation.

3. It was observed that 5 out of 5 participants felt confused in the project section due to the wording of buttons and provided info. This means that the project section should be reviewed and adjusted based on the participants' suggestions

Insights

1. Based on the theme that: There is a need for more information on the crew page from previous analysis, an insight is: to review the Crew page and add more info based on participants’ suggestions.

2. Based on the theme that: there is a need for some changes in expenses and total cost navigation, an insight is: to review the navigation to the total cost page.

3. Based on the theme that: the project page needs adjustments based on the participants' suggestions, an insight is: to review the project page for rewording, adjustments, and potential missing info based on participants’ suggestions.

Create Mockup &

High-Fidelity Prototype

What have I learned from this project?

Research matters: Gathering insights from actual users through surveys was crucial for adapting the product to their needs.

Personas guide impact: Knowing user needs helped me in crafting a seamless, intuitive experience.

User feedback is key: Testing and evaluating users' input throughout the process allowed me for early identification and resolution of issues.