Ernst Luftig
Final exam project
Die Startseite der Ernst Luftig-Webseite auf einem stehenden MacBook Pro-Mockup

Ernst Luftig

Final exam project (IHK) • 2018

This website & web concept for the fictional customer "Windparkwartung Ernst Luftig GmbH" was created in winter 2017/2018, as a part of my final exam in front of the IHK (= Hamburg Chamber of Commerce) for becoming a media designer digital & print.

Read the german concept
Visit the website

The Task

Ernst Luftig, who took care of the maintenance of wind turbines from one manufacturer for years, starts his small & independent company "Windparkwartung Ernst Luftig GmbH".

For a successful start, the company is looking for a profile in the market. To address manufacturers & operators of wind turbines as well as new employees, the company has commissioned a B2B website.

For the website, the company provides its logo, text, and a menu structure that shouldn't be changed. In regards to icons and further images, the company is open to suggestion. The usage of frameworks is allowed, but the rules of progressive enhancements should always be followed.
For the subpage "References" ("Referenzen"), Ernst Luftig demands an interactive map of Germany, that shows where the maintained wind parks are located and how much electricity they provide.

To get an idea about the design for the website, Ernst Luftig requests screen designs in the sizes of ≤1024px ("Tablet") and  ≤1920px ("Desktop") as well as a written concept.

The project is split into two phases.
At the end of phase one, ending on December 21st 2017, the following must be delivered to the "customer":

  • Screen designs of the website
  • The concept, explaining the design decisions and necessary technicalities
  • The work schedule, including the possible execution of the website


At the end of phase two, on January 4th of 2018, the following must be delivered to the "customer":

  • The finished website on a CD-ROM
  • All files related to the project on the same CD, in a separate directory
  • A "Read Me" file with the information about how to run the website
  • Coloured prints of the screens designs




The Goal

Design and develop a B2B website for the fictional company “Windparkwartung Ernst Luftig GmbH”, which is published under the domain www.ernst-luftig.de, to help the company to find a profile in the market and to attract new potential clients as well as employees.

As a secondary goal, I challenged myself to present the topic of wind turbine maintenance in a more exciting and modern way than the competition.



Screendesign der Startseite auf einem schwebendem iPad-Mockup
Ernst Luftig start page on an iPad




Conception & research

My preparations began with the review of the provided materials, some research, why the maintenance of wind turbines is essential for clean & safe electricity and looking up websites of potential competitors. Based on the results, I started writing the re-briefing and thinking about the target group.

With the target group in mind, I designed the visual language for the fictional company that is defined by the selected fonts, colours and visual materials. I also worked out how the delivered content will be distributed on the sub-pages and designed a wireframe for it.

I added these considerations to the concept and started working on the screen designs. For this, I first designed the tablet view, to think about how the content can be displayed on smaller devices and how the website will work without a mouse cursor. Based on the finished tablet designs, I then designed the desktop view.

In the last step of the conceptualization, 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 – the "customer" – on December 23, 2017.


Die Farbauswahl für das Ernst Luftig-Projekt. Von oben links: Marineblau, Golfrasengrün, Schwarz, Betongrau, Hellgrau, Weiß
The selected colours for Ernst Luftig.




Execution


For phase two, the execution of the proposed solutions in HTML5, CSS3 & Javascript, the trainees had a time frame of seven hours on January 2, 2018.

Since the rules allowed the trainees to think about possible solutions for the technically demanding tasks beforehand – such as the interactive map that Ernst Luftig requested for the sub-page "References" –  I searched for frameworks and plug-ins that'll help me beforehand.
I decided on using normalize.css and Tinycarousel since I wanted to ensure that the content of the site can be displayed correctly on as many devices in as many web browsers as possible.
I also prepared the assets and all texts for the website beforehand copied the links for the "Read Me" file in an unformatted text file.

Because my fellow trainees and I were unfamiliar with the exact definition of progressive enhancement, we agreed to build the website – aspecially the interactive map – without using Javascript or experimental CSS functions for crucial page elements. Therefore I decided to build the interactive feature using “<figures>” in the HTML and to define the technical details as “<figcpations>”. These would open or close the technical information via a click/tap on the respective wind turbine, coupled with a CSS animation.

When delivering the files on the CD-ROM, I wanted to be sure that the examiners get to see the website with the web fonts I selected – even on a computer without internet access. So I downloaded the font files into the websites directory and linked to them in the stylesheet, instead of relying on the hosted web fonts by Google.

With all these preparations, I successfully coded the website in the given time on January 2nd of 2018, at the campus of the Macromedia Academy.
I managed to build every site and function in the time I estimated in the concept. However, towards the end, I didn´t had enough time left to fix some bugs that impacted the functionality of the interactive map.

With the delivery of the website to the Chamber of Commerce – the "customer" – on January 4th of 2018, I finished the second and last phase of my exam project.


Ernst Luftig references page on desktop




The Valuation

Overall, my execution of the project was evaluated with 74 points by the IHK examiners.

For phase one – the concept – the examiners praised my selection of the design elements, the informative and convincing concept as well as my screen designs. They thought that I brought fresh and creative ideas to an industry that´s usually quite "neutral" and technical.
Since the Chamber of Commerce didn´t provide photos for the team member, I chose some portraits from Unsplash that the examiners criticised, since they felt like these photos don´t fit the people or the company. Also, they criticised my rather empty design of the sub-page "Imprint".

For the second phase – the technical execution of the concept – the examiners praised the fact that I managed to finish all sub-pages in the given seven hours while staying true to the proposed screen designs. Since I didn´t manage to fix all the bugs of the interactive map, the examiners criticised that the map wasn´t working correctly as well as the code that wasn´t sufficiently validated.


Ernst Luftig contact page on desktop




Conclusion

During my final exam, I experienced what it´s like to concept and execute a website for a fictional customer independently in less than a month. This project also gave me many opportunities to incorporate the learnings that I had during my apprenticeship, internships and in my free time into the execution, which I really enjoyed.

Annotations

This website is not optimized for small devices.

On the website I´m hosting today, I changed the triggers for the wind turbines on the interactive map from click to hover. This solution is far less prone to errors or bugs than the previous one.

Trained media designer digital & print.
Self-taught UX & UI designer.

Solving user & business problems with design.