top of page
Group 7567.png

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.

(Current website)

(My page design)

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.

My First Board - Frame 4 (2).jpg
Screen Shot 2022-05-31 at 10.14.49 AM.png

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.

Waire draft_edited.jpg

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.

bottom of page