Bringing creative back to earth

For those that don’t know, K.I.S.S. is an acronym for “keep it simple stupid”. This is something that I swear by as a designer and I wanted to apply these principles to this project.

It seems as though a lot of companies and designers are being creative for creative sake. The users are often overlooked, and their experience through a website or app can become more difficult and tedious. Which brings on the whole topic of “design with purpose”. As much as we’d love to create something that’s beautiful to look at…if it’s not functioning properly, then it sucks. Sometimes it can be the smallest changes that lead to the strongest results. Keeping that in mind I decided to test this myself by tackling a homepage for a company that I felt should focus more on the user’s experience…

Sid Lee is one of Canada’s top ad-agencies. With 5 locations across the world Sid Lee are constantly building portfolio with ground-breaking work for some of the biggest brands and companies worldwide.

In 2014 the Toronto Raptors made it to the NBA playoffs facing Paul Pierce and the Brooklyn Nets. Shortly before the series began the Toronto Raptors (MLSE) revealed the “We The North” campaign. The commercial gave me goosebumps and couldn’t make me feel more proud to be a Raptors supporter. Through a friend I heard Sid Lee were the brains behind the campaign. As I went to their website I had a tough time finding the project. It was a difficult task that I began to feel very frustrated from and it came down to having to google “We the north + agency” in order to find the page on Sid Lee’s website. I love Sid Lee and the work they’ve done, but they really need to keep it simple…

6 on a waaave

Our Task:

A few things to keep in mind when optimizing the SL homepage:

  • Changes increase to over 80% success rate
  • Reduce the time on task
  • Work within the parameters of the interface
  • Keep all the functionality of the homepage intact

Who are Sid Lee’s users?

  • Clients who are going onto the website to review their work
  • Competitors who are there to benchmark and do their own competitive analysis
  • Those looking for job postings

This brings us to another acronym that I swear by: F.O.W.T.I.D.A.S. Heard of it? If not it’s probably because I made it up. It stands for “find out what’s the issue, diagnose and solve.” When going through the SL homepage, I listed all of it’s issues, what’s causing the issue (diagnosis) and came up with a solution. Below is SL’s homepage, along with a few of its issues marked beside.

Issue #1: Latency. When first logging onto the page it takes quite a while for the entire page to load, this could frustrate the user and immediately put a damper on their feeling towards the site.

Diagnosis: Too many videos and uncompressed images. (There are 9 videos on the homepage)

Solution: Trim it down to one video (first video seen when opening page) and use compressed images.

Issue #2: Change Blindness. The columns featuring “work”, “news” and “insight” all look alike, confusing the viewer on what’s what.

Diagnosis: Columns all look the same, and the tags that show if it’s news, work or insight are very small.

Solution: Chunk the content into separate sections.

Issue #3: Cognitive Load.

Diagnosis: There is so. much. content. It’s hard to take in at first.

Solution: Trim it down, not every single news article, blog post and recent work have to featured on the homepage.

New Designs

From here I designed a handful of different SL home pages, keeping in mind all the solutions for the issues from the original page. I call the version below “The Green Monster”.

As you can see I simplified their homepage by spacing and dividing the content. I also created the Work Divider Drop™, which can help the user quickly filter their work by Industry, Category and Client. So if someone was curious to see what Sid Lee has done for the Toronto Raptors, they’d simply click on Client, a drop menu would appear with a list of everyone SL has worked with.

Work, news and insights all have a different colour background, which would prevent change blindness. When clicking on “Load More” below each section, more content would appear depending on what section the user is on. (Work, News, Insight)

Sid Lee’s original top nav is grey on grey, which can be difficult for users to read. Keeping that in mind I decided to make it white on black, for a stronger contrast and much easier read.

Eye Path

For fun I put a couple screenshots through an online program that tracks the average user’s eye path. I wanted to compare the original homepage with one of optimized versions to see what is and isn’t working. I wasn’t surprised to see that the top nav wasn’t looked at in the original homepage, and I was pleased to see that my adjustments led to the user to reading it. In comparison to the original homepage there is clearly much less scatter and much more balance with eye path. I’m sure Sid Lee would also be pleased to see that the video was the first thing the user look at.

A-B-C Testing

After a few days of working on and off designing new versions, I finally selected two of my optimized home pages to test along with Sid Lee’s original homepage. The A-B-C testing would measure the time on task and the task success rate. With the average user’s attention span being 6 seconds, the goal was to make the time on task as close to that as possible.

Based on SL’s users, I came up with three tasks for the usability test:

  • You are interested in applying for an Art Director position at Sid Lee, click where you would find that information for the job posting.
  • A friend told you about a Toronto Raptors campaign done by Sid Lee, where do you go to find more details? ←(i had to do it)
  • Click where you would go to find a press release on Sid Lee winning the Adidas account.

After waiting a weekend to see the results, 47 users took the test but sadly many dropped out. 22 of the results were used, which serves as a good ballpark figure for the general results of the test. From here we can see which of the home pages had the highest task success rate and the average time on task. As mentioned before, with the average user’s attention span being 6 seconds the goal was to be as close to that as possible. Having said that the average attention span can vary based on how long a webpage is and how much content it contains. Given that the average time on task ranged between 10–20 seconds, it makes sense given the size of the pages and the amount of content.

Now I know what you’re thinking, Sid Lee’s Original home page had a 100% task success rate on the question asking to find a job posting… reason being because there is a link to “Careers” on their top nav. In the optimized versions my intention was for the user to click on “About” to find the job posting. 66% task success rate is okay, but no match to the 100% on the original home page. This was a bit of an oversight on my part, but after all we’re keeping it simple!

Prime example of K.I.S.S.

So overall there’s no doubt that optimizing their website led to better results. This meaning Sid Lee’s clients, competitors and potential future employees will have a much more user friendly experience. From this task I learned that small changes reap great results.

Throughout the study I talk about “keeping it simple”. This is proof that even a big time ad-agency like Sid Lee can overlook these small details. It’s a reminder to designers like all of us to always put the user first. So keep it simple stupid. Or in this case, keep it simple Sid Lee.

Goosebumps…every time.