Web Design I

Mobile compatibility and uniform design on a Zendesk help center.

Zendesk help center

While leading the content creation for the ShareGate Apricot help center, it became apparent to me that the help center experience was not as uniform—and did not display as well across divices of different size—as it could.

I hold a strong belief that modern users “see” mistakes and inconsistencies very clearly. We have an expectation that our technology adapts easily and fluidly across all our viewing devices. So, ultimately, I became inspired to do some front-end web development in order to mitigate the issues at large.

The biggest challenge I face during this project was the 3000+ lines of legacy code that existed in the CSS. Make one small change, and a very random article could crash. Make a large deletion and you might crash the whole help center for 9 and a half minutes (or so one might say, if that happened to them). Regardless, this was largely an exercise in how to combine existing Bootstrap knowledge with CSS knowledge, while adapting to the puzzle that was the existing code.

Outcome

After some work:

  • The header now displays with uniform font, weight, and button types.
  • The categories now span the entire view.
  • The page is responsive across a collapsing view.
  • Elements no longer lay over one another when displayed on smaller screen sizes.

I then replicated this across the ShareGate Desktop and ShareGate help landing pages. (And I made sure to maintain a very clean and human-readable code so that someone other than myself would be able to replicate this work in the future.)

Before

v81_no_edits

After

v82_my_changes