Chris Allen
Challenge
3 weeks
Figma
Add a page to our existing website so that potential California clients may learn more about the Waire program and how Gateco software might benefit their company.
UX Designer
My role
Project time
Tools
What is Gatego
Gatego is a software company that helps businesses manage their yard activity more efficiently. Our software gives users complete visibility into trailer activity, including driver identification, trip history, arrival and departure times, accidents, damage, and technical support.
empathy phase
We acquired information about our California-based clients' needs, pain points, and questions through a series of scheduled interviews. My design needed to address their needs and provide a pleasant experience for our customers.
.jpg)
Define phase
The Problem
The Waire program is brand new, and many businesses have never heard of it, let alone understood what it is or how it would affect their business. Our website does not provide information to clients about the Waire program or how our software can help businesses satisfy their compliance obligations and avoid expensive state fines.
The Solution
Provide information to our clients on the Gatego website about the Waire program and demonstrate how Gateco can help their business achieve its needs in one platform in the most efficient way possible.
IDEATE phase
Information Architecture
At this point, I wanted to concentrate on giving information about the Waire Program to our users in a simple format. To help me brainstorm the order of how the material should be shown on the web page, I referenced..
Design questions
​​
-
Z Pattern (What path will the user's eyes follow?)
-
Hierarchy ( What is the first thing that will grab the user's eyes?)
-
Page Title (What should the page title be so that users can identify the Waire page in the primary nav with no confusion?)
-
Paragraph eyebrows (How can I simplify skim reading for users?)
-
Text Boldening and color ( How can I make certain information stand out to users by using colored and bolded text?
Prototyping
I experimented with a few mid-fidelity wireframes in Figma to decide which information layout was the most efficient.
​
I kept the backend developers up to date with my ideas and wireframes throughout the process to ensure that my designs were feasible and to get input from a development standpoint.
Testing
My high-fidelity wireframe was created through a component library in Figma. The webpage design is currently undergoing usability testing.​
​
(My page design)
Conclusion
Before the website goes live, I'll continue to collect feedback from my usability testing, make necessary iterations, and communicate with the back-end engineers for further processing.