Studio Voltaire & House of Voltaire
- Research and planning
- Website design
- WordPress development
- Shopify development
New WordPress and Shopify websites for Studio Voltaire, London
Studio Voltaire was initiated in 1994 by a collective of twelve artists who set up a studio space in a disused tram shed on Voltaire Road, Clapham, London. In 1999 the organisation moved to its current location on Nelson’s Row, close to Clapham High Street, London and grew to become a registered charity in 2001. The move to a larger site enabled them to expand their provision of affordable studios and offer a dedicated gallery space in a Victorian former chapel, adjacent to the studios, both of which remain unique resources for the local area.
Studio Voltaire’s existing website was not showcasing their artist’s work in the best light possible. Images were very small and the site was not responsive meaning that the mobile experience was not optimised. The gallery also run a very varied programme of events including studios and artists in residence, an education programme and a shop (physical and online). Being a registered charity, it was important that Studio Voltaire were able to promote their various memberships and remove any friction between showing an interest and signing up for more information.
Studio Voltaire felt that the old website was clunky, text heavy, template restrictive, difficult to change (although already on WordPress), had an unclear navigation, low image resolution, and didn’t really help them to tell their story online.
Working together we were able to come up with a list of aims and objectives for the new website. These included:
After working directly with the Whitechapel Gallery on their new website, we had a lot of insights that we could directly feed into the Studio Voltaire planning and requirements gathering sessions. Together we explored their different users and their personas (these had been generated by Studio Voltaire through interviews and questionnaires). The main audiences they wished to engage with were:
After defining these users, we then listed out their objectives and ensured that any future decisions would always bear these in mind. We always like to create large posters in the studio, covered in post-it notes and whenever we need to make a design decision we always refer back to the users and ask “does this meet their needs?” as well as looking at the business objectives and think “does this also meet their needs?”. It is this balance of user needs and business objectives that makes the planning and research stage so vital in the success of a website project.
Running deeper into our exploration process, we investigated how to best make the direct link between Studio Voltaire (the physical gallery) and House Of Voltaire (the commercial aspect of the charity). The outcome was to build an API linking the WordPress installation and the Shopify site, allowing the gallery to pull in live products and feature them as related content on exhibition pages and also on event pages. Being able to cross sell items like this meets both Studio Voltaire’s and the users needs – Studio Voltaire save time by having an up to date product list stored in WordPress and the users are presented rich content on the website.
Read about how we have integrated other websites to make them work harder for organisations.
Studio Voltaire had prepared a new sitemap that they wished to use on the website, together we explored the value of each page and what actions we wished for the user to take. This then fed into the wireframes but also into how Studio Voltaire organised their copy for the new site. After thorough exploration, some of the pages were condensed into single pages and some were taken out all together. Having this clear content structure upfront makes the whole website design process much clearer as it can feed directly into design decisions and also be used to strategically use the website to get users to particular areas.
Using InVision we were able to collaborate with the APFEL team who are based in London and share designs easily to allow for clear communication. These designs were also shared amongst the Studio Voltaire team to ensure they were happy with how the site was progressing. A key element that the Studio Voltaire team wanted to bring into the process was the clear link between Studio Voltaire and House of Voltaire. We did this by defining a clear, online style tile / guide for Studio Voltaire and then changed the font treatment slightly for the House of Voltaire site. This gave two different style guides but you could tell they were part of the same family.
Our development process followed on from the designs. Initially we laid out all the HTML / CSS that would be needed to style up the website, carefully considering interactions around hover and click states to make sure that everything was as clear as possible to the users. We built all the front end HTML in a responsive manner which means that the website would work seamlessly across multiple devices and different viewport sizes.
The website was built upon the WordPress framework. We decided to use WordPress for this project because of the fact that it is open source, Studio Voltaire’s last website was on WordPress meaning that they had good knowledge of using the WordPress interface as well as it being flexible enough to allow for us to integrate it with Eventbrite and MailChimp. One particular area that was enjoyable to develop was the Exhibition Archive / Current Exhibition. We had to solve the problem of adding exhibitions to the website but then being able to choose one which was the current exhibition and also what was the next upcoming event. The solution was to add all events into one area and using PHP we developed it so that in a global options area of WordPress the user can set the current event and the next event. Once these have been set then they will not appear in the archive and will become the active landing pages for the current and future event. By building the website in this way, we were able to reduce Studio Voltaire’s workload by ensuring that they didn’t need to add the same content twice and making it very easy to change the status of an Exhibition from live to archive.
Studio Voltaire regularly hold events at the gallery as well as across London, for this they use Eventbrite to manage their ticket sales. Again we were looking at a way to reduce their internal processes and also room for error. Using our Eventbrite API that we built in house we are able to develop a live link between WordPress and Eventbrite. This means that when they are adding an event into WordPress they can choose which event it is from Eventbrite that they wish to link off to. This link is then automatically generated meaning that the user doesn’t need to copy and paste a link from Eventbrite into MailChimp. If needed we could also pull other information out of Eventbrite for this project the URL was the only valuable piece of information needed.
Speak to Piers today to see how we could integrate Eventbrite into your website
Part of this project was developing a custom theme for the House of Voltaire arm of Studio Voltaire. Using the designs provided by APFEL and us completing the extra templates we were able to make the Shopify store look exactly like the designs. For the House of Voltaire team it was important that they could feature certain items on the homepage to encourage traffic to these particular products. We were able to again customise Shopify to allow for the team to decide what categories and from within that category what products were featured on the homepage.
Due to the fact that Studio Voltaire have two independent sites running, we wanted to work out a way to combine the data from both sites when running a search query on the website. Our solution – we developed a way of using the Shopify API to pull all the products into WordPress dynamically which means that the site search can be run on the WordPress site. This makes the website search much more powerful because the user is being returned information about the artists but also the pieces of work available by that artist as well. Having the Shopify API integrated into the WordPress platform also allows Studio Voltaire to cross sell their pieces of work. Now when they add an exhibition they can add related content and feature certain pieces of work for sale by the same or similar artists. Due to the fact that the link is made through the API means that once the item is sold (as many are one-offs) then it will not feature on the WordPress site. This again saves Studio Voltaire valuable time because they do not need to constantly go through and remove items that have been sold from the WordPress site.
Once the WordPress and Shopify sites were completed, we then handed them over for Studio Voltaire to add their content after their WordPress training. This was a quick process because we had worked together to determine which content needed to be kept (based on Google Analytics) and which content could be removed. Having the sitemap produced by the team made this process much smoother. Adding the content is a great time to get a feel for the website and also ensure that all the content aligns when it is added through the CMS. We used our client issue tracker to make a note of anything that we felt could be improved. Once all the content was added we revisited some of our design decisions and tweaked them. This is a very important step in the process because it is almost impossible to design the site perfectly without seeing how the content flows.
We have an on-going relationship with Niamh and Joe at Studio Voltaire and meet up every 2 / 3 months in London to review the site together and look at ways to evolve it in the future. With all of our projects, we look to build an on-going relationship so that the website can be constantly improved upon, based on user feedback and analytical data. Gone are the days when you could build a website and leave it for three years until it is time to build a new one. The web is changing so fast that it is valuable to keep an eye on your traffic and statistics to help inform important decisions going forward.
Speak to Piers to see how your website could work harder for you.