Helping Smartmatic deliver democracy worldwide

Our challenge

Smartmatic are the world’s largest company in electronic voting systems and infrastructure. They build the hardware, write the software, and provide an end-to-end organisational service for elections.

They approached us for help with their website, which was looking decidedly long in the tooth:

Smartmatic website before redesign.


The story

Smartmatic is a true multi-national, so their team on this project was split between London and Caracas offices. With a 5 hour time difference, we really needed to be on top of project management to hit the deadline.

We were faced with technical and visual problems to solve – the existing website was so far away from what users expect in a modern web experience that we had to go right back to the drawing board. And we mean right back: the first task was to examine and advise on brand positioning for the company as a whole. There was no point in modernising the website from a technical perspective if we did not first set the parameters for how the company saw themselves and how they wanted to be seen by others.

Smartmatic new sitemap and wireframe.


With that sorted, we could move on to dissecting the existing content and re-working its hierarchy to make the important messages stand out and give the user an easily navigable experience. What followed was an extensive review encompassing content and current SEO position, from which we created the feature set, working wireframes and a detailed site map. These were crucial in helping the client understand which content was redundant and where new content was necessary. After a couple of iterations we arrived at a final blueprint for the build.

We were now armed with enough information to begin front end design and initial backend build concurrently.

The website design

We started work on the redesign, looking initially at the Smartmatic brand identity. We refined the colour palette to focus on a fresher, sharper Smartmatic blue and a set of bright, complimentary highlights. We then developed a visual style guide for graphical elements (icons, charts, infographics) to be used consistently across the site.

Smartmatic infographics


Next we experimented with typography, opting for Steve Matteson’s Open Sans for use throughout the site. The typeface is clear and legible across all screen sizes and in multiple languages. It also sits well alongside the Smartmatic logo.

Smartmatic new design screen shots.


Once we had a clear style guide we began to explore page layout. We utilised traditional graphic design techniques, such as the use of a 12 column grid to create a clean and modern interface, bringing consistency and order throughout the site.

Smartmatic design process.


Above: a selection of initial designs

Smartmatic final design.

The website development

Smartmatic had already specified the CMS we were to use, and it happened to be one that we were not particularly familiar with. It also happened to be one with a particularly steep learning curve. Oh, and did we mention the site needed to be switchable on the fly between four languages as well?

This wasn’t going to be easy so we rolled up our sleeves and got on with it. Any CMS has its quirks, and this one was every bit the challenge we expected – and more. Sure we could have made it easy on ourselves and relied on more of its out-of-the-box capabilities, but that didnt fit too well with what we wanted to give the user or the ease of use we wanted to give Smartmatic administrators in the backend. So we worked hard to tame it – and tame it we eventually did.

The front end design is true to our ideals of simplicity and functionality. Nothing is added without purpose. Of course we went for a responsive build, using our favourite SASS CSS framework from Zurb.

Smartmatic contact page.


Having got the shell of the site built, we helped with content population. This was not originally part of our remit, but the deadline simply was not going to be hit otherwise. We even had a Smartmatic writer working with us in our office for a couple of weeks to help the process along and write the new content on the fly – this is the sort of collaboration we welcome, and for this project it was crucial.

Smartmatic timeline.


Final wrap up consisted of review and implementation of 301 redirects to preserve the SEO value of the old site, plus the creation of a detailed user-guide for the site administrators.

See the website here:

Got something we can make special for you? Please get in touch with James Waring moc.nodnolgorfeulbnull@gniraw.semaj to find out if we can help

Client: Smartmatic
Featured services: Digital