Christoph A. Johns

Christoph A. Johns

PhD in Human-Computer Interaction @ Aarhus University

Gallang - High Quality Moodboarding Assets

Gallang - High Quality Moodboarding Assets
Gallang is a web app for collecting high-quality assets for moodboarding.

Problem

Designers often create mood-boards, for example using Pinterest or Miro, to explore the design space. The images provided by these resources are often inconsistent in quality and the recommendation engines hinder, to some degree, truly imaginative and free inspiration. A digital mood-board bringing together several different sources of high-quality media, for example, stock photography, art galleries, fonts, etc. could lead to more effective exploration of the design space.

Competitor analysis and desk research
Among other methods, competitor analysis and desk research were used to explore the problem space and understand the background of the project.

Research

In order to understand the target user and their needs, the project team conducted desk research, competitive analysis of mood-boarding tools as well as unstructured interviews with graphic and user interface designers. The results were collected and discussed to focus on a specific user problem to address as well as to inform the general information architecture of the resulting application.

Sketches and wireframes
Throughout several iterations, sketches and wireframes, a general layout using a fixed sidebar and centered main content was developed.

Ideation and Development

Based on the results of the user and design research, individual and collaborative ideation and development techniques were used to create concepts, sketches, wireframes, mockups and finally an interactive Figma prototype. This prototype was tested with target users to evaluate the overall user experience as well as to identify potential usability issues before beginning the translation of the graphical prototype into code.

Delivery and Testing

The resulting web application was developed using JavaScript, more specifically implementing a Model-View-Presenter architecture using the React.js framework. The development was executed using remote pair programming and distributed agile methods. The final result is publicly available on Heroku at https://gallang.herokuapp.com.

Gallery mockup
The final web application features a minimal and artful aesthetic inspired by museums and luxury online stores. The focus lies on the images for users to collect.