Narrative & Storytelling

Description: As part of our Narrative & Storytelling module, I was tasked with the design challenge of retelling the story of Sherlock Holmes, in our ‘Heroes & Villains’ project. I had the freedom of being able to tell the story by utilising the content in whichever way I felt would make for the best User Experience (for example I could have chosen to build a website with no body copy where I had to tell the story through illustrations alone).

I had to examine how storytelling through design can be used to enhance content and consider how concepts like art direction, pacing and narrative can be used to control the flow of information. It was my job as a designer to explore these different principles when developing my ideas and apply them to transform simple markdown into an elegant, interactive User Experience.

Platform: Desktop

Skills: Narrative & storytelling, UX Design, Art Direction, User Research, Illustration, Information Architecture, Interaction Design, Content Design, Macro and Micro Prototyping, Learning From Film, Understanding Behaviour.

Project Goals

  • To explore the principles of narrative and storytelling, enabling me to consider their use as part of the content design process.

Design Toolkit

(Adobe XD was used to create the Prototype for this deliverable)


As always, I wanted to conduct a sufficient amount of research before I dove into designing and building my site. I feel that when I am gathering research, the majority of the time it is done online and so to push myself out of my comfort zone, I tried to incorporate more unorthodox, offline methods.

Offline Research

With Sherlock Holmes being based in the 18th Century, I initially quite liked the idea of a Victorian Era newspaper-styled website. Of course, I had no 18th Century newspapers lying around the house, so I decided to make my own Victorian style paper to give me a feel of what it actually looked like and to see how text would look against the different coloured pages.

I found a cooking tray that was big enough to fit the whole sheet of paper down flat, then filled the tray up and submerged the paper in coffee. After the paper was submerged in the brew, I used an old soft bristled brush to brush the coffee deeper into the pages. I held the paper down and brushed across the entire surface of each page a few times to get the coffee soaked in and achieve that uneven staining effect. Then, I simply left the paper in the tray to soak for 5–10 minutes.

After the time was up, I took the paper out of the tray and set it onto a sheet of foil (mainly so it didn’t soak through to the worktop incase my mum killed me) and dried it off with a hairdryer. This probably would have been enough to give it that beige/brown stained colour, but I wanted to take it one step further and put the page in the oven. The reason for this was to dry the paper out and slightly blacken the edges and corners. I knew this would give it that crumpled up, darkened effect I was going for.

Finished. I took the paper out of the oven and it was a great success, it’s actually always something I have heard people talking about and something I wanted to try — so I was really pleased with how well the paper came out.

Online Research

It was up to me as a designer to use my initiative and visualise the Sherlock Holmes content into a website that told a story. There were a few key rules that I had to conform to and implement in my website to make it a positive User Experience.

Five Rules

  • Focus on the body copy

Type Scale is a visual calculator used to choose the right type scale for your project. This website was shown to me last semester by one of my lecturers, Kyle Boyd. Given the nature of this project, I had planned to have a fair amount of body copy; so Type Scale was a super handy way of trying out different fonts and getting a feel for how they were going to look at different sizes.

(Type Scale shown above)

A Change of Direction

After my research, I had gathered an array of really useful information which was generated through implementing different research methods. Although I really enjoyed the whole coffee-staining experiment, I couldn’t help but feel that I was limiting my designs and the potential of this project by pursuing the newspaper-themed site.

I thought to myself, just because Sherlock Holmes was based in the 18th Century, does not necessarily mean that my site cannot be modern. There are after all, lots of 21st century Sherlock Holmes related shows and films.

Throughout my research, one of the things I looked into to help spark ideas, was objects that were linked with Sherlock Holmes (such as the deerstalker hat and pipe). I began sketching these objects out with the goal of later digitising them into beautiful vectors.

*sketches of sherlock objects*

Vector Creation

I liked the idea of representing each section on the site with a corresponding vector, so for example, the 221B Baker Street section would be represented by a vector of the door.

Influenced by various other websites, I wanted my vectors and sections to each have 100VH. I wanted the elements on screen to have plenty of breathing space, I felt this would really aid my minimalistic style and contribute to really modern, clean interfaces.

Final Screens

(I chose not to screen record the entire site to reduce the size of the video file)

— — — — — —- Feel free to check out the finished website here! - — — — — — —

Featured Learning Curve

In the early stages of my Sherlock Holmes website, one thing I had trouble initially getting right was my illustration style. Whenever I scrapped the idea of my site being designed as a Victorian style newspaper, I decided that I fancied the idea of having a London cityscape on my homepage. I wanted to do this because 1) I thought it would make for a great, detailed illustration and 2) Sherlock Holmes was as we all know based in London, so I thought a nice cityscape of various landmarks would set the feel for the website right at the homepage to grip my users.

However, when designing this illustration of the London eye, it did not cross my mind that it did not conceptually make sense. After showing my lecturer, Chris my other illustrations of Sherlock Holmes’ pipe and the door of 221B Baker Street, he explained to me that this London eye was far too detailed to be alongside my other icons. He also explained how it did not conceptually make sense due to the Ferris wheel only beginning to be built in the 90′s. The wheel was opened to the public in the year 2000; a long time after Sherlock Holmes was based.

I fully understood how this illustration would no longer fit as a part of my site. Of course, I spent time on the illustration (look at all those lines!) and so was naturally disappointed when I realised this myself. Nevertheless, this process was not a waste whatsoever! From making this mistake, I actually feel like I learned a lot more than I would have normally learned just designing an illustration for something. I learned to not be so precious with my work and not spend lots of time digitising something before I know for sure that it’s definitely going to work. I also learned to keep my illustration style in mind at all times when designing new icons (which can, of course, be applied to any future projects). Even if I did learn the hard way.


I was really, really pleased with how this project finished up. I feel like I especially challenged myself when I went down the road of incorporating a lot of JavaScript into my website; which pushed me out of my comfort zone and really improved my HTML, CSS and JS skills!

This project introduced me to aspects of design I was a lot less familiar with such as narrative, storytelling, art direction and content management. I know exploring these principles will prove extremely beneficial, due to all of them being fundamentals I can apply to any design from now on. Nevertheless, I feel like the area I personally improved the most in, was illustration. To keep this case study concise, I’d welcome you to read about my entire illustration process on my Tumblr blog by clicking here.

How I would improve

Apart from the usual refinements, I felt that there were a few things I could have done to improve this design even further. Due to deadlines, I ran out of time and one thing I would have definitely utilised would have been user testing. I must always remember I am designing for my users and not myself. I feel that user testing would have outlined areas or aspects that could have been improved further and increased my site’s user friendliness.

Lastly, I experienced various obstacles throughout my time actually coding the website; which I feel was purely down to development being one of my weaknesses. I managed to overcome these obstacles, which was great, but I did experience a few issues with my responsiveness in particular. (I am currently working on resolving any remaining problems) Even though I pushed my HTML, CSS and JS abilities even further in this project and was extremely happy with the end result, there is still a lot of room for growth in this area . It is an ongoing goal of mine to improve on this, so that I can consistently produce responsive websites with high functionality.



Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store