UX & UI Design

Rebuilding a web app with an extensible web design framework and improved flow.

I began working with the HVAC Business & Technical Institute in 2014 helping on their TechReady Mobile iPad app by making simple icons and consulting on color choices. TechReady is field service management app for HVAC technicians to track their work, communicate with dispatchers and their customers. The iPad app has a companion web-app that, at the time I started, was using a UI kit and a UX flow that wasn’t expanding well alongside their offerings. I was asked to restructure the web-app and create a unique visual identity that would grow with their business.

After a closer look at how the web-app was used, I noticed that some of the commonplace functions were buried in unexpected places. My main goal when creating high-fidelity wireframes to present to the HBTI team was to make these key functions the focus of the app and facilitate access from any page, since dispatchers need flexibility when juggling customer needs and technician schedules. The most substantial changes produced were the “Create” button and the modularization of information categories across the website. The “Create” button in the navigation bar now allows for creating new appointments, customers, and more from any page at any time. Separating each category of information into clear, discrete modules (e.g. customers, work orders, tasks) made finding information much simpler.

Wireframe

Early Calendar Concepts

Final Mockup

The high-fidelity wireframes provided the structural outlines I would use to deliver polished mockups to the project developer. It was clear that readability needed to be a focus when choosing colors and typefaces. Space was also a concern with so much information to be displayed, so I used a typeface with a narrower width. I created a central character (a robot the HBTI team named him Hank) and a brand color to set the app apart in the industry. The brand blue became the staple color in the vibrant palette I selected.

Over the past few years I’ve designed new features like location tracking, in-app alerts and sales proposal presentations. Each of these new features has integrated seamlessly into the existing application thanks to its improved modular structure.

New Send SMS Feature

Managing Multiple Price Books

Handling Edge Cases

New Sales Proposals Feature

Branding & Identity Design

Conceiving a brand identity based on connection.

Rebranding the app became a priority to the HBTI team – moving away from TechReady would help to distinguish them from other entities with the same name. 3C Connect took over as the identity for the project, based on the meeting of the “3 C’s”: customers, coworkers and company. I worked with them to develop a logo from a concept they had in mind and focused on transforming the initial concept into something that would be easily identifiable and unique.

Initial Concepts

First Drafts

Revised Drafts

Final Logos

Business Card

Landing Page & Video Animation

Building out a WordPress and animated explainer video to drive marketing efforts.

The freshly-branded 3C Connect now needed a home where marketing efforts could be directed, so I was asked to manage the website: finding & customizing the appropriate WordPress template, creating written and visual content and eventually creating an animated explainer video.

3C Connect Marketing Homepage

After drafting the explainer video script frame-by-frame with timecodes in an Excel spreadsheet, I hired talent and recorded the voiceover at home in a makeshift soundbooth, then mastered everything in Adobe Audition, removing as much as I could of the omnipresent jet noise lingering in the Seattle sky. I found a template for After Effects to handle a large chunk of the footwork since I would be creating the whole video on my own. I added some more complex animations to these compositions as well as animating some of my own scenes from scratch. I then combined all the scenes, added the audio and backing track using Adobe Premier.

Marketing Materials

Building out a WordPress and animated explainer video to drive marketing efforts.

To back the marketing efforts of the software, I’ve created print pamphlets, marketplace graphics and animated banner ads. I’ve also designed & coded HTML emails with customized (and sometimes animated) images.

QuickBooks Marketplace Graphics

8x8 ft. Tradeshow Backdrop

Tradeshow Brochure

Web Newsletter Ad