Project Specs:

Client: Stahls’ – the leader in heat transfer vinyl and heat printing technology.
Type: Website CMS Admin
Software: Adobe XD
Role:

  • Team Lead
  • Research
  • User Experience (UX)
  • User Interface (UI)
  • Prototyping
  • Design QA

Project Details:

This project came out of the need to make updates easier for the Web Content Manager after Stahls’ had to furlough employees and sent us all to work from home because of the COVID-19 pandemic. The idea came from a previous project that I had worked on. Where our developers created a unique template that had the basic framework of a header and footer from stahls.com website, and the middle of the page was a text box that would allow custom HTML and CSS to create a one-off page that was needed at the time.

With that special template in mind, I worked with the Web Content Manager and lead developer to bring to life the Gestalt Architect. This project would allow custom pages with little to no developer involvement. It was also part of a larger project to somewhat modernize the very aging CMS system that desperately needed UX and UI attention.

Role:

  • Team Lead
  • Research
  • User Experience (UX)
  • User Interface (UI)
  • Prototyping
  • Design QA

The objective was to create a system that allowed custom sections to be added as needed. Each section was planned out based on existing needs across the site. Of note, I worked within the current UI for the CMS, but I did try to work in UI improvements when and where I could.

You can view the Adobe XD file to get a better idea of how this comes together.

Gestalt Architect Preview:

cms-custom-page-builder-example

Page Builder Custom Page Options Examples:

Concept Comps

The following are the page comps that I came up with utilizing the functionality of the new page builder.

Finished and Live Pages

These screenshots are how the pages were launched. Some changes were made on the CAD-PRINTZ, and Custom Cut pages after I had left the company.

Since then, they have gone on to create many new pages utilizing the page builder.