BACKGROUND
Imaginary Pictures have helped large broadcasters, small service companies and individual productions create innovative technical solutions to enable their ideas. The projects have ranged from factual programs in some of the planet's most extreme environments to Film & TV Dramas for major studios. Their work also includes some of the biggest live sports and music events. The team have also created innovative solutions for global brands and dozens of commercials.
I was delighted when the company agreed to let me redesign their site as their work with gaming engines, VR and AR is an area I would love to work in. This Case Study took 80 hours and I was the end to end UX/UI designer on the product.
The company's goal with the redesign was to get users to quickly and efficiently contact the company about potential work.
I had noticed the site was less effective on mobile so I aimed to develop the company a responsive, mobile first website which was efficient for users, as mobile traffic is now the largest part of internet traffic.
RESEARCH
Goals:
How do these users interact with the site and do their goals align with the company’s goal to get customers to contact them quickly and efficiently?
-
Find out what devices the users are accessing the site on
-
Understand what they access the site for
-
Understand what pain points stop them contacting the company
-
Understand what the simplest journey to success on the site would be for them
Methods:
-
User Interviews
-
Surveys
-
Competitive Analysis
Reflection - I really struggled to get people who would be genuine users of this site to give up their time to do user interviews. As the company work in such a niche area of the production world (using gaming engines to solve production problems) and produce such cutting edge work, they had a limited number of their users who could provide data. On top of that the people accessing Imaginary Pictures' site were time poor, senior people who work for large production companies, so didn't have the time or inclination to do a long interview. I therefore had to rely more heavily upon the survey and competitive analysis for my user results.
Results:
The results I got were interesting as I had assumed users would want a mobile first website, that videos would slow load time of the site and that the site would be used primarily to contact the company.
However, the user data indicated these sites were most accessed upon desktop, that video were an important feature for the users and they use the website to compare companies to each other before deciding who to work with.
They wanted contact details including phone numbers as they often needed an answer 'within 20 minutes' so email forms were frustrating and calling and talking was what was needed.
DEFINE
Findings after Research:
-
Users wanted the company's work summed up quickly, perhaps in one sentence at the top of the site
-
Example videos of the company's work were by far classed as the most important feature on a site, followed by explanation of services offered and staff biographies
-
They wanted contact details of the company for quick contact
-
The size of companies previously worked with was seen as a persuasive element of the company's site
-
People used the site almost exclusively on desktop
Specific to Imaginary Pictures, users were asking 'I have a problem with this piece of tech, can this company help with that?'
Users will have been recommended the company already, and will be using the site to back up that recommendation and validate the impressive work the company has done.
Based on this I created How Might We statements for the site:
-
How might we best demonstrate what Imaginary Pictures does?
-
How might we persuade users that Imaginary Pictures can solve their problems?
-
How might we allow users to quickly engage with and employ Imaginary Pictures?
I divided the users into two user personas
DESIGN
Sitemapping, User Flow and Task Flow:
The users wanted the site to be fast and simple, so I bore that in mind while sitemapping, containing what is currently 5 different pages into the homepage with anchors, simplifying the sections and having multiple contact points on it. This should help with less loading time, and make it visually quicker for the user. If they want quick movement the sections will all be anchored off the nav.
I tested 2 user tasks based upon what the company and users wanted from the site - one for contacting the company via email, and one to watch a specific video of the company's work. This covers both the company goals of making contact quick and easy, and the user goals to watch content on the company
Wireframing
The company itself will be turning the designs into the website using wix templates so I have to keep this in mind and not design with too much complexity.
I used Pixlr to edit and filter photos to support the site/create more visual interest for the text.
When designing the project page I changed the text layout to be in sections 'Client, Problem, Solution, Tech Used' so that those users who came to the company with a specific tech problem to solve could quickly and easily see how the company has worked in the past.
CONCLUSION
I feel my site design meets both the company and the user's goals and I am happy with the design choices I made, which resulted in good testing results.
As mentioned earlier the difficulty of interviewing users is an area I would improve upon if I did the project again, but I am happy for the experience of having to rely more upon competitive analysis and surveys as this may be a situation I come across again in my career.
Next Steps
If I was to continue with this project I would like to test more upon users being able to find individual videos through the site, as well as if the superimposed text stands out well enough while the videos are playing beneath them. I would also like to gain feedback from users of the site once it was live, to see if the pain points previously encountered in finding out what the company did and contacting the company quickly and easily could be improved upon any further.
I retested with 2 flows - 1) Watch the showreel, 2) Watch the video for the project ‘Big Flight Films - Giant screen 3D’.
The showreel user flow had a 100% success rate, with an average time of 13.3 seconds and an SEQ rating of 6.9.
The second user flow, with the new layout, “Watch the video for the project ‘Big Flight Films - Giant screen 3D’” was much improved.
It had a 86% success rate (6 out of 7 testers), an average time of 18.9 seconds and an SEQ rating of 5.9.
In my final round of testing the results were as follows:
The first flow I tested was sending an email to the company (the business goal and one of the user goals.)
It had a 100% success rate, 0% misclick rate with an SEQ rating of 7.
The second flow I tested was playing the company’s showreel (a user goal).
It had a 100% success rate, 9% misclick rate and an SEQ rating of 6.2.
The third flow I tested was to get back to the homepage from a project page. This was to test if a back button was needed or not.
It had a 100% success rate, 0% misclick rate and an SEQ rating of 6.4, therefore I do not need to add a back button.
Final Wireframes
To view the full wireframes click here
Testing
I did 3 rounds of usability testing remotely using Maze. I had to go for unmoderated for the majority of feedback (due to the same constraints that stopped me getting more user interviews) which is a blunter tool than moderated.
Results
The first flow I tested was sending an email to the company (the business goal and one of the user goals.)
It had a 100% success rate, took on average 16.9 seconds and had an SEQ score of 6.5 out of 7.
The second flow I tested was watching the video for the project ‘Big Flight Films - Giant screen 3D’.
This had a success rate of 74%, took on average 28.2 seconds and had a low SEQ of 4.1.
I looked at the data and saw a large number of clicks on the showreel (a different video)
Some user feedback said that the text for the videos was too small so I increased the size of the text, and also changed the link in the nav and footer from ‘Projects’ to ‘Videos’, as this was clearer and also matched up with what users had said they wanted from the site.
Changes after testing:
A responsive website for a production company specialising in gaming engines