Creating Moods App

Moods is an application for everyones unique problem: Are we connected or corrupted? 

For the mock-up screens created in Sketch App please click here.

A quick presentation is here.

1. Project Description

Concept Ideation

Moods is a filter to show the information that helps us feel the way we want to. This is the story of its design process. The concept of Moods is to empower users to get access to social platforms. Traditionally, we have different social media accounts and when we need to check each one separately we feel that it's a lot. Besides having multiple accounts we have limited control over them, like blocking some friends' feeds. We as people need more than these, we have ups and downs and we have different expectations based on our psychological state. So, there is a need to be a central dropping of point, like an aggregator and a remote controller at the same time for our social networks which adapts our states.

In the early stages of development, when I started referring to the project as “filter”, it was clear that the real name was needed soon. 

The Challenge

The users needs a news aggregator and at the same time wants to filter the waterfall of information based on their psychological state, a.k.a. mood, (or the mood they want to be in) in order not to be overwhelmed.

The Solution: Semantic Web

The solution is a semantic web solution (an automated intelligent system) that filters information almost the same way as humans do. The system will classify all stories of the user into several predefined classes: happy, sad, political, apolitical, family-time and naughty. This will be a shield that protects us from all this company of stuff and will allow us to filter out the content that we are not interested in currently.

While new ideas springing up, I was needing more data and more results. So this led me to the user research.

2. User Research

Method

I talked to 12 individuals and asked them about how they get informed from a wide range of media elements. I asked them a map out their day and I looked for moments when they get information. 

Findings

10 of those I spoke with use Facebook and other social platforms to share and get information of those 9 expressed an interest in filtering the frequently updated content. 2 of 12 were not really into the social networks.

Opportunities Identified

Create an easy way to sort information by user-defined moods. I identified one type of potential user for this product: "The people who uses web as a source of information." 

3. Creating Personas 

I have created a persona to give a clear picture of the user's expectations and how they will interact with the application. 

Peter, 40, New Jersey

Peter works for an oil company as a manager. He has several social media accounts. He uses Facebook for being in touch with friends, LinkedIn for professional development, Twitter for the latest news.   

Checking each social network takes up a certain amount of time and space of his life.  “It’s a lot" Peter says.

Peter wants to save time.

Sometimes he feels overwhelmed by waterfall of same type of information. He says that he had such a time during government shutdown. No more good news he used to see and the timelines were repeating themselves.

He needs to avoid monotonicity on his news channels and a shield to protect him from waterfall of information.

4. Design Iteration / Design Hypothesis

Sketching Interactions

Based on the idea creation and data collected from user research, I proceeded to sketch the interface interactions. First version of Moods App was intended for IOS platform. You can find some of the sketched pages below. 

5. Flow Diagrams

User Flows

The first screen the user sees after login/sign-up is the main screen. The main screen consists of mood filter at the top and different channels that the user connected her application to, e.g. Facebook, Twitter, Youtube, Instagram. Each channel shows the recent items classified as the filter selected. Each channel is represented as carousels because carousels are good components to use to represent the time line in the horizontal access.

If the user selects a story, it takes her to the detail of the story in that channel, for example the story about a friend from Facebook is displayed below. In the story view there is a visual clue about the selected mood (happy in the example) and the source (Facebook in the example). A story is a source item, it can be a picture, a link or a video. At the bottom of the item the comments section presents. Two different gestures are appropriate for this view: left/right slides for going back and forth between the stories and sliding from left edge to right to go back to the main screen.

6. Design Specifications

Conceptual Model

In this step the design process the mental representation of the design can be found.

This conceptual model is developed with a vision for next generation of information organization on the web.

A "Semantic Web" that filters information the way humans do is the vision of Moods app.

7. Prototyping

I have used invisionapp prototyping tool for this project. Please visit this link.