Article Image

ROLE

UX Designer & UI Design Engineer

SKILLS

UX Design Design Delivery HTML5 Templating SCSS Architecture Web & Mobile Optimization Frontend Documentation

I was brought in to work with a small internal development team undertaking an ambitious re-launch of Econsultancy.com, a leading digital strategy and business knowledge portal ranked that receives close to a million unique visitors each month.

My roles as UX Designer & UI Design Engineer involved close collaboration and communication with our team's UI designer, stakeholders, and frontend developers to understand, architect, and bring the design vision to life while ensuring that the end-to-end design implementation was responsive, readable, scalable, accessible, and maintable.

read

Econsultancy.com has been at the forefront of digital marketing and ecommerce insight for longer than almost anyone out there. The web portal publishes an expansive set of online resources, including industry-leading guides on digital marketing best practice, alongside hugely popular events, training programmes, capability assessments and digital transformation programmes.

Econsultancy boasts a paying subscriber base in the hundreds of thousands, and is ranked among the top 1000 websites in the UK by both visitors and pageviews

Econsultancy delivers best practice guidance, insight, tips, and capabilities to help businesses accelerate towards digital excellence in today's ever-shifting landscape, used by some of the world's most successful companies, including Adobe, Coca Cola, CitiGroup, IKEA, and Lloyds.

I was brought in by Econsultancy's co-founder and CTO to help their internal development team roll out an expansive redesign and redevelopment effort in mid-2014. More specifically, my skillset and experience in design delivery - combining high quality interface design with a deep understanding and appreciation for the HTML and CSS building blocks that make up a modern web app - meant that I was uniquely positioned to help Econsultancy deliver a highly performant and responsive new web experience.

http://localhost

Working with the phenomenal UI design talents of Jamie Watson and an incredibly adroit cast of AngularJS and Ruby on Rails developers in Dominik Piatek, Dave Taylor, and Vincent Bonmalais - and in what I have to say is one of the most well-structured teams and agile workflows I've ever had the pleasure of a being part of - we set about carving a path to success.

Patterns, Patterns Everywhere

A UI Design Engineer's job is a peculiar one, meshing visual design sensibilities with astute and efficient markup and stylesheet architecture decisions. One of my first tasks was taking all of the 'design knowledge' baked into the fresh new concept screens and creating a common UI language for the team, breaking it down brick by brick into manageable pieces (a.k.a components) that would eventually combine to form the website's frontend. Prioritizing key areas and treating the entire interface as a system built from reuseable modules (as opposed to a set of "pages") helped ensure visual coherence and make the UI development process a thousand times more manageable.

Navigating the published pattern library

I'm a big fan of pattern libraries both as a communication tool and a resource for creating consistent user experiences, and in this case I began formulating one from Day 1. A pattern library helps describe what each component that makes up a website or app is, why it's been structured a certain way, when it can be used, and where it sits in the grand scheme of the website's visual and information hierarchy.

Maintaining a pattern library early in a project helps maintain consistency and aid future decision making as the project scales.

It is a living document that evolves side-by-side with the final product, and an invaluable tool for new designers and developers that may work on the same project months or even years down the line. As Econsultancy moved closer to the finish line our pattern library also grew to include:

  • Color Palettes
  • Fonts & Typography
  • Iconography
  • Page templates
  • Imagery Guidelines
  • Frontend Code Snippets
  • Email Templates

Accessibility through and through

For such a high-traffic, content-heavy website, it was paramount to consider the needs of a wide range of visitors. A big part of my involvement on the project involved drawing up and enforcing design and frontend practices that would elevate the new Econsultancy.com to the very top in terms of prioritising accessibility.

I took on the responsibility of ensuring that there was awareness within the team on a range of accessibility concerns, and that we followed best practice and consistently tested for a range of situations.

These included:

  • The use of appropriate HTML5 tags, markup structure in our page layouts;
  • Contrast between copy and background that met WCAG guidelines;
  • Implementing larger 'tappable' link areas on touch devices;
  • Meaningful alt and title tags that facilitate people using screen readers and non-traditional devices;
  • Using appropriate ARIA landmarks, roles, states, properties and labels;
  • Testing for keyboard navigation accessibility.
http://localhost

Performance

I believe that web performance considerations are as much a UI Designer's responsibility as they are a frontend developer's. Page load times are intrinsically linked with user experience, and a fast, responsive interface can oftentimes be the difference between good experience and a great one. This is a philosophy I take into every new web endeavour, and Econsultancy was no different.

CSS also happens to be one of my many loves, and I relished the opportunity to get my hands dirty implementing CSS at-scale on such a heavy-traffic website. With a combination of SASS, the awesome BEM methodology, our pattern library, and a well-defined stylesheet architecture, the new website was built not only to be highly performant, but scalable and maintainable too.

Working hand-in-hand with the team's development lead, I devised and implemented strategies and processes to ensure that the new Econsultancy.com was as performant as performant can be, and delivered a great experience on every device.

This included, but of course was not limited to:

  • Ensuring the team understood how markup structure can affect DOM loading and performance;
  • Choosing the right image formats and compression methods on a per-use-case basis;
  • Using image sprites and our own custom icon fonts where applicable;
  • Keeping our SASS 'DRY', making smart decisions when it came to CSS selectors, and using the cascade to our advantage;
  • Implementing the latest and most applicable minification strategies;
  • Making use of srcsets and dynamic image resizing on the backend to deliver correctly-sized images across devices;
  • Implementing progressive enhancement techniques on an individual component level and making design decision with respect to the website's mobile experience that facilitated this.

It's Alive!

Working on the new Econsultancy.com was a fantastic adventure and, as with almost every project I've been involved with, an amazing learning experience. Although my role leaned more towards the Design Engineering side of my skillset, I believe it also made me a better user User Experience designer and leader - making use of programming best-practices to enable more user-friendly interface design as a team. The opportunity to bring such a collosal vision to life while ensuring the end-to-end design implementation was scalable, accessible, performant, and maintable is one I will always value and relish. Check out the new website here.

Next project