95683441_10157304478680886_6001755009866
home-page-front-page.gif
logo1.png

Moody App

Beautiful Moodboard. 
Beautiful Home.

Moody focuses on creating beautiful moodboards for your home. Includes an Exclusive Feature - 3 simple steps  for creating customized moodboard
UX / UI App Design
2020
Holon Institute of Technology
About_
Made At_
Creative Field_
Year_
iPhone-XR-isometric-Standup-Mockup-vol1.
noun_Binoculars_1686620 (2).png

Overview

Research

noun_mobile account_1614051.png

Product UX

UI Design

noun_design_16864781.png
 
noun_Binoculars_1686620 (2).png

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".

 

Global Interior Design Services Market 2019-2023, technavio

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:

Untitled-1-2.png
Pick Trend
noun_color palette_1689579-2.png
Pick Palette
noun_Chair_1689486-2.png
Pick Accessories

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: 

No shadows

Focus on pictures

No text boxes

No depth sense

Clear visual hierarchy

UI interactions concept

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 audienceinterviewed my best friend who wish to redesign her apartment .

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

persona new.png
 
 
noun_mobile account_1614051.png

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.

Step 2

Home Page

Step 1

Step 3

Product Page

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.

Artboard – 4@2x.png
 
noun_design_16864781.png

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.
 

Artboard – 5.png

Primary color:

- Upper banner on the homepage

- Bottom component while the process is active

Artboard – 8.png

Secondary color:

- Bottom component while the process is inactive

- Internal pages

- A small touch of color in the icons
 

Secondary color:

- All icons in the app

Artboard – 9.png

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.

icon%20logo-3_edited.jpg

App Logo

icon%20logo-2_edited.jpg

App Icons

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.

bandicam-2020-07-13-22-56-33-304.gif

"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

bandicam-2020-07-13-23-06-32-819.gif
bandicam-2020-07-14-00-44-44-533.gif

"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.

 

bandicam-2020-07-14-01-04-33-032.gif

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.

noun_charge_1686586-23.png
home-page-front-page.gif

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

Step 2

noun_color palette_1689579-2.png

Pick Palette

step2.gif

Step 1

Pick Trend

Untitled-1-2.png
step1.gif
noun_Chair_1689486-2.png
step3.gif

Step 3

Pick Accessories

My Moodyboards

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

all moody.png
on moody.png

All the moodyboards placed in one page!

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

Web 1920 – 2@2x.png
Suit

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

1.gif

2

2.gif

3

3.gif

The Full 

Experience

logo1.png

Moody App

Artboard – 13@2x.png

Up Next:

Gonuts App