CONVOY UX, UI, VISUAL DESIGN • 2019
Redesigning the Convoy website
Convoy is a promising tech startup based in Seattle which is poised to become the "future of freight". I had the opportunity to freelance with Convoy to redesign their website creating a customer-centric user experience. The project was focused on connecting with their two core audiences, creating a scaleable design system, and applying a consistent visual tone across the entire site.
Project Objectives
Becoming "The Future of Freight" is a bold mission, but Convoy is well on its way to disrupting the shipping industry. After being awarded the Geekwire Startup of the Year, Convoy was in a promising position and they needed their website to resonate with an ever-growing audience. As a freelancer, I worked many late nights and weekends building webpages and a component library to reshape many of the convoy websites.
Tell a more complete story how the company can support both shipping and hauling freight.
Ship early and often. Build a flexible system that can scale and allows for rapid iteration and testing for the pages.
Create an authentic and intuitive user experience to connect with the audience.
Redesign the Convoy blog, careers, about, and press pages to better showcase the people and product behind Convoy
Connceting with the core users
The shipper persona is a logistics or transportation professional (often at large companies like Unilever, P&G, Anheuser Busch) who thinks big picture and strategically. Convoy provides immense value to the shipper giving them the ability to reinvent their supply chain by lowering costs, delivering reliable and flexible capacity, and connecting them to a large network of carriers.
Convoy carriers are the hard-working truck drivers across the country that help move millions of truckloads throughout the year. These drivers primarily interface through Convoy’s mobile app which makes it easy to find, bid on, and haul loads. In researching this persona I found it is important to speak to them as an equal while also clearly demonstrating how Convoy works and the value it will bring to their lives.
Design process
THE NEED TO SCALE
From our user research and working with key stakeholders, I discovered two things: The first is that the majority of users wanted to see the product in action. What would they get if they signed up? The second is that regardless of if the user is on the shipping or hauling side – they are all human. They wanted to see themselves on the page and be talked to in a way that gained their trust.
This lead to the key decision about how to introduce the two personas on the homepage, allowing users to self identify as a Shipper or a Carrier and dive deeper into the different solutions Convoy offered to them.
To meet the rapid pace at which a startup like Convoy moves I designed a modular system for the webpages that allowed for flexibility in marketing messages as well as the ability to test various layouts. This modular approach gave the Convoy team the confidence they needed that even as the website continues to scale, each new page would be built from consistent building blocks.
MOVING FROM LO-FI TO HI-FI MOCKUPS
Working in wireframes helped me iterate on various page layouts and quickly navigate the evolving inputs on the project. Consistency across the website was key and suddenly the homepage started to visually connect in a new way to the product pages, as well as other highly trafficked pages like the blog, about us, and careers page.
By spending the time upfront working through the wireframe components we were able to save a ton of revisions towards the end of the project. The result was the ability to quickly create net new pages, revamp existing pages, and focus on connecting the website to the core users.
VISUAL DESIGN & PHOTOGRAPHY
While the main focus of this project was to create a more defined user journey and consistent user experience, I did enjoy getting the opportunity to bring some visual elements to life on the pages as well. One of the main elements was the introduction of product imagery to the pages. This was a key visual element used to establish trust with the users and showcase the Convoy app.
Another key element I brought to this project was custom photography. In an attempt to humanize the pages and ensure the users see themselves in the page design, I shot a custom photoshoot around Seattle for several of the featured hero images.
Shipping the new webpages
By the end of the project, we had shipped 11 new webpages ranging from the convoy.com homepage to several key product pages to the reimagined blog page. The blog is one of the pages I am most proud of as it moved Convoy off of a third-party site and gave them a wide range of new features like category tagging, search, and featured articles.
In hindsight, this was a massive undertaking as a freelance designer, still working my full-time job, but the opportunity to collaborate with the Convoy team and ship something impactful was great.
Project Takeaways
SEEK FEEDBACK EARLY
This project proved the importance of staying on the same page with the key stakeholders. With so many moving parts the communications between the teams were critical. By providing feedback early on throughout the project we were able to align on the direction and plan next steps with confidence.
DESIGN FOR HUMANS
Don't forget that other humans will be the ones interacting with your designs. This played a large role in some of the design decisions for the user experience of the Convoy redesign - including letting users pick their path from the home page and adding in the authenticity of real photography to the pages.
© 2021 Matt Knorr. All Rights Reserved.