Case Study: Help Center Redesign
The Help Center for my project management software employer had been abandoned because DevOps was already balancing the workload of our web application and our public website. The support team’s site was another location to maintain. With this in mind, it looked like this to our customers:
The pages were unfinished in production. There were drop-shadows on the letters of the headers. There were ordered lists and unordered lists for most of the page content. All of these came from the multiple style sheets attached to the header doc to blanket all pages.
There were twelve competing CSS style sheets and ten JS style sheets. Nobody could tell me why we needed these style sheets or the purpose of each style sheet individually.
There were boxes without labels that nobody was sure what they were for until you filled them in. Always fun to test these kinds of things in production alongside our customers.
The support team asked for help. They told me I had free reign to do anything I wanted because it was in such disarray. The first step? Clear out ALL the old styling and go back to the template:
For now, the site was usable. Back to step one of the four steps from User Experience Magazine’s UX/UI Maturity Model. We had a long way to go before we reached Delightful.
My tools were the Zendesk Edit Code section of the Guide Admin and Chrome’s inspect tools, but let me tell you: if you don’t know the value of editing in the DOM, take heed! When in doubt, hit “inspect element” and see what’s going on under the hood. If you test your changes in the browser, instead of your code editor, all you have to do is refresh the page if you mess anything up.
For this project, I chose to build a layout with “display:grid”:
Overall, through trial and error, the use of youtube and w3schools, I coded a home page that looked like this:
Do I want to build a career in front-end development? Um… probably not. But to become a better designer, one must understand the medium. I build software. I design usable and elegant software. I know that means understanding the basics of how to style HTML. Will I create fabulous works of art in CSS anytime soon? Probably not.
If one knows their way around a style sheet, and they keep their code clean and their weekends free, anything is possible.
Thank you to all those in my life who code and inspire me every day with your knowledge of algebra and your patience with the artistically minded.
