As part of my final exam as a media designer digital & print in the field of technology and design in front of the Hamburg Chamber of Commerce ("IHK"), I created this website + web concept for the fictional customer "Windparkwartung Ernst Luftig GmbH".
month(s) from concept
As part of my final exam, I had to design and build a website for the fictional company "Windparkwartung Ernst Luftig GmbH".
The story behind the task is, that the owner Ernst Luftig, who maintained wind turbines manufacturer for years, starts his own, independent company. To find a profile in the market, to address manufacturers & operators needs of wind turbines and to find new employees, the company commissioned a B2B website.
For the website, Ernst Luftig provides a logo, texts, and a menu structure that shouldn't be changed. In regards to icons and further images, Ernst Luftig is open to suggestion. During the task it was allowed to use frameworks, but the principles of progressive enhancements always had to be followed.
For the subpage "References" ("Referenzen"), Ernst Luftig demands an interactive map of Germany, that shows where the wind parks that the company maintains are located and how much electricity they provide.
To organize the deliverables and the project as a whole, the project has been split into two phases:
Phase one included a screen designs in a tablet and a desktop view, a concept to explain technicalities and design decisions as well as a work schedule.
Phase two included the finished website & related files, a "Read Me" file with informations about how to run the website as well as coloured prints of the screen designs.
Before I began with the design, I spent time reviewing the provided materials, researching about the addressed market, why the maintenance of wind turbines is essential for clean & safe electricity, and took a look at the websites of potential competitors. I summarized the results in a one-pager, to ensure consistency behind the creation of a visual language for Ernst Luftig as well as the webdesign. Later, this one-pager came in handy when I had to write the full concept.
To start the work on the design, I began by defining the visual language for the fictional company by selecting fonts, colours and visual materials such as images and videos. In the same stept, I worked out a solution for how the content should be distributed on the sub-pages and started wireframing it.
With this preparations done, I started with the first screen design. For this, I started with the tablet view, to ensure that all the content can and will be displayed on smaller devices and that all features will work without a mouse or keyboard. With the screen designs for the tablet nailed down, I scaled them up to desktop view.
In the last step of the design phase, I summarized all the screen designs, my considerations, notes, sources and my hard- & software in the detailed & customer-friendly concept, which I delivered to the Hamburg Chamber of Commerce on the due date of December 23, 2017.
For phase two, the coding of the proposed design solutions, the IHK gave the trainees a time frame of seven hours on January 2, 2018. However, trainees were allowed to prepare the execution of the designs beforehand.
So, in preparations for January 2, I started thinking about possible solutions about how to build the interactive map, looked up a few helpful frameworks for the project and prepared a few assets and texts, for a faster workflow.
Since the IHK required the project to be delivered on a CD-ROM, I wasn't sure if their computer, on which they will review the project, will even be conncet to the internet. Since I planned on using web fonts on the website, this was a problem. So to solve this, I figured out a way on how to include the required font files in the local directory of my project.
Due to all these preparations, I managed to successfully code the website on January 2nd of 2018. Even though I managed to build every site & function in the time I estimated I would need, I didn't had enough time left towards the end, to fix some bugs that heavily impacted the functionality of the interactive map.
With the delivery of the website to the IHK on January 4th of 2018, I finished the second and last phase of the exam project.
The result of my final exam is, that I experienced what it´s like to bring a website from concept to completion in less than a month. This project gave me many opportunities to incorporate the learnings and teached me a lot at the same time.
One important learning for me, as a result of my work in this project, was the evaluation by the IHK examiners. Overall, they evaluated my work with 74 out of 100 points.
For phase one, the examiners praised my selection of the design elements, the informative and convincing concept as well as my screen designs. They thought that I proposed fresh, creative and practical ideas that fit the industry very well.
One design critique they had, was my photo selection for the team members. The IHK didn't provide any team photos, so I selected some from unsplash.com, thinking this would further improve the quality of my design. However, the examiners criticised my selection, saying that the portraits didn't fit the context and names very well.
Another critique was my design of the sub-page "Imprint" – the examiners thought that the site was too empty and that I missed a creativity opportunity with the design of this page.
For the second phase, the examiners praised the fact that I managed to finish all proposed designs in the seven hours on January 2. Since I didn´t manage to fix the bugs of the interactive map, the examiners criticised the code that wasn't valid as well as the map that wasn´t working correctly.
The website is not optimized for small devices.
The version I´m hosting today has different triggers for the wind turbine information: instead of having to click on them, I changed it to a hover-interaction. This solution is easier to use and understand and less likely to have an error.