Assignment: Design a landing page for a fictive conference

Project Overview

The assignment was to design a landing page that would serve as an informational website about an upcoming, fictional conference with the following requirements:

  • Maximum space: 960x600px

  • Screen resolution: 1024x768px

  • Design for a small screen without scroll

  • Menu system with six headlines

  • At least one image with optional size

  • Include MDU’s logo in optional size, time and place

  • Pre-determined main heading, preamble, puff texts and footer

My Design Process

I started by quickly sketching ten ideas and discussing them with potential users.

I then created two wireframes that incorporated the most favored elements and conducted an A/B test. The preferred sketch was then developed in Webflow and after just one iteration, the final prototype was to be presented.

With the feedback that I got from the presentation, I had to “Kill my darling” and go back to creating wireframes again. With further insights from potential users, I then redesigned the landing page, characterized by a minimalistic approach and a powerful background color that makes the page stand out.

My main focus throughout this process was to achieve good readability and congeniality by employing clear typography, hierarchy and layout. All due to the informative nature of the site.

Sketching and discussing with potential users

Feedback example from viewers:

“I think this one is ok, but a little bit boxy. Do the images belong to the texts about the lecturers?”

Feedback example from viewers:

“It looks fun and playful. It feels a bit unserious maybe. I don’t know where to look first.”

Feedback example from viewers:

“I don’t know. It looks a bit messy. To many shapes for me.”

Feedback example from viewers:

“I like this one. It looks clean and I can easily find all information.”

Creating wireframes based on feedback

The conducted A/B test showed that the potential users preferred the first one.

“I like the heading. It has the most important information and I like that the menu bar sort of frames the title.”

“It’s easy to get a quick overview of the page.”

The conducted A/B test showed that the second one had more issues than the first one.

“I like the menu on the side, but I don’t like the circle. It looks off.”

“It’s ok, but it’s missing something in the header. It looks empty there.”

“The preamble seems wide.”

Presentation, feedback & iteration

During the presentation of my finished landing page proposal, I received constructive feedback that encouraged me to reassess and refine the design. Embracing the concept of “killing my darlings”, I revisited the wireframe stage and conducted another A/B test based on the new wireframes.

“I don’t like the background color, It’s too sharp and it doesn’t exactly give me a conference feeling.”

“It’s a bit boxy and I don’t get the picture. It doesn’t seem to match the topic of the conference.”

“I think it’s a little off-balanced. The image takes to much of my focus. I love the background color, but not in this context. What’s it’s relation to information design or MDU?”

“I prefer this one. It has a good flow and I like that the information boxes are separate from each other.”

“I like it, but maybe the image is a little to big compared to the texts. Otherwise I think it looks good.”

“I don’t know what it is, but something is bothering me. Maybe it’s the elongated images. I’m not sure I like that.”

“It’s ok. It’s balanced sideways, but I think that the Workshops text feels cramped.“

Final design proposal

Final reflections

Since the landing page needed to be completed within two weeks, a significant amount of time was dedicated to learning the Webflow program. Despite the tight timeframe, I managed to conduct small and simple tests with potential users during the design process, providing me with valuable insights.

Taking the feedback into consideration, I had to redesign the landing page. This resulted in a more balanced layout, better aligning with the messaging the site aims to convey.