Mood App

A Case Study

Mood App Icon
“Mood boards define the limits of the design task and suggest possible solutions through an iterative process of defining keywords, conducting research, and creating a common understanding.”

Andrés Lucero, 2012

Scribbles der Mood App

User Centered Design

From the beginning we wanted to center everything around the user. How does the client enter new terms? How does the designer link the with fitting images? After many scribbles we came to the conclusion that list of terms and the linked images have to be visible at the same time. The user shouldn't have to remember the list when he views the images.

Scribbles der Mood App

Visual Design

The main view is divided into two areas. We positioned the list on the left and linked images on the right. You can add completely new terms or choose one out of a list which has already pictures linked. The designer adds and removes pictures in the right area. Is the client satisfied with a linked image, he can simply drag the picture to the bottom bar and agree with the choice of the designer. Now both have the same mental model and visual mood of their project.

Visual Design der Mood App
Visual Design der Mood App

Semantic Differential

The biggest problem in the communication between designer and client is the lack of the ability of clients to verbalize their wishes in design choices. Our app changes that. To make it even simpler we added a semantic differential to the entered terms. If the client is not sure about his choice of word, he can open the differential and check the describing words. If he changes the characteristics of a word pair, the differential changes automatically the entered term for him.

Visual Design der Mood App

Adding terms and images

After the client adds his describing terms and has, with the semantic differential, figured out if they are the right ones it's up to the designer to add pictures. By tapping on the picture cards you can flip them and edit different options or delete them.

Visual Design der Mood App


Each image has a category. Pictures can be so detailed that it is impossible for the client to know which part of the picture the designer means. Is it the overall color scheme of it? Or is it the subtle texture on the wall. Or the mood of the people laughing at each other? Or is the image just about typography? With the category you can specify exactly that. You can choose between already existing categories or create new ones.

Collect Images

Now the designer has linked a couple of pictures to every term. The next step is to check if the client is satisfied the images.
If is satisfied with an image and it describes what he meant with his term, he just needs to drag the image and drop it on the mood bar at the bottom.
When he doesn't approve one, the client can simply leave a comment directly at the picture. In that case the designer gets a notification to check that one again.

Create Moodboard

The framing phase of the project should now be finished and the designer hast to start creating. To access the mood board he has to tab the mood bar at the bottom of the app. The mood board appears and is already categorized. The designer can choose between showing all added images or sorting them in the terms or the categories. This works as an purely visual inspiration tool to augment your creative process.

Download Prototype
on Homescreen