The following images and links are examples of work that I’ve done over the course of my career that should provide a pretty good overview of my capabilities. I’ve tried to add some text to each example to provide context to the work and what I was trying to accomplish. Please keep in mind that some of these were early versions of the work as the finished products were owned by the respective client or agency.
The preceding diagram is an early Visio document that I did for the advertising agency Duffey Petrosky (now DP+) while director of the digital group. This basic process was later converted into the following infographic as part of our onboarding for new clients as well as kick-off meetings with my department at the agency.
To see this document as a PDF – Click Here
For the Verizon project I was asked to provide an overview of what I expected to be able to do for the team as one of the first things that I did. This set the expectation for the rest of the group as far as what I was going to contribute to the project as well as expected outcomes and deliverables.
That document, “High Level Plan for UI/UX” can be seen here as a PDF – Click Here
For me, sitemaps generally start out as bullet lists with a rough hierarchy for the structure of the site that is refined during the course of the project. From there I can build out a formal sitemap either directly from the bullet list using a tool like Inspiration – https://www.inspiration-at.com/inspiration-10/ – or build out from scratch in a tool like LucidCharts or Visio. Click here to see a complete sitemap for one of these projects.
For the Operating Engineers website the client wanted a version of the sitemap to serve as an infographic for a board meeting to illustrate what we were building for them.
To view the PDF version of this file – Click Here
Low fidelity wireframes like the example above were done in Axure and allowed me to create not only the low fidelity wireframes here – but also allowed me to create a clickable prototype once the wireframes were approved and fleshed out. Axure was the tool I was using prior to Adobe XD and then Figma.
The member portal for the Operating Engineers website was done in a similar manner but with a little more detail to more clearly identify the different functional areas of the screens.
You can see the complete set of wireframes here as a PDF.
A more recent example for the Verizon Adaptive Manufacturing project using Figma to build out several different options for an OPC-UA discovery and testing tool. There were several different options presented to the group and from which a high-fidelity mockup and functional demo were created.
To see these files as a PDF – Click Here
The purpose of a high-fidelity wireframe or mockup is to start applying proposed styling and branding to the generic, low-fidelity wireframe to give the client some idea of what the final product will look like before a single line of code is written. The example above contains several possible variations of the home page layout done in PhotoShop based on the approved wireframes and style guide.
View as PDF – Click Here
A more recent example for Verizon had to do with the Energy Transformation project and how we could present information identified in the low-fidelity wireframes as more fully fleshed out dashboards. This included some custom icons designed specifically for this project.
To see some of the other screens that were presented in this file – Click Here
Once the wireframes are created and the layouts are ready for customization and branding during the mockup and prototype phase it is crucial to have a well defined style guide documenting those styles.
The full sized version of this style guide can be seen as a PNG – Click Here
Once these guidelines were approved it was possible to complete the page mockups for final approval prior to going to development for the build.
A more comprehensive style guide for the West Penn health system can be found here as a PDF – Click Here
The time I spent at Plex Systems in Troy was a great opportunity to create a completely new color palette and iconography for the companies 400+ modules, each organized by color and business process. The above image is an early version that was later expanded to include the full range of Plex products.
Another request from the Verizon team was the creation of infographics that were provided to leadership as a high level explanation to what we were trying to accomplish. The example below was an early version of the drone/robotics platform integration process that I was involved in towards the end of my time with Verizon.
To see a PDF version of this Miro board – Click Here