Moody focuses on creating beautiful moodboards for your home. Includes an Exclusive Feature - 3 simple steps for creating customized moodboard
UX / UI App Design
Holon Institute of Technology
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:
Focus on pictures
No text boxes
No depth sense
Clear visual hierarchy
UI interactions concept
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.
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.
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.
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.
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.
- Upper banner on the homepage
- Bottom component while the process is active
- Bottom component while the process is inactive
- Internal pages
- A small touch of color in the icons
- All icons in the app
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.
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.
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
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
in 3 Simple Steps- Pick & Go
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