Air-Tite Products

e-Commerce Website

back end development
ux audit
front end development
mood boards
visual design
usability testing
user flows
low-fi prototyping
information architecture

Air-Tite Products has been supplying the Veterinary, Human Health, and Laboratory market with high quality disposable and reusable hypodermic products since 1926. The company had used its public website to market, sell, and fulfill orders using the ASP .NET Storefront CMS. In late 2018, following a dedicated User Experience and discovery phase, we worked with Air-Tite to fully execute on their vision to redesign their website and delivery a more user-friendly, modern, and satisfying e-commerce experience.

There's something enormously gratifying about seeing a project through from inception to launch while maintaining a pivotal role the entire way through. Traditional agency workflows aren't particularly conducive to this idea because they inevitably begin feeling like an assembly line approach. The Air-Tite website redesign was a refreshing experience as it not only allowed us to continue the UX strategy work conducted in the discovery phase but also to keep that momentum and involvement all the way through to the website launch.

My role in this project

  • Conducted a competitive review of similar services available such as WeightWatchers®, MyFitnessPal® and Noom®
  • Developed an overall user flow depicting service onboarding, food logging and integration with 3rd party services
  • Designed and built an extensive set of high-fidelity prototypes using AxureRP
  • Created a detailed property map that presented technology requirements alonside user interactions within the application
  • Completed a full branding exercise including mood boards, logo concepts and associated collateral
  • Designed various app screens and user flows using Sketch
  • Liaised with app developers throughout MVP process
Mobile app visual design samples
Unlike other weight loss apps, Fitmethod aims to simplify the often laborious process of finding and logging food.

In three simple interactions, a food can be entered into the user's food diary. User behavior is rewarded with achievements and educational content around nutrition. is some text inside of a div block.
Navigation and flow samples
The "My day" dashboard provides users with an overview of their current food diary with macronutrient and exercise activity visualizations.
Visual identity mood boards
As part of the rebranding exercise, I developed initial logo concepts paired with mood boards to demonstrate the corresponding design languages.
High-fidelity prototyping
Using AxureRP, I developed an extensive set of high-fidelity mobile prototypes that simulated key tasks like onboarding, logging food and entering physical activity.
User journey mapping
I developed a hybrid user journey / technology diagram that presented user movement through the app alongside key technology decision points. This was developed in parallel with business modelling.
Competitive review
As part of my competitive review, I diagramed one of the key differentiators for Fitmethod - simplified food logging. In this diagram, the number of overall interactions are compared between MyFitnesspal (a key competitor) and Fitmethod for logging a simple food like a banana, and a more complex food like a sandwich.

Our role in this project

  • Developed mood boards to define overall visual design strategy and style guidelines
  • Prepared initial home page mockups and revised to arrive at a final visual design concept
  • Prepared designs for 25+ screens, extending the final visual design to a variety of static and dynamic screen types, including tablet and mobile responsive views
  • Built the complete set of HTML/CSS/JavaScript templates to power the approved visual design
  • Liaised with ASP.NET Storefront developers to integrate the HTML templates and wire presentation layer into the back-end

Another significant part of this engagement involved resizing and editing of close to 3,000 product images to ensure consistency in presentation and quality... and then creating thumbnail versions for each of them.

Of course, we automated much of this through Photoshop Actions, but the process gave us a greater appreciation for the importance of image fidelity and continuity for product catalog imagery.

Similarly, iconography plays a vital role in the new Air-Tite website. Part of the mood board exercise involved exploring icon families and once complete, defined a consistent style for use site-wide. These icons aid primarily in differentiating the extensive library of product categories carried by Air-Tite.

View additional assets from this engagement

View more work samples

Receive user experience, product design and digital marketing updates

Sign up to receive periodic email communications from Input UX with our latest insights, downloads and tips around user experience and product design. We'll never spam you or sell your contact information to anyone, and you can unsubscribe anytime if you're not loving it.