Developing a unique look within the ASU brand standards

VisLab miniature photo
  • Project: VisLab website
  • Client: School of Life Science VisLab
  • Design: Website Drupal 9 Webspark 2, photography, UX and programming of work order

As we continue to develop website for other centers and units throughout Arizona State University, we needed to set aside some time to work on our own site. Defining yourself or team requires a lot of discussion as to what our core functionality is and how do we convey that in our design.

Who are we?

In 2015, we had established a look of simple shapes, high contrast and bright colors. The eyeballs became our theme and identity. So we established that that is something we would like to continue to display. The next step is deciding on what we should showcase. Should our site be full of motion, parallax and tricky programming? Since our site is a fairly small site, should we do it all as HTML, where we can keep the code small, because it didn't need any of the extra styling that a Content Management System like Drupal includes?

We decided to go with Webspark 2 Drupal 9, where we could also leverage its flexibility to build a new work order system. It already has the brand standards that many members of our team had input in, so we might as well take advantage of what the ASU community help build. The motion and illustration idea was still on our mind, so we purchased a couple of HO scale miniatures to help us illustrate a scene and use it with motion. As we were doing the photoshoot however, we liked the way it looked and decided to keep it simple and design our site with miniature scenes.

Rediscovering our identity

The miniature figures became a reflection as to who we are. We rediscovered our core identity. We are a small hard working group and while we do take on some large projects like School of Life Sciences or Ask A Biologist websites, our main clients are other smaller groups that have enough of a budget for us to design and define their identity within the ASU brand standards.

Form and function

While we established our look, our main focus was our work order ticketing system and project management. We looked into paid services like monday.com, using Zapier to automate different systems connecting with each other, but each option did not completely fill our needs. In the meantime, we have been working with various systems as a project management tool, such as adding admin fields in Drupal Webform, Trello to keep track of projects and Toggl for keeping track of our time. We like the functionality of Trello, but as we want to automate and add more functionality, a cost gets associated with it, and if that's the case, we might as well sign up for a more robust project management system like monday.com.

Drupal 9 webform however, has a lot of options. We started to look for ways to just use webform as both a ticketing and a project management setup, but that became too complicated in figuring out where to look, and did not make for an easy workflow. However if we used the ease of webform as a ticketing setup, and automate the conversion to node that populates fields of a custom content type, then we could tap into the wonderful world of Drupal views and create a management tool, while still using webform to create nice clean simple forms.

Inclusion

With the flexibility of Drupal, we could take what we created and share it with other groups and adjust it to fit their needs. We would like to see other teams benefit from our setup, so our goal is to review their workflows and see how we could customize our setup to fit their needs.