Sketches right through to final designs

When capturing ideas I prefer to go low-fidelity and sketch ideas on pen and paper to generate as many concepts as possible. From there, I will either produce wireframes or jump straight into the design and rapid prototyping process to validate ideas and assumptions.

Wireframes & information architecture

In the initial stages of the project, basic wireframes were created to give consideration to structure, individual page elements, user-flows, etc. It also helps by ensuring the information architecture is accurate and the right content is on the right screen.

Site observation and user interviews

As part of the discovery phase, we visited a number of construction sites to observe the working environment and spoke with people who would be using the app. The insights we gathered from user feedback and being in the trenches was the app needed to perform well in a fast-paced, noisy, dusty, dangerous and low light environment.

Landing screen and navigation

By separating the sign-in and registration process it makes it easier for users to start using the app. It also removes clutter and unwanted user interface elements from the screen. Navigation is separated into primary and secondary action so people can quickly find what they’re looking for. Credit: Illustrations produced by Ocean Design.

Sign in concepts and exploration

During user-testing, I tried out a number of sign-in methods from a single sign in (SSO), email and password, and email only with a verification link to provide access. Simplicity (and removing online privacy concerns) proved email and verification code was the prefered option.

Getting started (onboarding)

To help people get up and running as quickly as possible there’s a 3 step onboarding process. By telling us a little bit about themselves we recommend the most common risks associated with their trade.

List view or Grid view

Because the view of all the risks (and the risks themselves) is the workhorse of the product I designed a couple of variations of this view. The most popular concepts were “List” and “Grid”. During the user testing session, it became pretty clear there was a need to give people the ability to choose the layout that worked best for them.

Dedicated health & safety risks

Individual health and safety risks are concise and present the facts in easily digestible chunks of valuable information. Structured in a tip-based approach for easier recall and to allow for people delivering the information to others easily in a group environment with confidence.

Drag n drop

To provide people with more control (and the ability to customise risks in an order that makes sense to the way they prefer to work) we introduced the ability to drag and drop risks to help prioritise them on screen. When you combine to drag and drop with the ability to hide/show relevant content you have a highly personalised and uncluttered reference tool.

Clear user feedback loops

Clear and concise user feedback is provided to make people aware something has worked, or the steps they need to take to correct an issue. Great user interfaces should have a “no dead-ends” philosophy and provide options on what next steps the person could take.

Rapid prototyping and user testing

From wireframes, I created rapid prototypes using Sketch and the Craft plug-in from Invision. This allowed me to share the design with the wider team, collaborate with developers and conduct user-testing to improve the overall design and flow of the app. From a development standpoint, developers could inspect the code to help inform how to build out the experience and could see how the user-flows and interactions were designed.

Final design

Before going to launch I created a number of mock-ups of the app for the marketing team to use. The images were used in email, facebook, and twitter to help promote the new app and to increase early adoption numbers.