Having recently entered the world of freelancing, I realized that I would probably need a portfolio site. While that’s a natural thing for a Creative Developer or an Art Director, as someone working predominantly in project management there weren’t many reference points... so I approached it with no restrictions or preconceived ideas.
I wanted to have a single page site that would read as a kind of a story and wouldn’t require the user to have to navigate menu systems or sub-pages
I knew I wanted to have a single page site that would read as a kind of a story and wouldn’t require the user to have to navigate menu systems or sub-pages (as let’s face it, people in advertising often don’t have the time or attention span to delve into your site!). The result met these requirements, and despite the optional interactions along the way, it is possible to get from start to finish in one smooth scroll.
It also needed to be a bit unique and fun to play with, to hopefully stand out in a sea of portfolio sites.
After wireframing the site and running it past some UX friends for feedback and tweaks, we kicked around some ideas for a theme. The art direction and creative concept were devised completely by Kacper. From the original concept for the drawing mechanic, we iterated and tweaked until we had something that was fun and as fluid as possible.
There were constant playtests and value updates for the drawing line widths, the sparkles effect, how the screen-fill animated, the percentage of canvas that needed to be drawn on in order to trigger the color change, etc.
Each section of the site has three different colors that combine with each other. The users are able to see more than eighteen colors while navigating the whole experience, which makes the entire experience more colorful and playful.
Lists of things are boring. Long lists of things are even more boring. Unfortunately given the type of work I do, and the things I needed to convey, it wasn’t possible to avoid lists. As a result, we knew they had to be integrated in an unobtrusive way that could be interacted with to allow the user to investigate further.
The lists (used for core skills, and for brands) can be highlighted, scrolled or dragged.
We settled on a method that had some natural motion and allowed the user to interact in one of several ways - so that the user wasn’t expected to guess how. The lists (used for core skills, and for brands) can be highlighted, scrolled or dragged.
Interaction with scrolling lists
Given the global world we work in, it seemed like an obvious decision to localize. The site content is driven by a headless CMS, and the site was built in a way that allows the addition of new languages on-the-fly, without any new deployments needed.
With the help of friends familiar with the advertising industry, we managed to translate the content into multiple languages authentically. (initially French, German, Italian and Brazilian Portuguese - a few others are planned) From the first month’s analytics data, the choice was validated - large percentages of users were from those countries with localized content and they had chosen their local language from the menu.
Whilst the concept was designed to be as consistent as possible across desktop, tablet and mobile - there were a few mobile-specific tweaks that had to be made. We went for a traditional style burger menu for quick navigation and had to do the following two specific changes:
- The canvas drawing needed a slightly different approach given that it’s not possible to independently scroll the site and move a cursor. This resulted in a lot of playtesting to find something as natural as possible and is still fun.
- The Case Studies section also needed to function differently; so while we went for a 3D animated preview image triggered on mouse-over with a ‘hold to launch’ method on desktop, on mobile we opted for static image ‘shown on scroll’ and ‘tap once to launch’ method.
The main challenge of the project was the Browser Compatibility and Performance of the website. Since we wanted to implement a lot of animations and interactions without compromising the user experience or the navigation of experience, it’s essential to test on multiple browsers. We performed structured QA tests across quite a range! Here is our device matrix of browsers:
- Desktop: Google Chrome, Microsoft Edge, Opera, Maxthon and Safari.
- Tablet: Google Chrome and Safari.
- Mobile: Google Chrome, Safari and Social App browsers including Facebook, Twitter, and LinkedIn.
(Note: on Mobile and Tablet, our site was tested across a broad range of iOS and Android devices using an array of firmware and models)
We used UA Parser to detect the user’s specs and deliver feedback screens in cases of not matching our support matrix.
Unfortunately, the once-mighty Firefox has become problematic when wanting to do fancy things and still maintain performance. As a result, we had to disable the sparkle effect on the cursor in order to maintain the smoothness of the site. Interestingly, browsers such as Opera and even IE11 could handle the effects without dropping frame rate!
All decisions on framework and tech were made by the wonderful Tech Lead Luis.
We consider GreenSock as the most powerful library to work with for animations, so we used it to create almost all animations on the site. And to work with the three-dimensional graphics, we choose Three.js due it’s popularity, performance and simplicity.