Nick Dauchot
Product Designer
Made with

TOWING ASSISTANT MOBILE APPLICATION

My Role: User Researcher and Visual Designer

Methods: Contextual Inquiry, Personas, Wire-framing, Prototyping, Design Communication

Client: [confidential]

Project Duration: Two months

Output: Specification Document

Synopsis: Towing a trailer for the first time can be an intimidating process. Electronically accessing trailer breaks requires precise measurements and a misunderstanding in this data could lead to trailers detaching from trucks, or not braking at all, posing a serious safety risk. Weather, trailer weight, luggage weight, and road conditions are just some of the variables that need to be considered.  A leader in towing equipment wanted to design a digital experience to relieve users of this stress

Problem

Hitching up a trailer is tough

Attaching a trailer to a truck can be a difficult and stressful process for beginners. The biggest issue being in the brakes. When towing a trailer, it's absolutely necessary that the trailer's brakes be properly wired to the trucks. Our client wanted to create an app to help remedy this issue.

Approach
TOWING ASSISTANT MOBILE APP

Contextual Inquiry

Research Goal: Understand common pain points and attitudes  related to towing.

Contextual Inquiries were carried out to understand the needs of people trying to tow a trailer. I rode along with four people and built out a conceptual model of the process they took to hitch their trailer to their truck, drive it, and arrive at their locations. Through this experience, I noted needs, attitudes, behaviors, motivations, and frustrations and learned about some common pain points surrounding calibrating brake controllers. This process spawned two design personas for the amateur and experienced truck driver, which moved us into the wire-framing portion of the project.

TOWING ASSISTANT MOBILE APP

Wire-framing/Design Specification

Over the course of seven sprints, I slowly build out the wire-frames for the towing application using the program Axure. For every screen I was careful to note the precise name and description for every element on screen as well as common screen elements that would be carried out throughout the application. After every sprint, we had check-in meetings with project stakeholders who provided feedback to help us iterate on the visual design of the product.

TOWING ASSISTANT MOBILE APP

Usability Testing

The specification helped inform a prototype which I usability tested with three participants. I broke the usability test into four distinct use case scenarios including adding a trailer, adding a device, navigating the settings menu, and encountering and diagnosing an alert. From these usability tests I created an experience map which highlighted areas of frustration or confusion. This experience map helped inform fixes that needed to be made in the next iteration of the prototype.

Result

Specification Doc and High-Fidelity Prototype

Working with a visual designer and a design principal, I created a massive specification document, a high-fidelity Invision prototype, and a style guide to my client and their development team. This document contained all requirements to get the app through development with all interactions and visualizations precisely specified.


Tekonsha "Edge" App, available on the App Store:
https://apps.apple.com/us/app/tekonsha-edge/id1500400264

Lessons

Designing this app was a  lesson in building a mobile application from the ground up. Focusing on the needs of towing amateur and professional users, we were able to create an experience that made it easy for anyone to start towing safely. Safety was our primary concern as the context of use was on the road.  We put great care into making sure that while the user was driving, the app would demand as little attention as possible, but was as helpful as possible while setting the trailer up.

While designing the wire-frames for the app, it was extremely important to be as specific as possible about every element on every screen, and to build consistency across page elements especially as they relate to a grid. Header elements, labels, inputs, and graphics had to have clearly defined, pixel-perfect, characteristics. This made it easier for developers to simply grab elements from the specification document and focus more on development of the app as opposed to aligning elements on screen. Creating wire-flows and the Invision prototype helped build confidence in the design and communicate design effectively and coherently to stakeholders and developers.