Problem
There wasn’t a good process for notifying the appropriate people of upcoming construction work being done in the area.
Solution
The product automates and streamlines the current work notification process, allows them to do things in real time and puts a more visual focus to the existing process. The system makes it east to enter information to create a notification, approve or reject requested work and see all work happening and pending requests at a glance.
Scope
Our team created 10 main screens with extra states to show interactions.
Final Visual Designs
Step 1: Create a new notification and enter general information about the project
Step 2: Add a location and select planned workdays
Step 1: Create a new notification and enter general information about the project.
Step 2: Add a location and select planned workdays.
Step 3: Interact with the map and draw the area of work and add other important locations.
Step 4: View a final summary of the entered information and enter final details
Work Notification Approval: As an admin, review requested work and then approve or reject.
Dashboard: See all work happening at a given time and perform key tasks
The Team
The team consisted of 2 Business Analysts, 2 Technical Architects, 2 UX Designers and 2 Visual Designers.
UI Styling
The styling of the UI puts a focus on white space and legibility. Titles and call to actions are large and attention grabbing for users who need to create work notifications quickly in the field.
Color
The brands palette is predominantly blue with various shades of grey to balance out the palette. Accent colors like red and green were also used to show importance of information.
Responsibilities
On the project I was in charge of creating the look and feel of the application while following an existing style guide in order to keep consistency with other existing products. I created all of the final comps in Sketch and then created a click through prototype in InVision. For a week I also created wireframes that followed UX best practices based on pre-determined requirements.
Visual QA
Throughout the development process I worked closely with the developers to make sure the final product aligned closely with the final visual comps that were created.
Prototype
A prototype was created in InVision to bring the flow of screens to life for the client. It also became an important tool in the development process to make sure the product was consistent across all screens in the final code.