The Victorian Society asked me for a better website
So, I rolled my sleeves and overhauled their existing page. From the information architecture to a new booking system — I left no stone unturned.
TYPE OF PROJECT: Website overhaul, Arts and Heritage
MY RESPONSIBILITIES: Research, Information Architecture, Product Design, UX Strategy, UI Design
TOOLBOX: Adobe XD, Adobe Illustrator, WordPress, Trello, Maze
PRODUCT DESIGN FRAMEWORKS: First principles, Requirements and constraints, Impact-Effort matrix
UX METHODS: Contextual inquiry, Surveys, User and stakeholder interviews, Card sorting, Persona building, Task analysis, Journey mapping, Userflow, Prototype feedback session, Heat maps, Analytics review
The Victorian Society is dedicated to protecting Victorian heritage across the UK. The group’s director, Joe, asked me to evaluate their existing website and improve its functionality. Following our meeting, I was able to establish that the website served a twofold purpose: to encourage volunteers and donors to support the cause and to generate income from book and event ticket sales.
Although the buildings they look after date back centuries, their website doesn’t have to
A few days and Zoom calls later, I met with the members of the society to better understand what the potential pain points of the existing product might be. For my research method, I opted for a contextual inquiry. This allowed me to hear unmoderated feedback and see how well the website served its purpose when the user was prompted with a task to complete.
Observe closely and the problems will be revealed
I instructed the participants to book an event on the society’s website or to try to enlist as a volunteer. Their frustration about finding the relevant sections on the landing corroborated my assumption that the website suffered from the home page syndrome. The site was a catchall of crammed news bulletins, overloaded banners and social media feeds.
Asking why (a lot)
I needed to devise a way to declutter the crowded place that this website has become. To improve the site’s navigability, I supplemented my research with a Maze survey that helped me gather stakeholder opinions about the site’s current look.
The testers pointed out that the scarcity of colour and lack of hierarchy on the site leaves the visitor unengaged and disoriented as to where to click on.
Defining the scope
I began to understand what was amiss in the user’s interaction with the product. I met once again with the client to discuss what type of Minimal Viable Product would be the best preview for a new product given a strict timeframe.
Using the requirements and constraints framework, we decided that three interfaces that should be presented to the stakeholders at the end of the sprint were: the Home, Events and Books pages.
Untangling the confusing navigation
Apart from the messy overload that the home page of the Society has become, there was one more emergency that required my UX attention. The navigation on the home page, though minimal, turned out to be an overgrown labyrinth of secondary categories and superfluous pages. Once the user clicked on the top navigation category, they would be sent to a separate site that enlisted the contained subpages within that category.
I know, that already sounds confusing. In other words, it was against the user’s expectation, to be sent on a separate page and asked to make a choice between “Committees”, “Trustees” and “Annual reports” soon after they had clicked on the “About us” category on the home page. This system created an unnecessary number of layers that the user had to go through simply to, for example, find out who the trustees were.
This information needed to be available one click away from the home page. I crafted a new menu that brought all the subcategories in one convenient place, an expandable mega-menu. To indicate the existence of hidden subpages, the navigation categories that held more than one label would be marked with an arrow icon.
Getting heated with the heat maps
To see how well my mid-fi prototype is doing in the eyes of the users, I set up a usability test round on Maze. Unlike the 1-to-1 testing, I could reap the benefits of Maze’s technology and evaluate my design with heat maps. Using this method was particularly important to me since, in my contextual enquiry, I noticed that when prompted with a task to complete, many users would struggle to find the right section on the cluttered home page. This often led to UX’s no. 1 enemy, i.e. the user’s frustration when the clicked button or section wouldn’t initiate the desired action.
The heat map results were promising and suggested a remarkable improvement from the discovery stage. When prompted to purchase a book, 10 out of 10 users would click on the intended “Our books” navigation category.
Similarly, users seemed to positively respond to the card layout for the upcoming events. 9 out of 10 users clicked on the “Book now” button to reserve their ticket for the next talk organised by the Society. Only one user found it disconcerting that the “Events” category was not present in the top bar navigation.
Going hi-fi
Back at the drawing board, I wanted to underscore society’s contribution to heritage protection. With the introduction of red brick tones, the monotony of the existing product gives way to the colour blocking that restores a much-needed hierarchy.
To address the cluttered navigation, I asked the stakeholders which categories they would prioritise if they were to donate or simply wanted to buy one of the books from the e-shop.
The Victorian revival
The new home page offers a fresh and uncluttered environment that fosters better learnability through the use of familiar elements such as the hero banner or draggable carrousels. The priority is given to the society’s mission to recruit more members with an explanatory note on how to help the cause.
The new e-shop page allows the users to browse through the books with the cards replacing the text-heavy look of the previous website. Enough details and a dominant cover picture serve as an inviting entry point to the purchase.
The event calendar with the navigation selector gives the user a choice to see the overview of other months. The language of the microcopy (“Last chance”) encourages the user to book a ticket.
● See how this product works on adamwieclawski.com
Misclicks begone!
The clickable prototype was sent for a round of testing via Maze where I could observe the behavioural patterns of testers towards the new product. Using the heat map technique, I was able to note a decrease in the rate of misclicks by 75% when prompted with the same tasks I had previously asked my users to complete in the contextual enquiry.
A crash course in tradeoffs, UX writing and client negotiations
Working for the Victorian Society was a lesson in meeting the needs of the client against time and effort constraints. It taught me how to develop a succinct viable product that addressed the existing pain points revealed in my research.
I learned that the amount of time I could spend meeting impossible deadlines for monstrous projects could also be spent talking to the client about the compromises that needed to happen. Sitting down with the client and looking at the most popular functionalities of the website made us both realise that certain aspects of the site, such as the social media feeds, didn’t require my immediate attention since only a small portion of the visitors would interact with them.
Building the prototype was also a chance for me to improve my UX writing skills. From changing the words in the headers to editing the microcopy of the e-shop, I got to elaborate a new tone for the website that coveys the respectability and enthusiasm of my client’s brand. As designers, we get often carried away with how the interface functions and looks while its content takes a back seat. Improving the language used on the website is as important as the visual side.
“[Adam] approached things logically speaking to those who used the website and ourselves to ensure he understood our objectives. He was happy to then further refine things as our ideas developed seeing things in the flesh.”
— Joseph O’Donnell, Director of the Victorian Society
Resources that helped me
When I embarked on this project, I knew that the lion’s share of my time will be taken up by stakeholder discussions. Talking to others about your designs might seem like the most obvious thing in a UX practice, especially retrospectively in the form of a case study such as the one you’re reading right now.
However, it is an entirely different story when your job is to communicate your design decisions on the spot to a group of non-designers that you have just met via Zoom. O’Reilly’s “Articulating Design Decisions” (aka the parrot one) came to my rescue. When sending my prototypes for testing, some stakeholders expected a fully developed website. This book was full of useful tips on how to explain 101 UX terms to the “outsiders” without sounding arrogant or haughty.
Kristina Halvorson and Melissa Rach’s “Content Strategy for the Web” helped me audit the existing website. Their list of qualitative audit factors such as actionability (“can I join the society from the home page?”) or the knowledge level (“what does the society actually do?”) was of great assistance during my initial evaluation of the product.
In the same vein, this lengthy (but very useful) NN Group’s article on the top guidelines for the home page design was a true treasure house of information. The numbered list helps you cross-check the design against the recommended criteria while you are working on your prototype file.
