Last week, we were delighted to soft launch Wholegrain Digital’s brand new website. It marks quite a big change from our last site – and we feel it’s a big step up!
The new website project was initiated last summer. We had gradually realised as a team that our old website was not truly serving our best interests, nor did it reflect the true breadth of Wholegrain’s skill as a web design agency. With our old site, we had pushed boundaries in web performance and sustainability that were pretty groundbreaking, and we had learned a huge amount from the process. However, there were other factors that we needed to address.
Firstly, we had to communicate our culture as a team better and create more of an emotional connection with people as soon as they arrive on the site. Our previous website was clean and slick, but it didn’t have the warmth that the Wholegrain team exude in real life. Our aim was to capture this perfectly in our new website’s design.
Secondly, although we believe it is important to practice what we preach and lead the industry in terms of web performance and sustainability, we recognise that we also need people to follow our lead. Our previous website looked nice, but it felt a little bit too corporate and didn’t best represent our own creative skills, or showcase how a web experience can be both efficient and visually rich. This is what we wanted to demonstrate with the new website.
Adding delight & personality
As an agency, we wanted to communicate our commitment to sustainability and positive thinking right from the outset. It’s easy to explain this in words, but visualising it was a brilliant challenge for our sustainable designer, Alex!
We added a loading animation on our Homepage of the rising sun, which represents our collective dedication to starting the day right and building positive relationships. The grains reflect our brand, while the wind turbine represents our mission to be a truly sustainable company and create a web powered by renewable energy.
This new hero communicates our collective love of nature as a team, while also being a fun way for us to showcase how animations can be energy efficient. To add some whimsy to the site, we also gave the Homepage hero a “night mode” – at the end of each working day, a night sky and stars appear!
Warmer Colours
From a brand point of view, we felt that the website refresh was the perfect opportunity to update our brand identity. We held onto some core elements we have used through the years – including our logo and the ‘blob’ shapes – but revamped the colour palette.
We wanted the new site to feel warm and confident. Our designer Alex and co-founder Vineeta separately created sample colour palettes. As if by magic, they both came back with almost the exact same colours – dark purple, teal, and a warm mustard yellow. When the team reviewed the design concept, it received unanimous approval!
The new colours also presented an opportunity to move away from white and blue, our previous two brand colours which – ironically – are the two most energy intensive colours on OLED screens. The new brand colours make our site feel warm and vivid, with the added bonus of being more energy efficient.
New and old fonts
We chose to continue with our previous, open source brand font Inter UI, to keep some brand consistency. Our new site is using it as a body font. As the new title font, we chose Cooper Light – a serif font with round edges, it looks both charming and professional. We feel that it gives us the right balance.
Case Studies
Showcasing past work is hugely important for any agency, and we wanted to make this the focal point on the new site. Case studies are prominent and have been designed to draw users in. On the Homepage and elsewhere across the site, they appear as a slider of cards with gentle hover effects. The case study archive showcases our best work, giving our website visitors a full breakdown of each project. At the top of each case study, we have added a summary and some of the most impressive results we achieved for our clients.
We want our users to experience our work and visit the websites themselves to have a look around. That is why we’ve kept the content simple and clear – with minimal pages. We don’t want users to have a complicated journey when it comes to exploring our portfolio – it should be straightforward and concise.
At Wholegrain, we pride ourselves on our ongoing relationships with clients. We have some brilliant client testimonials, which we wanted to weave throughout the site. We’ve created a quote block that we can add anywhere, which easily relays our expertise and commitment to our clients across the site.
Attracting new Wholegrainers
Our Careers page is one of the most important pages on our website. We treasure each team member and want to attract the best talent. It’s very important for every member of the team to live and breathe Wholegrain’s values, so we didn’t want to create a generic page of job listings.
We want the Careers page to shine a light on our company culture. We made it more visually engaging by including illustrative icons to represent the perks we offer. An image carousel features photos from some of our many team away days and events.
In the opportunities section, we included an option for unsolicited applications, so people can get in touch even if we don’t have open positions that suit them. We’ve found that the majority of people we hire are genuinely interested in Wholegrain Digital’s mission and want to be a part of it, so connecting with like-minded people is important for us.
To allow potential candidates – and clients – to learn more about us, we also expanded our Team page. On the previous site, we avoided having separate pages for team member profiles. However, many team members are actively promoting Wholegrain’s mission via talks, blogs, interviews or otherwise. The new team member pages give everyone a place to showcase what they do and talk about their achievements.
Conclusion
We wanted our new site to be a true reflection of where we are as an agency right now. We think we might have nailed it! We’ve injected warmth and candor into our brand, without losing our commitment to accessibility and sustainability. Despite all of the bells and whistles we added to the new site, it still has a highly efficient score on Website Carbon, our tool for measuring the carbon emissions of websites.
It proves what we have known all along – that you don’t need to sacrifice beautiful design when creating low carbon, accessible websites!
Over the coming months, we will continue to refine our new website and add more features. We already have some brand new ideas in mind that we have never attempted before…. watch this space!