The hard skills that support us as we advocate for the end user.

UX design was a natural transition after 15 years as an illustrator, and as a graphic and puplication designer. I learned the discipline of templates and cohesive blends of design elements. Illustration taught me to be a storyteller through visuals. And an undergraduate class, Human Factors for Architecture, taught me to design for people rather than for ego.

MarchFIRST was my first opportunity as a UX designer, and whas where I extended what I had learned through my Master’s classes. The “marchFIRST style” can be seen in my work today although greatly evolved. It is also where my path to a career in enterprise applications started.

Through research, best practices, empathy, and experience we have a vision of what the user needs to do their best. Our deliverables are what enable us to communicate our vision to cross-functional teams and stakeholders. Product solutions are better the more pre-design collaboration there is, and the more deliverables we provide. But projects move ever faster, and teams won't wait, especially with Agile.


Schematics

I consider schematics as the lingua franca of cross-functional product teams. It is difficult to imagine how else this information could be delivered. Schematics with annotations are still appreciated by Engineering and QA, but there is not always time to implement them. This style of annotations is a marchFIRST style I still reference.

Figma and Sketch have replaced other tools the last few years. I particularly like how easy Figma makes using the same file for schematics and for prototyping.

Although the visual design of this set is a little dated, it gives a sense of the detail I put into annotations. How much detail goes in is dependent on the needs of Engineering and QA.


Example of schematic for Yahoo Ad Systems.


Schematics for Yahoo! Ad Systems. (See more 🔎)


Want to see something more recent?

Please contact me if you would like to see examples of my most recent work.


Schematic completed during 2024.


Use Case

I like Shopify’s definition of a use case: “a detailed document outlining the steps a user takes to achieve a goal”. It can be used to document an existing product flow, or to define a new one. Originally geared towards detailed documentation, lately, use cases populate applications like Confluence and Rally. The Agile form has fewer details but includes much of the same information.


Completed form for a use case to launch a console. Includes Date, Description, Authors, Summary, Functional Group, Actor, Preconditions, Success Scenario, Failure Condition, Trigger, Notes, and Steps. Four steps are shown.

Use case form for detailed documentation of existing flows or new ones.


Task Flow

A task flow shows paths through an application based on business logic. At most nodes there are yes/no logic paths, or some other logic that will block or allow a user to continue. While a simple document, it has powerful properties that get cross-functional team members to agree on innumerable issues, especially when the include system inputs and outputs.

Many arguments between other disciplines often stem from task flows that were created in isolation from other stakeholders, or are not available at all.


Task Flow

The task flow style while I worked at marchFIRST. (See more 🔎)


Vision Document

A vision document is crucial to communicate a multi-prong design initiative when an assignment is to design a new product, or to completely reimagine an existing product or service. Vision documents can be more imaginative and showier than a production deliverable, and should be aspirational. Another benefit can be to pull the stakeholders into a different mindset to counter the inertia of an existing product.

As the first user experience designer and de facto researcher for Yahoo! Ad Systems, I was charged with facilitating the evolution of a unified Ad Systems toolset and a streamlined flow. After learning each application, I worked with product managers to focus and blend their product visions into a single conceptual model. I layered usability, flexibility, and control in the interface layout, and included advanced visual interfaces. The process resulted in two documents exploring the interaction and interface of that model. The first was with an assumption of a Windows system, and then the second was for an on-demand web interface.


Vision document for the Windows version of the redesign of the Yahoo! Ad Systems campaign tool. (See more 🔎)


Y! Vision Document for On Demand

Vision document for the on-demand version of the redesign. This second document focussed on the differences, and did not replicate the entire Windows vision document.

Copyright © 2025 Giovanni Bacigalupi. All rights reserved.