TWO MEN AND A TRUCK®

Project Expertise

Modern web applications

We used modern programming languages and frameworks to develop a web application that allowed TWO MEN AND A TRUCK to not only communicate with their existing customers, but to also funnel in new customers through their free moving checklist.

Custom integrations

This custom web application communicated with internal systems that TWO MEN AND A TRUCK was already using within their business ecosystem to allow the app to stay up-to-date with any changes to user accounts, moving estimates, and more.

Project Contributors

Sam head and shoulders, with blonde hair and white and blue plaid shirt

Sam Oltz

Senior developer

Mike head and shoulders, with blonde hair, beard, and black dress shirt

Mike Bopp

Senior developer

Ashley head and shoulders, with glasses, brown hair, and burgundy shirt with cream cardigan

Ashley Helminiak

UX designer & front end developer

Haley head and shoulders, with glasses, brown hair, black shirt with light denim overshirt

Haley Troyer

UX designer & front end developer

Project Brief

For TWO MEN AND A TRUCK, the movetrac® app is part of a larger initiative to create a more direct line of communication with their customers. They wanted to leverage technology to increase the average conversion rates for all stages of the customer journey. Movetrac® would be positioned at the forefront of a channel-agnostic communication platform for engaging both potential and existing customers. Therefore, movetrac® needed to integrate with existing communication channels. Since movetrac® was also designed for engaging existing customers, it needed to integrate with TWO MEN AND A TRUCK’s internal business systems.

diagram of movetrac entity relationships without labels

What We Did

We began with the business requirements for the project and reviewed the desired outcomes that TWO MEN AND A TRUCK defined. This project was part of a long term strategy to improve every aspect of the customer's digital experience, so we worked collaboratively with the team at TWO MEN AND A TRUCK to align this project with that overarching goal. Out of these discussions, we fine-tuned the design and technical details of the project and also also planned a related mini-app for TWO MEN AND A TRUCK's main site.

With a clear set of project goals, we set out to define the minimum requirements for launching a successful app. These minimum requirements helped us establish development priorities and launch the app quickly, while allowing user feedback to influence development of additional features.

Challenge

Solution

With a modern Javascript frontend like React, we are able to put all our functionality to a single page. No page reloads, no navigation changes.

Challenge

Solution

Using Apollo Server means we were able to stitch together various underlying APIs into a single, cohesive interface for the rest of the app. Using AWS Lambda means no one would worry about infrastructure.

Challenge

Solution

Going with markdown means that non-technical users could make updates without learning HTML. Having continuous integration means their updates can go live without needing assistance from engineers.

User Interface

With an idea of the minimum launch features, we began drafting the app workflow and user interface with wireframes. These wireframes helped us reason through what data should be shown where, as well as the general steps users go through when using the app.

Technologies

Parallel to our work on wireframes, we began working through the requirements for the technical stack. We wanted to determine the technologies that would enable us to accomplish this project's goals. We identified that there would be a dynamic nature of the interactions within the app. These dynamic interactions led us to see the frontend of the app as being a dynamic JavaScript app. Our JavaScript framework of choice is React. Employing React in this project allowed us to build the UI with abstract ideas like modals and sidebars, rather than lower-level ideas like markup and DOM manipulation.

On the backend side of the technical stack, we chose a serverless architecture that would scale to match the usage of the app. Additionally, with the majority of the backend functionality being integrations with other APIs, we chose Apollo Server to power our app's own API.

map of movetrac technology stacks and relationships

Marketing Site

When it came time to build the marketing landing pages for movetrac®, we wanted to carry over the design work we did in React. So we chose to use Gatsby as it allowed us to build a static site without the need to create styles from the ground up. One additional requirement of the marketing site was the ability for non-technical users to update the articles. So we utilized Gatsby's ability to compile Markdown into HTML and put a continuous integration process in place to rebuild the site each time an editor committed changes to the Markdown files under version control.