Case Study: It’s a Design Sprint, Mr. Bond

This is my account of completing a MIT Style UX Design Sprint. My goal was to raise the optimization and usability of an exisiting website.

The Challenge

I was tasked with picking a website, any website that I thought looked terrible. This could mean general aesthetics, usability or overall functionality. I picked the James Bond museum located in Sweden, not because I was a big 007 fan or anything, I just stumbled across the site and found it to be an awful mess. It was the perfect choice for this sprint.

Design sprints are a part of the agile landscape. The idea is that by time-boxing the design process and adhering to a set of goals, I would have a chance to consider a problem, try it out, make mistakes, and try again — all in a very short period of time!

The Timeframe

Out fearless coordinator Tara gave us a strict agenda. In order to succeed I had to follow the timeline below:

• On Monday, map out the problem and pick an important place to focus
• On Tuesday, sketch competing solutions
• On Wednesday, make difficult decisions and turn my ideas into a test-able hypothesis
• On Thursday, hammer out a high-fidelity prototype
• On Friday, test it with real live humans using Optimal workshop and present my findings to a panel of peers

The first step was to annotate the wealth of problems with the existing site.

The major problems with the site were the overwhelming amount of information that sits on the homepage, articles, videos and links to other sites and some sort of massive footer with stacks of contact information, it reminded me of a website from 1996.

I did some domain research on other successful and popular museum websites. I came up with a lot of results and was really impressed by how some sites can manage content in such a sophisticated manner. My main inspiration for this sprint was the ROM, it demonstrated you could have a content rich website while keeping it organized and structured and still have a main focus. The ROM’s goal was to direct users to buy tickets, and purchase items from their online store, I decided this is what 007museum.com would do as well.

Believe it or not, The James Bond Museum did all of the these things listed above, but to first time users these options were not apparent and practically non existent unless you knew specifically where to find them.

The Solution

The top priorities that I would implement in the new site would be:

• Optimizing the customer’s shopping experience with an e-commerce solution. Purchasing tickets to the museum and buying items from the store would now be simplified
• Implement a navigation menu
• Implement a search function
• Overhaul the look of the entire site

I had an idea right from the start of how this site could potentially look, I was inspired by the James Bond aesthetic we are all familiar with. This being a design sprint, I did not have time for low or mid fidelity wireframing, this would be one of those rare occasions in the UX process I could step right into high fidelity.

I came up with two different designs, a white airy version which had a focus on buying tickets and putting the online store right up front and the other, a dark elegant moody theme which also had a large emphasis on buying tickets but encouraged users to explore different parts of the site.

My two creative designs. Social proof was added to the concept because it is a great feature when users are buying items or planning a trip.

Testing

The ‘Attention Heatmap’ displays the most attractive elements of the image in the form of “hot” and “cold” spots. This report is a predicted eye tracking report which shows how areas of the original image attracts the attention, using only the viewport of the site (the top fold).
The heatmap colours range from green through yellow to red. The colors are representing low, medium and high levels of attention, respectively. Areas with no color implies that this area will be over looked.

The heatmap was informative, but a bit flaky. Extreme contrast and bright colours led the user’s eyes away. The spots with red I changed to black and white, and I re-cropped the contrast-y part of the watch.

Ultimately, I loved the results I got back. I was confident in my design decision that users would want to buy tickets and shop in the store right away.

With the help of Optimal Workshop and a task list for users, it was time to benchmark the old site versus my two new sites. What I wanted to determine from this test was the overall usability, efficiency and effectiveness.

Illustrated below are the compiled results from the usability tests. I asked users to perform 8 tasks for each design. I was happy to see that my Creative White Design came in first and in close second was the Creative Black Design. Rounding out third was the Original Design.

Results from the Optimal Workshop usability test. N/A listed under ‘Original Design’ denotes the user abandoned the task.

In Conclusion

The numbers I was able to achieve with this test were spectacular. By implementing my solution I was able to decrease time on task from 20 seconds to 4.32 seconds, as well as increase my success rate of completing tasks from 23.75% to a staggering 78.12%. Not only did my site receive a major facelift but it was now 3 times faster, it would begin seeing a spike in revenue and ticket sales if the new site should ever be implemented.

I had an absolute blast participating in this design sprint, the time crunch pushed my creative boundaries and caused me to work at a pace I am quite comfortable with, I am definitely looking forward to the next one.