Final prototype

Explanation prototype

To give the user a good idea of ​​what the Ilojo Bar looked like, we made a gif of the 3D model that rotates slowly on the homepage. This allows people who have never seen the Ilojo Bar, for example, to get an idea of ​​what it looked like. When the user wants to know more about the Ilojo Bar, they can click on "go down in history".

We have made the choice to make a museum with photos as paintings. This gives more atmosphere and because we have placed the photos in chronological order, you also have the feeling of a timeline that we wanted. We don't immediately overwhelm the user with chunks of text, but with photos that already tell a story. By clicking "read the story" you get to the whole story behind the photo. Besides being able to view and read the stories, you can also submit a story yourself by clicking on the bookstand. This is a feature that Legacy so more stories can be collected about the Ilojo Bar, making it even more alive.

Design choices

• We have chosen calm colors that have a vintage look, because the Ilojo Bar itself is also very old and this gives it more of the atmosphere of the Ilojo Bar.

• We chose not to add too much nonsense, as the people in Nigeria don't have super good phones and 4g is quite expensive there.

• Our design is focused on mobile phones. This is the most used device in Nigeria. Many people there do not have a laptop or use it very little and when the people on the street want to have a look, this will also be on the phone. The application can also be used on a laptop.

Progressive enhancement

On the send story page, we have added an extra confirm and an alert. We've done this so that people don't accidentally send their story before it's finished. The core functionality (sending your story) still works when the client side javascript fails. If the client side javascript works, the user experience is enhanced. This is what it looks like:

Confirm

Alert

This also applies to observer. The Intersection Observer API provides a way to asynchronously observe changes in the intersection of a target element with an ancestor element or with a top-level document's viewport. This ensures that the long texts are easier to read for the user. The core functionality (reading the story) still works when the client side javascript fails. If the client side javascript works, the user experience is enhanced.