macbook.png

Bevcon Construction

This is a project to digitize the construction operations, create the experience to bridge the role of external client and Bevcon staff. Log in and Dashboard page design for client, inspector, trader, admin, and project manager.

Timeline: 1 Month

Role: UX/Product Designer, Researcher

Tool: Adobe XD

 

 

Project Overview

BEVCON Construction & Paving Ltd. is a construction company and their core work includes excavation, asphalt placement, concrete placement, interlocking, precast wall systems, drainage/sewer works and watermains. They service clients in the Industrial, Commercial, Institutional and Residential sectors.

chuttersnap-NMrUtSA7094-unsplash.jpg

I was responsible for the design of the dashboard which faces to both Client and Internal Staff (Admin/Inspector/Trader/Project Manager) to make their collaboration and communication at work seamless and productive without the hassle. I ran 2 rounds of testing to validate and had a constant feedback loop from users and stakeholders to optimize the designs.

In addition, I also created responsive design to provide the experience of devices in different sizes.

Problem Statement

Currently there’s no online platform for clients and staff to work together and check out or update the latest construction status immediately. Staff has to work manually to update the information by emailing each other and it costs too much time.


 

GOAL

The Goal was to digitize the construction operation by building an online platform to allow both clients and Bevcon staff work on the same page anytime, anywhere seamlessly.

 
 

Design Process Overview

1. Research Phase

  • Exploring and understanding the work flow of each role.

  • Understanding the pain-point of current experience.

2. Ideate & Design Phase

  • Rapid-mid fidelity prototyping

3. Testing and Validating

  • Team review and revised design

  • UI considerations and responsive design

  • Quality Assurance

  • Design Annotation

  • Usability Testing

 

1.Research Phase

Exploring and Understanding the Workflow of Each Role

Our team had a kick off meeting with client to understand the relationship and interactivity between each role in this project. I illustrated a user flow for team to better visualize how do they play their role in different scenario.

Understanding the Pain-point of Current Experience

The biggest pain-point is that currently there’s no online platform for clients and staff to work together and check out or update the latest construction status immediately. It’s very time-consuming and inconvenient. Staff has to work manually to update the information by emailing each other and it costs too much time. We aimed to fully digitize the work of project manager, admin, inspector, trader and Bevcon client with features that improve their work efficiency and accuracy.

 
 

2. Ideate and Design Phase

Rapid Mid-fidelity Prototyping

1. Client Login

Client used to have to inspect and fill in the road issue form and send to admin manually through email. Sometimes they can’t get feedback instantly and the format are not unified. To mitigate the confusion for both clients and admins, I designed a simple online form for the clients. Displayed as the first page once they login.

By Searching the request number they can edit the request they sent out easily.

The whole process is simple and easy to navigate and proceede.

  • Login → Create new request → Add new task → Show on map→ Submit Request

  • Search Job# → Edit Request → Resubmit Request

 

2. Admin Login

The Admins are eligible to create new requests on behalf of clients with their permission. As the account is shared to multiple Admins, they will need to go to New Request → From Admin → find the request which created by their co-workers (other admins). The latest request will show up by default.

The map modified by client is designed to be put on the right side of the context which provides an easier way to navigate and match the information.

scroll to see full

Sample picture for scroll box
 
1
After Admin received the request from the client, they are responsible to check the issue and upload the, then choose an inspector (according to their availability) to fix the issue.
2
The accordion function helps admin to differentiate the names of issues easier by expanding and shrinking the content.
3
Submit pre-photo of the road with issue before assign the task to inspector. This makes the work for inspector easier. After completed the task, post-photo will also needed to compare.
 

scroll to see full

Sample picture for scroll box
 
Edit Request - If Admin wants to change the inspector to another one after they’ve assigned the task, they just need to search for the job number, the page they have just assigned will show up.
 
Search & Filter - Search section on the side bar is designed for admin to find some specific requests and download as Excel sheet. User can use the filter function to find the type of requests they’re looking for.

 3. Inspector and Trader Login

The Inspectors are responsible for both assign and complete the task. The firstly assign and distribute the tasks to traders. Then, once the trader completed his work, the inspectors need to check on site and take a post-photo of the road to proof that the issues have been fixed. After that, the task will be marked as completed and sent to project manager to conduct the final review.

 

4. Project Manager Login

After project manager has received the completed task, they will do a final round review to make sure client’s task is completed in a high level. If they’re nor happy with the result, project manager will return the task back, that is to say, they will reassign the task to inspector again. If they’re good with their work, they will inform clients that tasks are completed.

 

3. testing & Validating

Team Review and Revised Design

The Structure Adjustment: a page-based design → a card-based design

In the early prototype did on Adobe XD, all fields are structured to be form-based, with each input field corresponding to a selection/question.

However, after the first-round review and validation, the decision was made to pivot from a form-based design into a card-based one.

The advantages of the card-based structure include:

  • Condensing of information while still retaining usability

  • Easier to navigate and edit process for both client and Bevcon staff.

  • Enhanced clarity of the request creation for client, reducing the chance of getting lost.

  • More succinct than form-based design, easier for inspector/admin to digest the information

In addition, we decided to add a feedback button for user to report bugs with the app and suggestions for the app, as well as a chat box for providing assistance.

new-create request.gif
 

Scroll to see full

Intial Design

Final Design

 

UI Considerations and responsive design

Since the app was to be desktop -first responsive, I researched common desktop UI patterns to come up with two options for the desktop navigation. Both tested well but Option 2 was chosen, as it was the most dominant dashboard UI pattern and had a clear visual hierarchy which standing out the side bar.

Option 1

Option 1

Option 2

Option 2

Mobile & Tablet Responsiveness

 
iPad – 8@2x.jpg
sidebar@3x.png
Artboard – 10@3x.png
sub-sidebar@3x.png
filter@3x.png
 
 
 
iPhone X-XS – 7@2x.jpg
mobile_delete:edit@2x.jpg
iPhone X-XS – 13@2x.jpg
iPhone X-XS – 12@2x.jpg
 
mobile_filter@2x.jpg
 

Quality Assurance

To ensure that our team is providing the best possible solution and experience to client, I conducted the QA test after the website has been built but before launched. I focuses on the “create order”, “create task”, “pending”, and searching” to improve the whole process.

I listed out the issues that I uncovered along the way, and gave the corresponding solutions and suggestion. Then we had a team meeting to have a further discussion.

 

 Design Annotation

 

Next Step: Usability testing