New UX Passion website, our gift for our fifth birthday

We are 5 years young. We are celebrating it with our new website! Something that started as an idea back in 2009 is today a strong agency.

In all that time since our inception, we’ve enjoyed lots of great days, and lots of insightful and valuable experiences, but also, in all honesty, we’ve made numerous mistakes. We’ve learned from some and we’ll continue to learn from others. Despite operating through six years of recession in Croatia, we’ve kept growing. Many things have changed from the early days when we worked out of our homes or in rented apartments as roommates.

Today, we are in our third office, we operate globally, and combined we have over a century of UX and UI design practical work and experience. And to cap it all, to celebrate our fifth birthday, we have decided it is time to redesign our website.

So, welcome to the new UXPassion.com!

Our team and roles

Building the new UXPassion.com was a real team effort. We tracked the performances of our key pages using Google Analytics, CrazyEgg, and numerous in-house methodologies, and we identified the key issues that we are facing and the key problems that our users are facing. Antun, who was in charge of the overall creative direction of the website, and myself (in charge of content, SEO and analytics) decided to use the hard data as a starting point for all our design decisions. So, we can honestly say that this is truly a data-driven design.

Using all the data and insights we could glean from it, we started by creating our first outline sketches. No fancy software here, just plain old paper and pencil; Scribbling around until we were ready to move to the next step.

Content is one of our fundamental pillars. Despite our belief in mobile-first design approaches, we employed a content-first approach. Rewriting, restructuring and reorganising all the website content was a daunting task, but it was very rewarding to see how the content itself was directing our new website structure and layout. Once we were happy with this, we moved onto the next step – development and design.

Mladen was our dedicated front-end web developer for UXPassion.com. Just like earlier, Antun and I identified the key user-facing issues and analytics challenges, so Mladen could create a great new user experience. Later on in this post, you can read more tech details and more about our performance budget and general development efforts.

Working closely with Mladen during the development phase was Antun, who was responsible for managing the overall creative efforts – typography, branding and all things related to visual communication. They sat together for over a month, desk by desk, and worked in parallel, doing their very best to deliver our new website.

As you’ll notice when you visit our website – our website is filled with numerous new illustrations: some are hand-drawn and more organic, others follow our new aesthetics in terms of simple and clear lines, limited colour palette and overall vectorish approach. Here, Nikolina was a key creative force behind these efforts. And, trust me; it was a lot of work. All the images are pixel sharp, and we optimised the user experiences for smaller mobile screens and all the way up to larger, retina-like displays. Take a close look – everything is clear, pixel-perfect. We are talking about, quite literally, hundreds of different exports, and probably the same amount of hours in this. Our new Portfolio section now features our key works, but with more visual design elements than earlier, and for this, Dean lent a great helping hand in the creation of the visual elements for this part of the website.

Tech details: Performances and key metrics

We wanted to use our own website as a testing ground for some of our newer technical approaches and ideas. There was one key word recurring in all these efforts: Performance.

We defined our ‘performance budget‘–maximum page size and set it at 666 KB. That roughly translates to a load time of 2.5 seconds on the 3G network we used as a benchmark. In fact, most of the pages now load in under 2 seconds. Naturally, loading the first page takes a bit longer, but not more than 5 seconds, and then most of the assets are cached and subsequent loading is around 2 seconds.

Here’s some hard data. Our old UX Passion homepage was 953 KB (940 KB for the tablet version and 810 KB for mobiles). The new UX Passion homepage is 507 KB for desktops, 547 KB for tablets and just 488 KB for mobiles. On average, the new homepage receives 40 requests; whereas, the older one had between 50 and 63.

Maybe the most drastic performance improvement can be seen on our Contacts page: The older version was 858 KB heavy with 100 requests (desktop version), while the new one is only 404 KB and with just a third of the requests from the previous one, now totaling only 34.

While performances and their measuring are key to improving the user experience, and indeed the SEO rankings, the perceived and visibly acknowledged part of the user experience story is also critical. As is the common standard today, our new website is fully responsive: feel free to open it on your phones or tablets, resize it, play around with it – everything, from the fonts sizes to different images, is optimised for the best user experience.

We tested our website on a wide range of different devices spanning from 320 x 240 old Android smartphones, over the tablets and all the way to large Cinema displays with 2560 x 1440. We experimented with the typography.

As you can probably notice we’ve ditched Helvetica we used earlier for the main body text. After thorough testing we opted for Open Sans. Open Sans itself is designed with an “upright stress, open forms and a neutral, yet friendly appearance” and is “optimized for legibility across print, web, and mobile interfaces.” – according to Google.

To help out with the content organisation, layout and visual harmony we used responsive grid system. Gridset was very helpful service and we made sure that grid is responsive, it’s flexible enough, follows the golden-ration (just like the images all across the website) and allows to be managed by the font size.

We also employed conditional loading of content and assets – including images, which are currently shown in viewport. To help out with the imagery, we used ‘Picturefill‘ – a responsive image polyfill for <picture>, srcset, sizes and more.

Talking about images, we created several versions of each key image and we show them dependent on the screen resolution and size. Our idea was to ensure that all of the images were pixel-perfect. We insisted on this and although it was very hard and involved many hours of manual labour, we are happy with the final results. For high-res displays (Retina), we used SVGs.

SVG (Scalable Vector Graphics format) was used for all the icons over the website, and for SVG processing, we utilised ‘gulp task‘. We fed it with a folder filled with our SVGs and it created SVGs using the appropriate SVG symbols.

Final words…

Website design and development is a continuous process. While we had to set a launch date and, at least formally, say that, for the time being we are ‘done’, in reality, our work is just starting. In much the same way we used data to inform and guide our design decisions, we’ll keep doing the same with even more rigour – we’ll continue to thoroughly test, experiment and measure performances and work hard to deliver you information and content when you need it.

We are committed to helping our customers optimise their website performances and conversion rates and we will do the same with our own website. We’ve made some bold moves, removed older content that wasn’t relevant anymore, reorganised our services section, and created Magazine – a one page glimpse into all things UX Passion: from news and blogposts, all the way to our Instagram and Flickr photo galleries.

Also, we wanted to share a little video with you to mark our fifth birthday: We are organising “team gatherings” – our internal “getaways”. We leave the office, sometimes even country and spend several days off-site. Often, we don’t even have the internet access and we use that time to reflect and rethink ourselves as a team. While we do work during team gatherings, we also know how to have fun. So, take a look at the video and enjoy!

We are always happy to hear from you, so feel free to share your constructive criticism with us – [email protected] is the go-to address. We hope that this lengthy post has brought you more information about our website redesign process.

In the near-future, Mladen will write a further post with more details about the technical aspects of the WordPress development, and the performance management, and will share some practical guidance with you. I will also join in with more background SEO and analytics insights.

So please stay tuned, and continue to follow us, and thank you for all your support for these past five years!