eCommerce
As well as designing and building your site you need an expert in online payments and security. Here are a few of our online shops.
As well as designing and building your site you need an expert in online payments and security. Here are a few of our online shops.
Website for an international charity which showcases their work, raises money and recruits volunteers.
Healing Little Hearts was founded in 2007 after a group of heart specialists realised that CHD (Congenital Heart Disease) was affecting the lives of thousands of children worldwide. CHD is an umbrella term that covers all heart defects in the structure of a heart that are present at birth and its effects can range from a significant lowering of a child’s quality of life to being fatal.
CHD affects 1% of all children worldwide and can often be completely cured with surgery if it is done in time. However, the cost of an operation is huge and, in countries which don’t have an NHS-style health system (90% of cases), it’s simply not an option for parents.
Healing Little Hearts gathers together teams of surgeons, nurses, etc. who travel to a specific country and set up a “camp”. A camp is usually based around a specific local hospital, but children from anywhere in the country can travel to receive free operations.
The operations, travel and accommodation are totally funded by the charity, and the team work for free by synchronising their annual leave. Over 2,300 operations have been performed by HLHs sin 2007 in sixteen countries.
HLH needed a website that could be quickly updated with the fast-moving news and daily reports for their camps to get across the scope of their work. Other requirements were to be able to take online donations, encourage volunteering and a merchandise shop to raise further funds. The full list:
Every country HLH visits is listed on the site on an interactive map, and every camp completed has a photo or video gallery.
We made heavy use of WordPress’ custom post types to allow us to segment different yes of information, but also mix them together. For example, a Country post will also automatically detect News posts and Story posts which mention that country and display links to them at the end. Doing it like this means the site pages become interlinked and allows viewers to follow different trails, or to browse in a more traditional way if they are looking for a specific piece of information.
WordPress’ Gutenberg setup was also very useful in allowing us to create custom content blocks to make updating the site faster and less of a chore, and we used WooCommerce to run the merchandise shop.
We took some time to archive HLH’s previous camps and present them on the site so it wouldn’t be empty on launch. This is an ongoing project and we will be going further backwards in time as older camp diaries and memories are rediscovered from the pre-social media, pre-smartphone days! Even so, we launched with over 1,200 images of nearly 50 completed camps!
A vital part of the site is the stories. Rather than just case studies, the stories put into sharp focus the anguish of families who know they have a sick child but can’t find the help they need and the joy of seeing them cured. As well as being collected together, these stories can be inserted into other pages and posts as modules to bring a flash of reality into an article or help to increase donations.
Whilst we could never claim to be doing such worthwhile work as the Healing Little Hearts team we’re proud to be a part of helping them carry on doing it.
Sensoria Festival Website with Shop, News and Events.
We have been working with Sheffield’s festival of music, film and digital art for a long time. They were one of the first clients to make use of the WordPress platform and have stuck with it ever since.
With the festival sector hit hard by ongoing COVID restrictions, an online presence was even more important than ever and Sensoria decided to take the opportunity to get their website up-to-date and in good shape to present the year’s redesigned programme of events.
2021’s update was done in conjunction with Michael Eden, Sensoria’s designer, who provided with visuals and a style guide that we built into a bespoke WordPress theme.
We made good use of the new Gutenberg technology to give Sensoria much more control over their content than they have ever had before with some custom-built content blocks. We rebuilt the Events area (a crucial part of the site) from scratch to allow all past events to be viewed for posterity, whilst keeping the current ones at the forefront.
The site also has a customised WooCommerce-powered merchandise shop.
New brand and website for Sheffield recording studio and social enterprise
Hybrid 3 is a social enterprise which blends a fully-fledged professional recording studio complex with educational and arts projects. Their amazingly well-equipped recording studios, rehearsal rooms and audio production facilities are the go-to place for Sheffield’s musicians, but Hybrid3 also has a passion for developing local talent and providing community education…everybody deserves the chance to be heard!
Our task was to come up with a brand which covered the overall concept but also emphasised the two distinct halves of Hybrid3 which sometimes work apart and sometimes together. Then our concept would be tested fully by design and building a single website which did the job of the two previous, separate sites which had grown up around the two arms of the organisation.
After a fascinating series of ideas and concepts, we came up with a colour scheme and set of shapes which we worked into a brand for Hybrid3 (the overall organisation), Hybrid3 Pro (the music studios) and Hybrid Play (the educational side).
The colours of the main logo match the architecture and decor of the building, whilst the sub-logos are a single colour but echo the shapes of the main. This colour scheme becomes important on the website…
As Hybrid3 were familiar with WordPress, we decided it would speed things up and reduce the learning curve to use that as the content management system. We added WooCommerce for the merchandise shop and used a few custom-built Gutenberg blocks to give them a toolbox of pre-built elements they could draw on to quickly build new content.
Imagery was very important and the selection of large header photos and videos used were chosen especially for their colour and style, all supporting the brand.
The site needed to appeal to professional bands and musicians as well as educators and community groups. There was the danger that the style of a slick, cool, exclusive recording studio website mixed with a friendly, happy community site would jar badly and we needed to make sure both extremes met in the middle without compromising either. During the branding and site build, the one word which spanned over all of the parts of the business was “inspiration”. We needed to inspire people to create, whatever the reason they were at Hybrid3 and whatever their background or aspirations.
Video and large photos of real people actually creating and enjoying themselves in the Hybrid3 studios were a must, and formed a major part of the look of the site. Also, embeds from SoundCloud let visitors hear what is being made by Hybrid3’s users, so there is a feel of a working and busy organisation.
A recording studio is all about sound, so we also enabled the use of embeds from Soundcloud to showcase the huge range of work that is produced at Hybrid3.
Navigation-wise, the Pro and Play areas needed to both belong to the main site to avoid a confusing journey around the site, but also have a distinct feel of their own. There is a high chance that a visitor to the Pro area will never look at the Play area (or vice versa), so we needed to have common areas as well. Clever use of colour and content along with the specially commissioned copy also added to the uniform vs. separate feel we were trying to get across the site.
Hybrid3 work with the BBC and other arts organisations and it was important to show this to enhance the reputation of the studios.
Due to COVID-19, the studio was closed during much of the design and build work. Hybrid3 used this time to their advantage, being able to concentrate on a project which would have normally been interrupted by the day-to-day running of a business. This gave us the time to get all aspects of the site just right for a December 2020 soft launch, building momentum as the studios gear up to reopen at the start of 2021.
Delve into the family tree of Sheffield Music with this animated, interactive history and archive!
Uncommon People is a project which aims to map the family tree of Sheffield music.
Launched in 2009 the site was a groundbreaking piece of research, design, UI and programming. Unfortunately the 3D interface was made using Adobe Flash, the then all-powerful web graphics and animation package.
As Flash’s requirements became more greedy and its popularity dwindled, the site became less land less useable. Apple refused to support it on their newly launched iPhones and iPads which eventually led to Adobe finally dropping Flash completely.
The Flash issue coupled with the lack of mobile support meant the site needed rebuilding from scratch using open-source and future-proof technology. We went for standard HTML5, CSS and JavaScript and set about taking the massive amount of data the site had collected and visualising it in a useable way.
The keystone of the site had always been a three-dimensional family tree, or a web-like structure which mapped each artist to all of the bands they had been members of. As Sheffield bands have a habit of sharing musicians or setting up numerous side-projects, the web can get quite tangled. Our JavaScript solution made sure the bands, artists and connections stayed connected but far enough apart to be visible. The user can pan and zoom, or home in on a particular band or artist to concentrate on their own connections.
As well as the family tree interface, the same data is used on two other sections of the site in different ways to provide a visual history of Sheffield music and also a text-based browser for quick research.
The site has grown to the size it is through user contributions, so that functionality was streamlined to make adding and moderating new content less laborious.
The project belongs to the Sensoria Festival (whose website we also built and maintain) and we worked closely with them and their designer Michael Eden to bring Uncommon People’s look right up-to-date at the same time as the intenbal workings.
Best of all, it now works on all phones and tablets!
Online store and style gallery.
“Copacetic” is a positive word, made popular in the smoky jazz clubs of 1920s and 30s America. It means “in excellent order”, “completely satisfactory”, “sorted”. A Copacetic Gent is someone who gets it right every time – especially with their style. He makes great efforts to look perfect…whilst seeming to make none at all.
Savills Barbers of Sheffield is famous worldwide for being a time-warp back to the 1930s where gentlemen’s barbers were respected craftspeople and confidants. A personal and individual service to each customer was key and copaceticness abounded. Savills attitude, look and style all combine to give an experience unlike any other but they found that the current selection of styling products they were using didn’t quite fit in with their ethos…they were just not Copacetic enough. So they decided to invent their own! The Copacetic Gentlemen’s Grooming brand was born and was soon developing paste, wax, pomade and other mysterious substances which we didn’t even know were a thing.
Copacetic Gentlemen’s products (as well as equipment such as combs, scissors and aprons) were initially used only in Savills and sold to their own customers, but it soon became clear that other like-minded barbers around the world were in similar need – so the range was made available to them as well, in distinctively branded packaging. Copacetic products were sold to barbers for their own use but they were also selling them on to their own customers, as Savills themselves had been doing. As sales increased Savills decided to start selling the Copacetic range online and a website was commissioned.
Unfortunately, the initial results were less than copacetic and the team reached out to us for help.
Working with the Savills / Copacetic team we came up with a plan and a way forward. The site needed to cater for three customer groups:
Each group needed handling differently. Customers needed a familiar ecommerce experience whereas the two other groups needed a more business-like model which allowed bulk ordering, volume discounts and scheduled invoicing rather than up-front card payments.
The final piece of the jigsaw was that Copacetic had just established an efficient system where the manufacturer of the product was also able to package and distribute it without Copacetic being involved, so orders from the website needed to be sent to them to be processed as well as to Copacetic for administration purposes.
Style-wise, Copacetic Gent had already evolved a strong brand by being part of Savills. The brand now needed to stand up for itself and be part of the process of taking the user back to the early 20th century.
What We DidWith one of us already being a lifelong fanboy of the Art Deco style, the design brief was a gift. Copacetic’s already strong brand was steeped in the geometric, lavish, retro-futuristic styles of the ’20s and ’30s and we needed to translate that across to the site. We were aiming to give the impression not of something imitating that style but something designed in the 1920s which had been locked away, aged and been rediscovered. Everything is slightly faded, distressed and muted…but not enough for it to be noticeable or look contrived. There aren’t many solid blacks or pure whites and the site background almost gives off a smell of old books.
Through Savills numerous photoshoots, Copacetic have access to an excellent collection of photographs which are used to full advantage throughout the site, especially on the inspirational “The Look” section, which is designed to keep growing and evolving with current styles.
We used WordPress coupled with WooCommerce, as the client was familiar with this combination. However, they were unaware of the level of customisation we could provide. Their prior experience had been of an out-of-the-box installation of WordPress and WooCommerce with very little personalisation, so were initially under the impression that this system was OK, but not flexible enough for them to run the site alone and make changes themselves in the future. They were expecting they would need to be asking us for help constantly when additions were needed. We soon swept this myth away with:
We also made good use of the Trello system to manage the project, communicate progress with the client and deal wth feedback – something which we have been experimenting with over the last few months.
The day after the launch, and with no promotion the site was already making sales. Since then everything’s continued to be Copacetic!
Orders are running through the system as expected and an SEO and PR project is beginning in order to boost the profile of the site. Copacetic Gentlemen’s Grooming has become another iconic Sheffield brand.
Also, we now all have better haircuts.
