Building Connections

How do you create a tool that can benefit everyone in the company, from HR, to engineers, to project coordinators and more? To create a smooth-running machine, keeping everyone in the loop and on track? That’s what we set out to do on ‘Building Connections’.

*Building connections is a pseudonym I will be using for this tool. This project has yet to be released, therefore all branding and final mockups have been excluded. I will be focusing on my role in the process.

Project Goals

To say the company had a lot of goals for this tool would be an understatement. The long-term goal was to build a web-based responsive enterprise system, then eventually build an iOS and android app as well. The tool was created for the Oil and Gas industry with goals to expand to other industries.

It needed to:

• have authenticated experiences for various types of employees vs admins

• keep a record of all employees in the company and their personal information

• manage payroll and finances

• keep track of timesheets, vacation, and sick days

• be a project tracking software for engineering projects

• import engineering drawings, calculate those drawings into a list of materials, and send the list off to procurement

• allow employees to sign up for training courses and view approval from their managers

• track and submit expenses

• track daily logs required by employees on site (this required offline functionality since they are usually without service)

… and more! It needed to do a lot! Here is a flash forward into the future, showing a portion of a user flow I created:

So where do we begin?

I was the design lead on the project, collaborating with the CEO of the company, a project manager, the developers (working both in-house and remotely), and another designer. Taking the high-level direction from the CEO, it was up to the project manager and me to narrow the scope and focus on user needs. Our users were our coworkers. There were roughly 300 employees at the time so this gave us a great user base to test ideas on. With our users just down the hall, we could collaborate and iterate at high speeds, getting on-the-fly qualitative feedback long before reaching development stages.

Usability Testing

When I started at this company the tool had already been a couple years in the making, but they never had a product designer. The result was a clunky experience that left more questions than answers; perfect for kicking off some moderated user testing!

We set up meetings with a person from each discipline that we were hoping to target: HR, project coordinator, engineer, VP of health and safety (who represented the field workers), and the CEO. They had all been using the existing platform for months, so they were well versed in it. We asked them all the same questions, individually, about how they would complete certain tasks, what they thought overall, and what they would like to see in the future. We took their feedback and assembled it into a SWOT analysis framework.

The analysis gave us valuable information: everyone could see the potential for the tool and thought highly of its future, but the way it was in its current state, was not intuitive. It was busy and had a very outdated UI. We still had too wide of a scope and knew that we couldn’t tackle the entire project at once. Between myself, the CEO and the project manager, we filtered down the list into step-by-step pieces. One of the first steps would be to rebrand the tool entirely. It didn’t just need a coat of paint applied to existing elements; it needed a new layout. That’s where I came in.

Rebranding & Wireframing

The old tool looked like it was stuck in the Windows ‘98 era, boxy CTAs and popups, lots of grey, no hierarchy, and simply not something you want to be in your day-to-day work life. This magical all-encompassing tool needed to look snazzy, and with that it needed a rebrand. The old company name didn’t quite fit, so I pitched a few alternatives to the CEO and he was happy with one and we made the switch. I designed a new logo and a style guide, for digital and print.

We decided to start wireframing where all users’ journeys begin - the login and profile set up.

This may look like a lot for a ‘quick set up’ as I referred to it as, but it really was a quick process. I turned the wireframes into a prototype and had our mini-user group test it. They found it intuitive, easy to use, and functional. It captured all of the information the company needed, and this was only something an employee had to do once. Employees had the option to resume at any point to finish filling out their profile, just in case they started it at a busy time in their day.

Using the user flow I showed earlier as a guide, I continued creating wireframes for all of our scenarios. The process was: gather requirements > expand user flow > create wireframes > prototype > review and iterate > create high-fidelity mockups. Due to the complexity of the tool, we spent most of our time working and iterating on the wireframes rather than high-fidelity mockups. As we got further along, we brought in more employees for user testing, setting up interview-style reviews and gathering their feedback.

Here is a high-level view of how the UI looked, along with a sitemap I created listing all of the pages the business planned to include in the tool.

In Conclusion

This project included tonnes of collaboration, with efforts from the whole team and our testers. My role included everything from user testing, gathering and analyzing qualitative data, managing scope, wireframing, prototyping, creating high-fidelity mockups, rebranding and managing the design team. I have since moved on to a new role but this project is still ongoing and I look forward to seeing it roll out one day.