After starting at BT (or Dabs, as it was) I was very quickly thrown into the deep end when I began to develop solutions for Marketing that pushed the design of our education pages and articles. This then expanded into landing pages and mini-sites for our partners and vendors.
This blog reflects on the journey from design to front end development including a look at other initiatives I’ve put in place as Head of Design as I push my personal and professional development.
In the beginning…
The design process required at Dabs was quite straightforward: we’d get a brief from the PM’s via Marketing for activity that would drive VI or another promotion.
What was apparent very early on, though, is how out of my depth I was. Design always came naturally, just like illustration, but the level of front end knowledge required had been left off the job ad.
HTML and CSS were alien concepts to me as. The learning curve would be very steep, mountainous in fact but one of our Devs said ‘it’s easy, just use the Inspector and see how it’s put together’. That tip, plus W3C Schools were the educators and many hours spent at home coming up with layouts, ideas and then figuring out how to make them, were the lessons.
As my skills increased I bettered my manager, who only really dabbled in code and was quite happy to give me all the work. Keeping an eye on competitors’ sites, plus those of our partners, always gave me more ideas I could potentially use – once I figured out how it was done.
There was a bump in the road when my manager left, leaving me the only designer for the company and doing 4 hours of unpaid overtime per day for the better part of 2 years!
I had to do work for the 2 main store groups developing solutions that would have to land in the back of net of those ever moving goalposts. This was on top of BAU which included many emails per week (sometimes 8 or so), each of which would require a different design to suit the campaign. These were very time consuming and always needed last minute amendments, even after sign off, due to price alterations or other factors. Reactive design FTW!
As it turns out, Dabs had always worked this way. Instead of having their own voice, everything they created echoed that of the partner whose campaign we were pushing. This lead to the site, content and other material being a cacophony of visual noise. It also lead to my first initiatives – standardising the email process and creating web templates.
Dabs had flirted with HTML emails, but increasingly relied on image based content, which is never a good approach. The emails too had a tendency to be massive; in some cases up to 12 products per email and averaging over 4000px in height.
I created a standardised HTML email template briefing document (an updated version of which is still in use today) which forced Marketing, Commercial and the PMs to really consider their content. This would reduce production time, limit the time spent on amends and not be as cumbersome for the customer to read – it would also be clearer as we were now using HTML text rather than images.
The web templates would force stakeholders to consider their online content in a similar manner. Templates were minimalistic in an active push to remove the noise from our articles: an intro image with copy, with slots for image and specs followed by placeholders for products. This template spawned several variations which evolved with my abilities. It was also a very good chance to employ what I’d learned about CSS, as I found the site styles lacking (still do, but it’s out of my hands and another argument for another day) so I created a stylesheets that I imported into our CMS. I also put a lockdown on vendors and other partners using their styles on our site – something that caused many disagreements, and I didn’t always win when the VI was too high to ignore, but for the most part it decreased production time and helped us meet targets.
Adapt and overcome
While we now had simple and customisable templates for the site, I tasked myself with developing our emails further. The team had grown and my role evolved into deputy Head of Design and part time Front End go-to-guy (out of necessity). Design were looking to streamline and create more consistent customer journeys to assist Marketing, who at this point were not unified in their approach.
The Business Direct website is built on the old Dabs architecture and it is desktop only. There’s not even an adaptive version, which I will discuss below. However, analytics showed that an increasing number of our customers were using mobile devices, so I created a solution that would tie the email and site journeys together. This solution would also win me an award from BT.
We had considered using available frameworks like Bootstrap etc, but any third party systems have to pass thorough strict vetting and validation. This process can take months; considering the reactive and fast paced environment of our unit I designed and built a lightweight, template driven adaptive framework that consisted of easily interchangeable components. This vastly reduced production time for our content driven mini-sites from 6-8 hours to 2.
While these pages were now adaptive, the email system was a different matter. Developing responsive email templates was a task that required a day of research, building, and a week of testing around BAU. Outlook proved to be the most stubborn (if it’s going to go wrong it’s in Outlook 2007).
The emails, much like the site framework, are component and template driven. Along with the markup, I also wrote the manual on their usage which allows for multiple variants to be spec’d in from one template. The new responsive email templates have allowed Design and Marketing to create consistent and clearer messaging.
By this time I had become the de facto go-to for Front End ideas as my colleagues in Design are relatively inexperienced with coding, mostly coming from Print backgrounds and Dev support is minimal. So when I was asked if I could create an event calendar that was a challenge I dove straight into, though I had no idea how to do it!
The advice I was given from Dev was to simply comment down the process in plain language, then build up the code around that. Once the parameters of the project were set I wrote down what I needed, I just had to figure out the how. A variable gathers values from inputs, then information is shown based on the result. In the modal lightbox HREFs are generated from data values embedded in the parent element. The result is a low number of modal templates that can be reused by new parent elements and a filter system that can help to narrow down the search.
Meet the new boss…not quite the same as the old boss
As Head of Design I have deployed initiatives that have helped to strengthen the team to ensure that Design could meet the demands of the business, from coding practice to more responsibility in project management.
As my colleagues were new to coding I was concerned about the pressure that would place on them, however, my framework has enabled the most inexperienced of us to quickly build pages. To deepen their knowledge I set up a training schedule where each designer could pick a time during the week that suits them, workload allowing, and use my experience to strengthen their skill set as I always encourage and support my colleagues in their professional development.
Using CSS Zen Garden as a base, I have tasked my colleagues to create variant designs and and I coach to give them the knowledge they needed to realise their design. This is also of benefit to them as they become less reliant on me to solve any issues and become more confident in their own skills.
Given the way the company has historically handled large amounts of content (a recent audit revealed 35 pages and duplicates for one vendor alone) I tasked myself and the team to design a more comprehensive solution. This also brought our Marketing teams into the meeting so we could reach an agreement and work together on this. Marketing therefore will own content and audit that before submitting a brief, checking between the teams to ensure no duplication, where as I have designed a hub structure, while I’ve tasked my colleagues to design the sub-page templates. As a result of this, Design and Marketing will write a new bible for content production.
Back to the future
Much to the annoyance of certain colleagues, I’m always looking to improve the processes and solutions I have developed. (I say annoy as it challenges them to rethink how they brief their content but it also offers new options for delivery).
Below is a link to my codepen dashboard where I often kick around my ideas.
As I’ve turned my attention to UX, it was interesting to see how much I actually use the methodology in my day to day work. Now that as the remit of the business is changing I have the chance to refactor older pages thanks to a better understanding of UX principles and make them fit for a new, wider audience.
Since I started looking into these practices it’s really fascinating to see where other sites fall short, and these learnings can be taken and applied to focus my reasoning and improve my designs. Ultimately, combined with more front end dev experience, working in UX is the next logical move for me.