In the previous post I detailed the initial engagement process with the charity team. In this post I’ll show how this engagement was taken to the next level and led to the creation of the initial websites structure and navigation plan which then helped pave the way forward to making some paper-based design prototypes.
Working out navigation, structure & homepage elements
The first thing that we decided to tackle was the main structure of the site.
This involved outlining the main areas, what they would be called, deciding on language choices (for example ‘who we are’ rather than just ‘about us’) and the scope of how many top-level sections the site should have.
After a few hacks and sketches the team and I came up with this:
Site structure 1.0
This gave the site 5 main sections:
- What we do
- Get involved
- Our events
- Donate now!
- Partners and volunteers
Homepage elements (content)
Now we had a good indication of the scope of the navigation I could begin to estimate the ‘size’ of the site and more importantly how complex the designs/layout would be for the separate sections.
The first of these sections that needed to be clarified was, of course, the homepage. So we set about taking information from our initial engagement sessions and refined this down into a list of elements (content, images, calls to action etc) that would be on the homepage.
This was done and re-done a few times before we decided on:
First draft of what elements would go onto the homepage
Once I had this I could now put my top-notch art skills (ahem) to use and develop a paper-based and very basic mock-up of how the homepage could look.
Eventually we settled on this:
Not perfect, but you get the idea – note the ‘mobile’ single-column view on the left
This sketch may not look like much but it was the first step in building out the rest of the main sections.
Aside: you’ll notice the ‘mobile view’ to the left of the ‘standard’ view on this sketch. It’s important to note that the the site was not built using a purely ‘mobile-first’ approach, more of a ‘mobile-in-mind’ approach. I will cover this more in the technical post.
Fleshing out the rest of the site on paper
After the homepage was signed-off I moved onto creating mock-ups of the agreed top-level sections.
Mock-ups were drawn on sheets of A4 with the help of the charity team and took around an hour to finalise.
Charity website mock-up gallery
What we do landing page
Get involved landing page
Schools ‘get involved’ detail page
Event listing page
Donate landing page
Donate info page
Partners and volunteers – split page
Involving the team in the ‘physical action’ of drawing out their website on sheets of paper was the best way for them to fully appreciate how the site was coming together and a great way for them to ‘own’ the content.
Time to get digital
Up to now, apart from the initial quick mock-up I did in Photoshop (see previous post) I had done no work ‘at the computer’ on this project.
This is an important note to make for projects of this type, do not rush into building things, get the ideas right, do AS MUCH AS YOU CAN on paper first and engage, then engage again.
In the next post I’ll outline the digital prototypes that were developed based on these sketches and how the charity team helped to populate these with ‘real’ content before moving forward with a more advanced build.
There will also (finally) be some technical/code stuff to talk about. Although I’ll try my best to keep this simple.
Final word on engagement
You can read about the amazing charity team in the June issue of our hospital magazine
In terms of engagement – it’s worth adding that I was lucky that the charity team is very small (2 people, 3 if you count the mascot) and they have a very clear vision and are incredibly dedicated to this project.
If things were different (larger team, less dedication, harder to engage with) then this process could have taken months and frustration and doubt could have crept in.
This can often lead to a ‘sod it build it’ approach where code/designs and even fully working prototype sites are made before the team responsible for the information have shown any commitment or drive to make the site a success.
Obviously, this isn’t the right way to build any website and although no ‘formal’ process has been followed in building this site the end product will be much better for the engagement that was done.