Sketches right through to final designs

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

Wireframes and 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.

Design Thinking methodology

The Design Thinking methodology gives product teams the ability to solve complex problems, big and small. Design, technology and business collaborate to deliver great products that help people and generate revenue. You get the stability of the five stages, with the flexibility to move between them in a non-linear way as needed.

Site observations

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.

User interviews and usability testing

During our user interviews, we found the Risk Cards fell into two main groups (or personas). The “Presenter/Tutor” would use it to share knowledge and give relevant updates to their crew.  And the “Work/Audience” would receive the information and would have a chance to ask questions or have a group discussion.

Clearly defined design principles

At the beginning of the project, we agreed on 3 basic design principles to act as our “North Star” when designing the user experience.

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 usability testing, I tried out a number of sign-in methods: Single Sign-On (SSO), email and password, and email with a verification link. Simplicity and removing privacy concerns meant email with a verification code was the preferred 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 and 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 and 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.

Sharing and feedback

To validate your assumptions and to measure how well (or poorly) you solved a customer problem you should always ask for feedback, ideally after they’ve interacted with a feature. This is an excellent way to request feedback and potentially a great way to recruit participants for usability testing.

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.

Final design

Before launch I created a series of mockups for the marketing team to use across email, Facebook and Twitter to help promote the new app and drive early adoption.