The European Students' Union Case Study

The European Students’ Union (ESU) is the umbrella organisation of 45 National Unions of Students from 38 countries. The National Unions of Students are open to all students in their respective country regardless of political persuasion, religion, ethnic or cultural origin, sexual orientation or social standing.

1. The pre-Forci times

The organisation had an existing website which was information heavy and with an outdated design compared to today’s standards. It was also build on a platform which didn’t give the client the ability to modify a lot of the elements that they wanted.

2. Understanding and specifying the ESU goals and requirements

We worked closely with the ESU team to best understand their requirements and we suggested multiple updates to the information structure of the website. This was a complicated process which required our team to emerge into the organisation’s work in order to understand from their perspective what the most important parts of the website are. After we outlined the structure of the website we started to discuss the graphic design.

The organisation already had a nice, modern logo which give us a good foundation for the selection of the colour scheme of the website. The next step was preparing the wireframes for the project.

The homepage was specifically challenging as it needed to present a lot of information in a well-structured and pleasing way so we had several iterations over it. The rest of the wireframes were straightforward and didn’t take so much time.

3. The design process

With that being sorted out we started the design process. One of the most complex parts was the logo. As it was relatively big round and included a small text we came up with the idea to incorporate its background as a design element which turned out to be a really good solution and both the client and our team where pleased by the first attempt.

We continued working on the graphics and after a few iterations we had a desktop design on all key pages. To keep costs down to the minimum we advised the client not to design every single page type, as by having the most common pages designed and approved is enough for our front-end editors to combine their visual elements when creating the rest of the pages. Later on this turned out to be a good plan and we didn’t have any problems with the visual of the website.

After all desktop designs were completed and approved by the client we spend our time to design the responsive version of the website. We discussed with the client which mobile device target is the most important for them. As usual this was smartphones. That is why we suggested not to design the tablet viewports and instead leave this to the expertise of our front-end developers to cover. In our case this is a good decisions as all our front-end developers have experience as graphic designers and they can easily make the good calls when we talk about aesthetics.

4. Coding

With the design ready we started the process of making it in an active web page. For maximum clean markup we decided not to use any framework for the process. This gave us the ability to slice the design in the best possible way, eliminating the overhead of frameworks like Bootstrap or Foundation and allowing us to build our markup more semantically than we could have achieved using a front-end framework. For the styling we’ve used SASS and as the website didn’t require any complicated interactions on the front-end we used jQuery for the JavaScript functionality.

Parallel with the front-end of the website we started to prepare the WordPress installation. WordPress is the standard choice for this kind of projects as it provides one of the best content management functionalities and when developed consciously it is a solid foundation for feature improvements. As every project is different, we don’t like using starter themes for our WordPress projects and this one is not an exception. One of the things that we aim to provide for all our customers when we are building WordPress functionality is the freedom to update all website content without breaking the website. This is really an important part of building long-living and appealing websites. We’ve seen quite a lot of times a good-looking website that is ruined as time passes by bad content management. Fortunately this is something that we can control and instead of building the websites with one big text-area, where there is mixed content and HTML markup, we actually split all contents in different self contained sections of the page administration, where the user can update them without any coding knowledge. These improvements are of course time consuming, but our experience shows that they are well worth the time. We applied the same principle to ESU’s website which was particularly complicated as we had a lot of content which was related in multiple pages. At the end we created a good system that allows the client to easily select the relations for all pages and articles with ease and this proved to be the best possible way for the client to manage their content in the long run.

So with the front-end ready, the WordPress prepared for the new theme and the content management strategy created, we started building the WordPress theme. At first we focused on the home page then moved on to the most commonly used pages. This optimised the process as with the common pages ready, our content managers started to migrate the content from the old website to the new one. For other projects we’ve created automated scripts to migrate the content, but in this case we didn’t have any access to the old website’s code or database which required manual content migration. This was actually a pretty good process for the client as the old content had multiple inline styles inside every page, missing alternative tags to the images and broken links. Our content managers fixed all these errors when migrating the content which resulted in a really clean, well-structured, appealing and SEO optimised content all over the website.

5. Releasing

After we completed the building of the website and the content migration we released the website on one of our servers, together with all other sub-sites that the client had. This way everything is in one place and the client is assured that they have complete access to all of the websites as well as 60 days complete backup to all of website’s files and databases.

6. Training

At the end we performed a training with the ESU team and their content managers on how to add, update and control the appearance of all website contents.

7. Feedback

The overall result was that together with ESU we created one really easy to use, modern website that showcases their organisation and allows their content managers to work with ease on the news, events and updates. The design received positive feedback from all their visitors and the complete response helped the organisation’s website to be presented on all kinds of devices.

Want to experience the craftsmanship yourself?

Schedule a consultation now