Case Study: Redesigning Privacy International’s Website
I started redesigning Privacy International’s website in the winter of 2019/2020, after working with them previously in 2015 and 2018. They had gone through a rebranding process in the summer of 2019 and wanted a brand new website theme to reflect this.
I was updating my Dribbble portfolio with the work I’ve created over the last few years and I realised how extensive the work I did for Privacy International was, so I decided it deserved a case study!
I worked with PI between November 2018 and May 2019; I went through a substantial wireframing and design process before coding a brand new theme for their Drupal website. It was more efficient both time and budget wise for PI to sign off Balsamiq wireframes and high fidelity designs in Adobe XD, rather than designing in the browser and recoding components based on feedback. It was also easier to collate comments as feedback in Invision from all the stakeholders, action the feedback and upload new designs. I worked with three stakeholders throughout the process, together they oversaw the entire vision of the website, the brand and the technical delivery.
Privacy International are an interesting client because they’re a privacy non-profit organisation, therefore I have a lot more constraints with the code I produce. It’s preferred that I only use CSS and very minimal Javascript, as some of their users will visit the website with Javascript disabled. The least amount of PHP or templating language such as Twig I use the better and I have to code with the markup supplied from Drupal and design with all of this in mind.
I’ve uploaded my previous design work I did in 2015 and 2018 in this Dribbble project and the 2019/2020 redesign is here.
Wireframing
After a kick off meeting and a small discovery phase, we began this project by creating new wireframes. This was no easy feat as there are thousands of pieces of content, all using multiple taxonomies, so it really is an information/content heavy website.
This stage was incredibly crucial because of sheer amount of content and it helped ensure I was on the same page as the stakeholders. We considered every piece of content and it formed a plan for the rest of the project. In the end, I designed 40 different wireframes and I created an epic spreadsheet detailing everything!
Colour Palette
Before I jumped into designing any page templates, I took the colour palette from PI’s new brand guidelines and turned it into a web friendly palette. I spent a lot of time working out which colours were accessible and how they could be used for the web. I ran every colour through a web accessibility checker tool to see which colours worked as text on a white background and which shades worked as a background with black or white text on top.
We needed an excessive colour palette because we wanted to use colour as a key for each different piece of content, for example, news articles are red, case studies are purple etc.
Homepage Design
The original brief for this redesign was not only to reflect the new rebrand but also to:
- Use more white space to improve readability
- Include text for teaser pieces of content
- Ensure taxonomy terms and tags are more visible
The first page I always design in a project is the homepage; I understand that it’s not always the most important page, particularly for PI, as they have so many pieces of content. People are more likely to find pages in Google than the homepage. However, I think the homepage gives me the best chance to work out an overall style for the website, which I then can apply to all the other templates/components.
Having detailed wireframes speeded up my high fidelity design process because I could focus on applying the brand fonts and creating a system for the colour palette etc rather than also having to think about the placement of each piece of content.
The grid was one of the first elements I designed; I needed a grid that was responsive and reduced the number of columns and width of the gutters for smaller screens. The grid system had to allow for content to span the whole grid but also show content in a row of 2, 3 or 4 items.
The grid system didn’t need to reinvent the wheel, so we ended up with 4 columns for mobiles, 8 for tablets and 12 for desktop. Where possible the content was stacked neatly for smaller screens and readjusted for each different grid. We tried to make sure all the content was important and necessary enough to show on all devices. We didn’t want to add anything that padded out the design on larger screens and we tried not to remove content on mobiles.
Content pages
I really enjoyed creating a template for the content page, as this really is the heart of the website. We wanted the content pages to be clean and a beautiful reading experience, so I focussed on the typography hierarchy and ensured there was plenty of white space to let the content breathe.
I also created another full template design for a taxonomy listing page; I felt it was important to see when combined if sections from the homepage and content page worked together. This was important to finalise these elements before I moved onto the style guide and pattern library.
Iterations
Sometimes I think the more interesting story is how I ended up with those full page designs…
There are always tricky elements in a website; sometimes it’s the placement of something like the newsletter sign-up box, but for PI it was three buttons on the homepage. They were important because they were the three main calls to action and one of the first pieces of content a user sees after the slideshow. They were also a pattern we wanted to repeat on other templates.
I went through many iterations and tried so many different ideas; looking back now the pages in Adobe XD seem a little extreme. I honestly didn’t realise three buttons could have so many different variations!
In the end, the buttons that were launched (simple circle images with a singular title as a link) were replaced by an older version that included teaser text after a few months.
The slideshow was another problematic area; at this stage of the process I was still working out how to use the colour palette with real content, so I experimented with a lot of different colourways and versions of the gradients until we came up with a system to follow.
I didn’t always create the variations in isolation; when I felt we were close to an ideal solution I added them into the homepage template so we could see the blocks in context. This visualisation made the difference and helped the stakeholders approve the final designs.
Another important feature of the PI website was the featured and related content sections because adding text to the teasers was one of the main aims for this redesign. I experimented with different layouts and various ways of highlighting the content types (i.e. colour or gradient as a key.)
There were smaller elements that I explored a number of times; these included block quotes because PI heavily use quotes within the content. It was useful to see how varying length quotes looked in a block of content. If I had used Lorem Ipsum I would have guessed at the length but real life content takes away any assumptions!
It wasn’t just different pieces of content I experimented with, I also took multiple passes at the navigation, search box and footer in the base template.
I really enjoyed working with Adobe XD for this project as it was possible to keep all of these iterations on the same page for easy comparison and it was very straightforward for PI to approve their preferred option.
Style guide
After creating the three full page templates, I focussed on designing the style guide. It was a good opportunity to take each element from the page templates and double check there was consistency across the templates and to style anything that was missing.
I always create a style guide before creating a pattern library so I can solely focus on elements like headings, paragraphs, forms etc because when combined, these elements become components for the pattern library.
When coding a template, I tend to include all the information from the style guide in my base theme. It’s always useful to refer to a style guide alongside the page templates because it means I don’t have to make many decisions and I can concentrate on writing good code.
Pattern library
Even though we created 40 different wireframes, I never intended to create 40 high fidelity templates, purely because it was a waste of my time and PI’s budget!
This is where the extensive wireframing became very useful because I was able to go through each template and pick out all of the different components. I also made sure where possible, that components were shared across templates, but considering the amount of content PI have, the pattern library is still very vast!
This was the last piece of design I did before I started coding the theme and was my final opportunity to get sign off from PI and set myself up well before moving into writing code.
Final thoughts
After the design process I spent many weeks coding the theme. As we covered so much during the design phase, the team at Privacy International knew exactly what to expect from the final theme and thankfully there were no surprises!
The website redesign has been live for 2 years although it honestly doesn’t feel that long because of the pandemic!
I’m very proud of the work I did alongside the team and because of the combination of the pattern library and the flexible templates, it feels like we really did think of everything!
Work with me!
My portfolio is over at Dribbble http://katherinecory.com where you can see more of my work. If you’d like to see what story I can create for your brand and/or web project and think I’d be a good fit for your business, please get in touch by emailing me at hello@katherinecory.com.
Thanks!
