How to design a multilingual website? Example of Media Press
Media Press is a company with a long tradition. The organization was founded over 30 years ago and has been building its position in the industry ever since. It is a leader in providing metadata for the media and entertainment sector. It also delivers a range of technology solutions for TV operators, VOD providers, and magazine publishers. Due to the extensive range of services and international structure, it was necessary to redesign the existing website so that it would tell the story of Media Press in an engaging way and present the scope of services.
A website with several language versions: step by step
Sprint 1: Kick off and preliminary design
The work on the new Media Press website started even before our cooperation began. The client appointed a person responsible for the website implementation who was our main contact when it came to any matters related to the website.
Once the decision to collaborate was made, we were asked to provide information about what Media Press should prepare so that the mock-ups created by the client’s team were suitable for commencing the design work.
Due to the short yet intense schedule, the most important things in the process of designing the mock-ups by the client’s team were:
- determining the number of subpages,
- preparation of content for each subpage – specifying the sections and texts that should appear on particular subpages,
- preliminary preparation of copy to plan the layout of particular elements in each section,
- defining the most frequently used functionalities of the website to ensure the possibility of modifying particular elements from the CMS level later on if needed.
The wireframes were enough to start working on the design.
Depending on the arrangements with a client, we usually handle the information architecture and create mock-ups. These stages are described in the case study “Website for a logistics company – based on the example of SKK S.A.”.
Kick off meeting
Due to the limited scope of the project, we adapted our standard web design process to a 2-sprint timeframe. The purpose of the meeting was to get to know the company better, understand its profile, find out what makes it unique and how it operates.
During an hour-long conversation, we were able to extract the most important information that helped us prepare the moodboard.
We learned more about:
- company history,
- current structure,
- services offered by Media Press,
- technologies used,
- target audience and customers of the company,
- market landscape and competition.
The awareness of how the organization operates and what it stands for, as well as understanding the nature of the given industry influence the way we perceive a brand and what we associate it with.
Media Press is a brand with a long tradition and a modern company at the same time. When designing the website, we had to consider all these aspects in order to present Media Press as it truly is.
It was important to refer to the long history of the company, which has its roots in printed magazines. Therefore, when composing the moodboard, we opted for designs with serif fonts that bring print to mind. By combining this style with modern design solutions we were able to create a design that corresponded to the needs of the brand and the way it should be portrayed.
The brand’s color scheme based on black, white and red made it possible to correlate the design with the brand in a natural way. The final design combines tradition and modernity and renders the brand’s professionalism and stability.
Moodboard prepared for Media Press
After presenting the moodboard based on the mock-ups prepared by the client, we were ready to move on to the design exploration stage. By that point, we had already chosen the style and prepared the content of the website. Now, our main task was to transform the existing materials into a design that could be applied to all planned subpages.
This was the creative phase. Usually, the result of this phase is several different designs (of a homepage, for example). We picked the most appealing aspects from all versions and put them together to achieve the best final product.
In the case of Media Press, the design is based on the brand’s color scheme with additional touches of light gray as a reference to paper or newspapers. We created a light and dark version. Of course, in both versions the images played a very important role, as they were supposed to represent the authenticity of the Media Press brand. As far as fonts are concerned, we focused on serif ones, but there was also a version with sans serifs. This allowed us to present an alternative design.
All designs were delivered to the client for feedback. Thanks to the fact that there was someone in the client’s team who worked in Figma, some suggestions and comments were visualized using the previously prepared designs.
Sprint 2: Design refinement and preparation for implementation
We started the next sprint by adapting to the feedback and preparing the final version of the homepage. It was to serve as a reference in designing the subpages.
Finally, to draw attention to the maturity of the brand, we chose black as the main color of the background and sections. The choice of serif fonts for the headlines was practically unanimous. After applying the rest of the client’s suggestions, the homepage could be used as a style template for the subpages.
From this point on, we focused on the product and service pages. In addition to standard services such as sourcing, formatting and providing metadata, Media Press offers a wide range of technological solutions and other services targeted at the media industry.
And so the following sub-pages were designed:
- Hubert System,
- Editorial Services,
- AI Image Processing,
- Print Outsourcing Services.
At this stage of the project, we worked simultaneously on the mobile version of each subpage.
It is worth mentioning the design of the interactive map, which shows all the locations of Media Press in the world and is a very important element of branding.
After completing this part of the project, the next elements were the pages presenting Media Press, its structure, history, clients, and the team. Furthermore, we designed the pages related to the blog and articles, as well as the classic contact subpage.
The challenge: a multilingual website
Media Press is an international company with branches in many countries and clients from all over the world. It was necessary to prepare several language versions. This is often highly problematic considering the different lengths of phrases in particular languages.
Therefore, during the design of the default English language version other language versions were created in parallel. This enabled us to constantly check how the design behaved in extreme situations and react by tweaking the design of a given element or by fine-tuning the translation.
We have developed the pages in English, Polish, French and German, and there are plans to prepare more language versions for the markets on which Media Press operates.
Preparation for implementation
In order to prepare the project for the development stage, it is necessary to provide several things.
The most important ones include:
- design of all necessary non-generic subpages,
- preparation of mobile versions, to show how a given element or section should behave on a smartphone,
- appropriate naming and grouping of all the elements so that the CSS code generated in Figma is properly formatted,
- list of animations and behaviors of interactive elements, preferably with links to examples of how they should look like,
- code necessary to implement the fonts – e.g. generated via Adobe TypeKit or Google Fonts,
- answers to all questions that arise during the implementation.
It is always a good idea to set aside some time at the end of this phase to adjust the design and prepare materials that have a significant impact on the subsequent steps. This makes the developers’ work easier and ensures that the final result is exactly what we had imagined and designed. Moreover, this allows for a much more accurate estimation of the implementation time.
However, it is impossible to foresee everything. For this reason, before starting the implementation work, it is recommended to discuss all aspects during a meeting with the developer and answer any questions to minimize the number of potential problems that may arise at more advanced stages of implementation.
We sought to address all of the above issues in the second week of working on a multilingual website for Media Press.
Sprint 3-4: Backend and frontend development
It was important for the client to be able to edit content quickly and seamlessly. We decided to use WordPress CMS (Content Management System), which is a terrific editing tool even for beginners, and at the same time a powerful tool for developers.
The website was coded in blocks. This gives a huge advantage in managing the website later on.
The modular approach involves coding each section of the website as if it were a separate, independent piece of code. The result is a whole set of sections that the client can use at any time to build another webpage, without the need to contact the developers. In this case, the building process is based on the drag & drop principle, i.e. selecting a given element from the list and placing it in the desired place.
Media Press website was coded using our original solutions, which translate into high security of the whole website against all kinds of attacks. We take a professional approach to coding and we do not use half-measures such as unnecessary plug-ins or extensions which are additional gates for hackers.
The code has been written using our proprietary template, which applies the latest technologies but also supports older versions of browsers and systems. Thanks to this, Media Press website presents the same high level of performance regardless of the system, both on desktop and mobile devices.
Every week during the development phase, the client received a secure link that provided access to a preview of progress. This gave Media Press the opportunity to share their thoughts and comments with us. Thus, the client had a real impact on the project during the development process.
The coding process, adding the content in 4 languages, upload to the server, and securing it took about 3 weeks.
Summary in numbers and beyond
Media Press was a particularly interesting project for us. We had to carve out only a part of our standard process and adapt in order to deliver the right quality. Moreover, it was the first project realized by Project: People all the way through to the implementation stage.
The result of our work can be viewed at: https://www.media-press.tv
Tools, methods and technologies used in the project
- style guide
- SCSS in BEM methodology
Case study isn't enough?
Would you like to learn about the whole process and how we could carry it out in your organization?