A custom light-box design

During my time with Bed & Breakfast Europe I was asked to help figure out a solution to the heavy ammount of photographs displayed on the presentation page of a B&B. The graphical content distracted the user from the business goal of making a reservation for a room at the B&B.

Iterating over design

During the initial interview it became clear that two improvements were needed.

  1. An easier, better way of viewing a B&B's photographs. The method at the time was a light-box plugin that was used out of the box. It had some UX issues like tiny buttons, inflexible layout, and was not in line with the corporate style.
  2. A way to reduce the space needed to display photographs mid-page. The carrousel used could easily contain lots of thumbnails in several rows consuming valuable user attention.
Annotated wireframes with state transitions
Annotated wireframes with state transitions (when a user clicks on button A they go to state B). Only the references to the annotations are shown. This in respect to safeguard any propietary information.

In order to keep the design iterations short I started with annotated wireframes. wireframes are Lo-Fi design (sketched simple looking) designs. This way we could stick to the escense of it and not get lost in Hi-Fi details.

In the wireframes I explain the basic layout of a application's in a certain state, but also how each application state will relate to each other. I do this by pointing out how one state changeds to another, with the use of arrows.

After the initial design was discussed with the stakeholders we went through 2 extra interations to get it just right. During these the thumnails were removed and the captions surrounding the photos were moved to the top. It is common and sensible to do this, because this keeps the lines of communication short and alllows the stakeholders to have as many points as possible to give feedback.


After the final design was approved I discussed the best way of moving forward with the implementation. He pointed out that technically he could do it, but from a graphical standpoint admitted to have no clue how to build it.

The final version of the implemented light box With that in mind we decided that the pure technical side of things (HTML, standard styling, backend and front-end logic) should be taken care by him, while the graphical aspects would be done by me. In this the annotations proved to be very helpful, giving both the developer and the stakeholders a clear picture of what needed and was going to be build.

The end result sort of speaks for it self.