Onsite
Project Overview
Context: Onsite is a construction and property management company based in Miami looking to achieve efficient task management via their mobile app.
The Problem: Their existing app has performance and design problems, including long load times, UI bugs, and unconventional and inconsistent design styles.
The Brief: Redesign the mobile app to enhance the visual design and to better follow standard design principles. The business would also rebuild the app from scratch to improve the slow load times and other performance issues.
My Role: Product design
Design Process
I started by conducting an audit of the existing app design. This gave me a good baseline for the app’s requirements. I also took note of the existing design problems:
App Audit:
Next, I researched existing construction management software to see if there were any existing trends or design patterns the users may be accustomed to. I also took note of their capabilities. A common design pattern I identified was the use of a floating action button to add a new task. A common feature they used was checklists for managing tasks. Another feature that was applicable to Onsite was allowing for the annotation of photo attachments. I marked relevant aspects of the competitors’ designs with a star as seen below.
Competitor #1: iNeoSyte Construction Reports App
Focused on projects and reports. Is designed for use directly on the field.
Competitor #2: Project+
Project+ by Timesheet Mobile offers a messaging feature and checklists for tracking project progress. Like iNeoSyte, it has a floating action button in the lower right.
I then outlined basic requirements for the app in the form of user stories to get myself in the mindset of the user and keep their goals in mind.
User Stories:
As a site worker, I want to easily see my urgent tasks, so that I can quickly prioritize my next actions needed.
As a site worker, I want to see all tasks that are assigned to me, so that I understand my complete workload.
As a site worker, I want to see what site a task is for so that I know where to go to get it done.
As a site worker, I want to mark a task as complete, so that my manager knows it is done & I can focus on the next task.
Once I had the basic requirements down, I was ready to create a user flow. This guided my page creation and got me thinking about where content and functionality should be available.
User Flow:
While designing the mid-fidelity “New ticket” page, I devised several different options for selecting the incident type, a few of which are shown below.
Given that there would not be so many incident types, I went with an approach similar to option 1.
Final designs
