Last summer I had the idea to revamp the website of the Csíkszerda choir. It was quite a big project considering we were all volunteers and we faced many challenges. In this article I would like to present how the project progressed and what the results were.

The beginnings

I noticed that my choir’s website was quite outdated and hadn’t been used in years. Since we have professional online marketing and everything is very high quality, I thought it would be very important to update the website. First of all, a UX renewal could be done, and then there are many opportunities to introduce new and new features.

Since I knew it would be a relatively large-scale project, I had to think about why it would be worth it for me. Then I realized that there were several other IT people singing in the choir, and it was also full of people who were happy to help. So, if I put together a team and led the project and created the new website together, I could gain relevant leadership experience – and this is especially important for me from a career perspective.

Making a Project Launch Doc

I first wrote to the choir’s leadership to ask if they were open to such an opportunity. And after receiving a positive response, I immediately threw myself into the work. I worked for 10 days (outside my regular working hours, in the evenings, as much free time as I had) to create the project launch document.

The project initiation document included the following:

  • What is the goal of the project
  • How do I assemble the team
  • Resources and tools: so what tools, how much money, and what infrastructure will we use to do this. This section also includes that the new website will be built on a completely different platform.
  • Timeline: which is especially adventurous when you have to manage volunteers.
  • Development: which included design and content creation.
  • Testing plan
  • Maintenance plan

I had to pay special attention to making sure the text was understandable even for people who were not IT professionals.

Team building and communication

The process of putting together the team and working with them was a very interesting and instructive story. That is why I am planning a completely separate post to explain this in more detail and introduce the team. Working with and managing a community of volunteers, people with completely different free time, commitment, and skills, but who are cohesive and enthusiastic, is completely different from what I am used to in the world of multinational companies. I think I mostly overcame the obstacles successfully.

Development

We all did the development in our free time. For my part, I set limits in advance on how much time I would spend on it, in addition to my other tasks, which is enough, but not at the expense of other areas of my life. I decided that if I worked on it for 1 hour a day, and focused only on that, then that would be enough.

The website was built on WordPress, as it is a widely used, relatively easy-to-use platform with almost unlimited development possibilities.

Results

The before/after pictures below show the progress we have made, primarily in the design area. We have created a clean and authentic design, with stripes as a recurring element. This is because the choir’s performance attire is traditionally striped, and I wanted to make sure to reflect this somehow.

After
Before

The previous homepage was very simple and contained news in text format. In addition, it had a menu, social media buttons, and a language selector.

On the new website, we have designed the menu in a similar way. Here, we have the things we want to promote: current concerts, etc. Below this, we have much more impressive social media icons.

There is room for a few more counters, and a separate section for the different small groups of the choir family. Finally, we listed our supporters.

After
Before

Some parts of the website only had to be copied in terms of content, but the new design elements were also included here, of course. It is not visible in the image on the left, but when hovered, the image becomes colorful. I have incorporated animated elements into the website in several places to make it more lively and modern.

After
Before

The Projects menu is a very important part of the website. This is where we show the most of the progress that Csíkszerda has made in the past 16 years. So, even though we’ve been playing certain projects for more than a decade, I took the time to re-list them all in a renewed form. Of course, everything has changed in terms of user experience: unlike before, the projects are not just indicated by a single image, but by a whole little trailer, with an image, a button, and animated elements.

After
Before

If we go into the individual projects, each project has a post, which has also changed compared to the previous ones. On the one hand, it has become much cleaner in accordance with the new design, and on the other hand, a map has been added, with which the audience can immediately see where the concert was held. And if it is a project whose concerts will only be held in the future, you can also register for the event. (The Csíkszerda concerts are usually free, but registration is required.)

There are also some previous projects for which I found videos. Since we no longer play these choral works, I have embedded them in the appropriate projects so that people interested in our music can listen to the songs sung by Csíkszerda.

The website can handle language versions (Hungarian and English) and is of course responsive.

This is far from the end of the project

Csíkszerda is a huge choir and an association that deals with a lot of things. Accordingly, there is still a lot of potential in the development of the website. Back when I was writing the project launch document, I called the state we are in now „the first stage”.

Manual and tutorial

The next step will be to provide the choir with the right information on how to use the site if I don’t have time. Although there are many choir members who are good with IT, there may be someone who is not. That’s why I want to make the use of the site as easy to understand as possible.

Further developments

There are still many possibilities in this website. Many new functions that will either make the lives of the choir members easier or be useful for the audience. It is also quite certain that we will face quite a few challenges during the development, and to be honest, I can’t wait for that. For me, the benefit of this project is that I can gain IT management experience, which I may later be able to utilize in the labor market.

And... of course...