We like accessible, functional, responsive things that are mindful of people’s needs. We wanted our website to be the same. So…*drumrolls here please*… a warm welcome to our new online home! Usually, we’d welcome guests with hot drinks and cookies but in this instance, we’ll provide virtual ones. As you might have noticed already, few things have changed around here.
What did we do and how did we get here?
Start with people and journeys
As with any Snook project, we began with personas and user journeys. We focused on all the various people who may go on our website to find information, learn more about service design and contact us for projects. After all, who are we designing for and what do they need?
We implemented the feedback gathered through a Typeform right after the launch of our previous website. We shared our questionnaire with partners and clients to understand what worked and what could be improved. Our purpose? Define an information architecture grounded in the understanding of user needs.
We work with a wide range of people, from individuals to corporates and public to the private sector so it’s important for our site to be relevant for each one of them and fit their specific interests. We asked our team to share knowledge of current clients and potential users to develop Snook personas – a live, ongoing process. We developed user journeys on Realtime Board (a handy online tool) to visualise key interactions. Using the same tool, we created the sitemap for our new website.
Lego creates blocks with a set range of sizes, allowing you to build whatever you want. Standardised sizes mean that the production of Lego Block is fast and that people understand how to use them quickly. This is how we set to create our new website – with block components. Elements are used across the website and not just on a single page, it only makes sense to think of them holistically.
What blocks do we need, where and why? We defined 45 blocks in a Components Library spreadsheet. To do so, we started by sketching basic wireframes of the website. We then identified repeating blocks and used them to design mockups of how it would all work together.
Mobile ready and accessible
Limitations can be a good thing. By starting with the smallest screen size, we focused on what was essential for our website.
We designed mobile components first before we even considered how the content would expand to fit larger screen sizes. It’s nice to say we crossed off a lot of unnecessary nice-to-have items from our list.
“Too red and kind of strict? I’d choose different icons for the services and a less strict page layout. I also liked more the previous version with the photo stream on the home page, without the red-colored layer on top. It made the site more vibrant, colourful and creative. Just like you!”
– Snook client
We listened to the feedback received and reduced a bulk of the colour red used throughout the website, even if it’s our brand colour. We ensured consistency of elements such as buttons so that users can quickly navigate our content. A clear logical layout structure across our pages and within typography makes our site more accessible. Thanks to Eve, we make sure we write content in Plain English so our content is easy to understand. One online tool we find useful for this is Hemingway App.
Can’t find what you’re looking for?
Searching is a common, everyday action. Chances are if you’re looking for something, you will use the search bar. We have built a smart search and website taxonomy that organises tags and categories to make sense of our content. Everything is organised and searchable. Content is grouped according to clients, services, team members, topics and post types.
It’s an ongoing learning process
With any project we take on, there are a lot of learnings along the way.
Developers are people too
It’s the nature of remote work. We don’t often get to sit in the same room with the people we work with. We forget developers are not working machines but real people like us. Understanding how each one of us works to create an effective remote team was a tremendous learning.
What might be obvious to a designer shouldn’t be taken for granted. If wireframes are developed with a focus on grids rather that specific pixel sizes, the whole team should be aware of it.
If a design follows a specific thinking process, communicate it clearly. It’s better to invest set-up time at the start of a project than to stop halfway through because the team is confused.
Don’t get stuck in the testing cycle
DoneDone is a fantastic way to track and report issues yet, three testers VS one developer can be quite overwhelming. Scheduling alternating testing and development weeks allows more breathing space for everyone. If progress stalls, allow developers to prioritise bookmarked issues and tackle them accordingly.
It’s not easy doing it yourselves
Creating and managing content plus doing final reviews have proven to be a great obstacle. Spreading content creation across the whole team doesn’t work. Our projects have priority over internal projects and managing 14 people to produce content together is not a good use of resources.
How we fixed this (almost).
“I can’t write a case study. It will take me a day. But I could present it in detail in 5 minutes.”
Some of us write well, others are great speakers. We shared content issues with the team and defined a new, less daunting process tailored to individual skills and preferences. For instance, we interviewed fellow team members and captured these conversations on audio. With one content owner in charge of translating this onto our case study templates, our site started to take shape with real content.
“Reduce, reuse and be realistic.”
Building a website is an iterative process. Remember, it’s impossible to get the approval of everyone on the team with all the desired features and doing it fast.
“Although this website felt like a never-ending marathon, we learned to travel light and identify what to drop during the process.”
We chose function over form and prioritised the most important features. In doing so, we created a smart site that will showcase, filter, connect and make sense of all its data in an accessible way.
We also made sure that the backend of the website is simple to maintain, easy to build pages and pull together content.