Moody App

Beautiful Moodboard. 
Beautiful Home.

Overview

Research

Product UX

UI Design

Overview

Interior Design Market

The market of interior design is large and impressive.

A variety of people want to decorate and design their houses and apartments according to the latest trends.

​

According to technavio: "The interior design services market size will grow by $23.15 billion during 2019-2023. The market’s growth momentum will accelerate during the forecast period because of the steady increase in year-over-year growth".

​

Due to this increasing statistics there are lots of companies that provide services which include consulting, styling, decorating and more. but today consumers are much more smart and effective (and in 2020, in which we experience the coronavirus pandemic, it's much more noticeable) and want to take a part at their home projects - issue that known better as the "DIY movement".

About the  Project

For my graduation project i was asked to design any type of mobile app, website or branding concept. I chose a subject that is very close to my heart- Interior design. In the past, I took a course and got to experiment a little while designing my own apartment and i can testify that it's defiantly complex and deserve a lot of time and thought. 

unfortunately, while i was looking for applications and tools that will help me to decorate and gather together ideas and examples, i didn't found many as such.

​

Therefore, i decided to design an app that let the users to create beautiful moodboard (or as it is called in the app-"Moodyboards") for their homes, and i called the app- Moody.

​

Moody app let the user to create the moodboard by:

1. Upload picture from the camera roll

2. Take a picture

4. Exploring inspirations from other users

3. Using the Exclusive Feature- 3 simple steps to create moodyboard -  as specified in the "challenges & solutions" section.

​

​

Challenges & Solutions

The 2 main challenges i faced, before and while working on the app, were:

​

1. Characterization and simplification of the moodboard creation

​

I had to think of a way in which the user goes through a flow- start by choosing a main category and then adding important "ingredients" to get a customize and unique result.

Therefore, i developed an Exclusive Feature-  3 simple steps to create moodboard:

​

Step 1- Pick Trend- the user get to swipe between over 18 of 2020's hottest trends in the interior design industry. Choosing the trend first  allows the user to get more targeted and adjusted results.

​

Step 2- Pick Palette- the user will be able to scroll through endless color palettes that perfectly match the trend chosen on step 1.

This step help to define and reduces the results obtained in the next step.

​

Step 3- Pick Accessories- the user get to match thousands of trendy and spectacular accessories and finish by creating a special- customized moodbaord. 

2. Using Flat design motifs

​

I wanted to give the application a smooth and a flat look by using a special components that avoid / embrace the next features: 

​

Target 

Audience

1. Enthusiasts and lovers of design- people who deals with interior design on a regular basis. For this type of audience, the app can provide a new & fresh way of creating moodboards.

2. Users who are new to the field of interior design, especially to the DIY  concept. For this type of audience, the app can reveal a whole new world with the help of a simple steps that the app offers.
 

Research

Competitive Apps

Before i started to design moody i searched for an apps (as seen on the image below)  in the field of interior design that engage with: colors palettes, home styling, moodboards, templates and accessories.

Most of the apps gives a nice experience but quite limited to a specific feature. Those who offers the user to built moodboards were designed in a very old-fashioned way and wasn't friendly and inviting at all.
 

These facts led me to the conclusion that I should spend enough time on user experience, as well as to the user interface:

UX- design a special feature (as mentioned above) by providing an interactive and simple user experience.

UI-  paying attention to the aesthetic and visual side of the app.

Persona

To get a representation of my most common target audience i interviewed my best friend who wish to redesign her apartment .

My main purpose of the research is to prioritize problems and solutions.

Product UX

App Map

Before i started creating the app wireframes i had to manage the user flow by creating a simple app map that include all the different  features pages.

Wireframes

From the start i designed the wireframes screens higher fidelity than usual just to test if the "real design"fits well.

​

In addition, it was important to me to bring to the front the special feature on the home page by adding an upper banner to catch the user immediately.

Define the Process

My main issue was to define and characterize the process / steps that the user supposed to go through while creating the moodboard - i wanted a simple flow- "Pick & Go" without any delays or interruptions.

​

I'd scratched a number of different ways to demonstrate the 3 steps process in order to find the one that works perfectly with the flow of the rest screens.

​

​

UI Design

Colors

When i started looking for match-able colors to the app i knew that the main and prominent color will be from the greenish-bluish family, bearing in mind that this color should blend in with a variety of images which include variety of colors- the color supposed to have a presence but do not surpass each other colors.

For the additional color, i was looking for sand-pinkish-powder color that could match to the screens where the process is inactive.

The third color is deep blue which been adjusted to the app's icons.
 

Typeface

I chose the "Inter" typeface family that features a tall x-height to aid in readability of mixed-case and lower-case text. for me the inter font was a combination between the "poppins" font - which is great for headlines and the "roboto" font- which seems great for light weight paragraphs. 

Logo & Icons

From the beginning  i wanted to integrate the logo as the main button in the app's navigation bar;  i was looking for kind of artistic and unique icons.

Those i found express the essence and the core of the app- expressive and fine. I chose to draw the icons in deep blue, so that they do not exceed the other colors. i also gave the icons a little touch of the sand- yellow that act as a secondary color.

Micro -Interactions

It was very important to me to integrate micro-interactions while i designed the app interface. by using these kind of animations the user gets support in understanding the hierarchy so elements are placed in context and its also creates focus for the user.

"Keep Going" Arrow

This arrow should direct the user to take an action or at least paying attention to the animated icon

Floating Menu Animation

Placing the hidden in-app elements on the main button using animation can help the user to find it easily.

 In the animation example, it's possible to see that  the additional options appear from the bottom of the navigation bar to give the user a simple and easy accessibility

"Let the Heart Lead You"

Due to the fact that i designed the app in a flat and 2D feel (without using shadows to demonstarate a selection  or give a depth sense) it was important to me to use an animation which will be present the user a selection action.

Components

I designed the app components (as seen below) to define parts of the experience and to ensure a consistent basic interface. I tried to maintain some consistency while keeping on the same "language" and flow.

UI App Screens

Explore -

Home Page

The onboarding screens suppose to demonstrate the user the 3 way steps process of how creating moodyboard. i chose to make it with motion to make it a bit interesting, interactive and fun.

The home page is functioned as an explore page where the user can:

​

* Get quick access to the the 3 steps of moodboard 

   creation (upper banner) 

* browse through trends, color palettes and more

* Get recommended inspirations

* Watch all the moodyboards

Create Moodboard

in 3 Simple Steps- Pick & Go

My Moodyboards

My moodyboards screen presented all the user prepared moodboards for simple and immediate access.

All the moodyboards placed in one page!

Display of a single moodyboard -after the user finishes the 3 steps process

Onboarding

The onboarding screens suppose to demonstrate the user the 3 way steps process of how creating moodyboard. i chose to make it with motion to make it a bit interesting, interactive and fun.

1

2

3

The Full 

Experience

Moody App

Up Next:

Gonuts App