The Scottish Music Centre is a key organisation in Scotland’s music industry, providing essential services to the music sector across several areas. This includes a vast digitised archive of music, a membership scheme for Scottish resident composers & musicians, an e-commerce platform selling music from composer members, general information and support services as well as youth music projects for under 25s with musical - and backstage - aspirations.
Their previous website - an old, clunky Wordpress effort built on a house of (broken plugin) cards - had been in use for 10+ years and a rebuild was well overdue. Staff were frustrated and users were left with a less-than-desirable user experience.
I audited the old site, carried out research and accessibility testing with stakeholders, designed and built a new site, all while project managing using Kanban methodology.
Measurable outcomes of the project included: - a two-fold increase in sales - increased enquiries regarding various services - significantly boosted social media engagement - smoother workflows - and happier staff!
- My role
UX design UX research Web development Accessibility testing SEO Project management
- Tools used
Webflow Adobe XD Premiere Pro NVivo HotJar/Google Analytics
The project started during the first lockdown in 2020, proving beneficial as there was more time for stakeholders to get involved with the redevelopment.
As such, it became a collaborative effort and stakeholders participated in every stage of the process - this was as much a project for the staff’s benefit was it was the users. To coordinate this, I began by creating a Kanban board for all involved to view and complete various tasks, and help me understand the current state of things. Next, running informal stakeholder interviews allowed me to discover what the goals of the project should be and how we could measure success of the redevelopment.
E-commerce
As the centre was shut during lockdown and unable to generate income from some in-person services (such as event space hire), they needed to generate more income from digital services. As such, the e-commerce platform became a focal point for redevelopment, and one of the goals of the project was to increase sales.
Memberships & other services A second stream of income is memberships. Members receive many benefits, including: a website profile, invitations to events, promotional features on social media, discount on purchases and score printing services, representation at international music conferences and free use of event space. For many, the website profile on the SMC is their main presence on the web. The previous site had very basic pages, with tiny, often low-res images and a couple of paragraphs, which staff had trouble updating due to the afore-mentioned plugin issue. We wanted to improve on the digital aspect of the member experience, thus the next goal was to improve the member pages and member areas. Additional sources of income include usage of services (events, hires, copying & printing), all of which have dedicated pages and thus were another focus for significant improvement.
- Research
The goal of research was to understand how staff and users interact with the site, in order to improve the experience for both parties, increase sales and meet targets.
Taking a holistic approach, research consisted of stakeholder interviews, quantitative & qualitative data analysis, accessibility testing, user flow mapping and task analysis.
The research was explorative; there were no hypotheses as such.
Group 1 - General users
Users
Methods
Tools
Analysis
Design outcomes
Group 2 - Staff
Users
Methods
Analysis
Design outcomes
Group 3 - Accessibility Testers
Users
Tasks
Methods
Questionnaire results
Task analysis
WCAG Rating
- Design
Building on the existing branding, the design system incorporates the original blue tones while adding a lilac and a refreshed take on the tagline, using a new font and a bold blue full stop.
Inspiration was taken from music notes and sound waves. The new font selected was Effra, due to its simple, rounded shapes similar to those of music notes. Headings were made bold and large; high in readability and accessibility.
H1 headings feature a blue gradient overline which can be likened to a semibreve rest note in music; a pause to break up the text and draw the reader’s attention.
The hero background displays sound waves using the blues and purples of the branding. The animation is slow and gentle to remain accessible for all parties, as fast animation or flashing can be problematic for some users.
- Development
Squarespace platform Understandably unimpressed with the Wordpress interface, staff had expressed interest in using Squarespace. Having not used the platform before, I set up a trial version so that both the staff and myself could have a look around and determine if it would fit the bill functionality wise. In some cases we had to give up features that WP plugins had, such as timed deletion of blog posts, but it was a trade off between that and a better user experience and in turn, working experience for the staff. Squarespace is a fairly simple WYSIWYG interface. At time of build, there were some rather confusing elements, some of which have since been rectified. Sometimes, the oversimplification of the interface clouds its functionality. This applies to much of the functionality of Squarespace, although new features are being added regularly.
E-commerce Designing for Squarespace e-commerce requires substantially more IA planning. The default ‘shop’ page simply displays all products in a list and allows you to add categories, but there is no way of filtering or sorting products without buying a plugin. It’s fair to say without extensive data that users have come to expect filtering and sorting on an e-commerce site, especially when there are many items for sale. This is yet another reason Squarespace is only suitable for small sites with a handful of products. Navigation As a workaround for this shop issue, I repurposed categories as filters, for example naming the category ‘filter by item type’ then subcategories within that ‘sheet music, downloads, books’ etc. The user journey was as follows: view main shop page > filter by item type ‘sheet music’ > view items of that type. See here for more detailed user flow map. Users can also use the search bar to find items too. This gives users another chance to navigate product types and see featured items, with the option to view all items. Another major navigational issue is the lack of breadcrumbs. They are only present on product pages to go back a step, rather than be able to navigate back through the levels of categories - and currently the only way to do it would be to create a text link for every single page, which just isn’t feasible with hundreds of products! Custom code Custom code was used frequently, often for design features that were not available, such as accordions, nav bar colour flexibility on different pages, custom fonts & buttons, back to top button, layout changes. Squarespace has now expanded on the features available so less of this code would be required.
- Discussion
Impact
As a registered, publicly funded charity with ambitious budgets, the SMC is required to meet targets - an improvement in digital services helps to replace some of the lost income due to the pandemic. Measurable outcomes of the project included a two-fold increase in sales, increased enquiries regarding various services such as score printing & hires, significantly boosted social media engagement (which of course returns traffic to the site and interest in services) and smoother and less frustrating workflows for staff when adding content to the site. As regular content editors, it is important that staff were given a clear set of guidelines regarding accessibility. Providing design guidelines and a comprehensive user manual served as a means of informing accessibility when creating new pages and content on the site, while also maintaining consistency in the design of the site. Deliverables such as this, and user flows/journey mapping, also covered the importance of product organisation. This ensures staff can upload products in the correct categorical hierarchy and nomenclature, leading to better UX on the shop pages.
Next steps Going forward, a new section of the site is to be added - the members resource page. This will be a portal-type resource for members to learn about music business and self-promotion, with a particular focus on digital content. Additionally, there are plans to add an accessible digital portal containing resources related to disabled artists and their requirements; such as venue accessibility planning. This will be carried out in partnership with Unlimited, an arts programme supporting disabled artists in the UK. As such, more accessibility testing will be carried out, in more depth and with a larger sample of users. Problems uncovered during the initial accessibility testing will need to be addressed. Reflections As the sole researcher, designer and developer, I had complete control of the project with very few creative limitations. This can be beneficial in a lot of ways; but sometimes can add difficulty - for example having no design system or branding other than a logo to take inspiration from. There is also the issue of having very little existing content, and having to source and create a lot of this, whilst also the designing web pages to hold it - a circular process. While having an open stakeholder interview process encourages strong ideation, it can also be susceptible to bloating and over-complication. A leadership role is therefore fundamental to keep the project organised and on track. The main challenge with this project was of a technical nature: the workarounds involved in designing things that were not available on Squarespace. It is frustrating having to tell the client that certain things aren’t possible, or not being able to implement findings from research. There were no research hypotheses set as it was explorative. However, the findings did not surprise me in the slightest regarding the old site and its limitations. The accessibility testing results were also not a surprise; I was aware prior that certain things were not possible on Squarespace and I wouldn’t be able to implement them and that this would negatively affect accessibility. Next time I would argue more strongly the importance of accessibility features and let this influence the choice of platform as a priority - or maybe just give less control to the client over the choice of platform!
