8th March 2018


Natasha Hardcastle photography

Case Study


Natasha Hardcastle Photography is a Portfolio and Blog Site for my client, Natasha Hardcastle. She is a University Student, studying Photography and is eagerly requiring somewhere to showcase her work.

She enjoys photographing events such as Weddings and Proms, so the site would be a great place to privately share photos with the client, by the use of User Accounts.


I began documenting NHP in the form of a Statement of Work, Presentation and ‘Typography and Colours Document’. The Statement of Work Document outlined everything there is to know about the site, all the way from the CMS that will be used to build the site to the Page Structure and Sitemaps.

The Presentation was where my Empathy Maps and Impact Maps were created. The Typography and Colours Document outlined the Fonts, Font Sizes and Colours that will be used throughout the site.

View the Latest Version of Natasha Hardcastle Photography!


I began thinking of the Users who would use NHP, and began creating User Stories. This made me think of what users’ actually want from the site and what features they would require.

Next, I began creating Impact Maps which made me think about a specific Goal for the site and how each user would impact on that goal. E.g. “Increase the Number of Clients”. By encouraging a user to share the photos and blog posts from the site onto Social Media will bring in a greater audience for NHP, therefore increasing the number of site visits. 

Then, I created Empathy Maps. I made 3 Case Studies of users of the site and thought about what they may Say, See, Think and Hear before using the site.


Once the Documentation and Planning had been completed, I began creating a couple of Sketches and a Moodboard for NHP in my notebook.

I then opened Axure and began replicating these sketches as Wireframes they were simple but showed what I wanted it to do. I came up with 2 Wireframe Ideas in total and couldn’t decide which to use.

After the Wireframes, I began recreating the 2 wireframes as Designs, adding colour and images making the designs harder to choose which was best! I used Adobe Illustrator for this, I thought the features of this would allow me to best get my ideas across.

In the end, I chose the Wireframe/Layout I thought would suit Natasha’s needs the most. I thought the use of the Mosaic Photo Layout was a great touch.

The text in the top header will be displayed with a typewriter effect. This feature comes with the theme but I think it’s a great thing to have.

View the Latest Version of Natasha Hardcastle Photography!

Development and Testing

After the Designs had been created, I began developing a Dev Site for NHP. The aim of this wasn’t to be the finished site, but to be an MVP (Minimal Viable Product) – with basic functionality. I began by creating a Sprint on Trello. This was Sprint 3. Each card was categorised into Front-End, Back-End, Design or Testing. This kept the board organised.

Following the Wireframes and Designs, I began building the site. Ensuring I mirrored the designs as much as possible. As this was the Dev Site, I didn’t build every portfolio page – just a couple to show the main functionality of the site. The full content will be added in later versions of the site.

I then created the Test Version of the site. This is where full content was added to the site. Ensuring it matched up well with the Wireframes and Designs. Once all Development had been completed, I then moved onto the Testing phase. This is where I completed several tests, to ensure the site was free from bugs. I created documentation of this, which you can find here.

I also ran some User Testing. This consisted of 5 users, each equipped with a Desktop Computer and a Mobile Device. They were each asked to find a particular page or feature, then rate it Green, Yellow or Red based on the difficulty. You can find documentation of this here.