Home Decor

E-commerce UI Project

Responsive Web App

  • Building a Cohesive Brand
  • Brand Guideline
  • Desktop design
Launch Behance
Responsive E-commerce Web App
UI Design Project

Home Decor is a web responsive e-commerce app that focuses on decor items. My aim is creating a cohesive brand and a useful shopping platform.


There are several similar applications, such as Wayfair and Decor Matters. But Wayfair doesn’t have an app for iPhone, and it has too many annoying ads on its website. Decor Matter doesn’t have a web site, but a mobile app for iPhone.


It is necessary to present the product to the user as much as possible on an e-commerce website. However, it should neither be full of annoying elements nor too many product options on one page.


I believe less is more elegant. I choose to create white space between the items so that the user can focus only on the objects. Also, the user likes to see some recommendations depending on their selections.


This application is for users who want to buy decor items.

Key Features

The application allows users to filter the items. There are two filtering options one is general and most common item filter; the other option is an advanced filter that helps the user search by color, price, special events, or the place that they want to use them.

Brand Guidelines
  • Guiding Principles
  • Our Logo
  • Logo please don’t
  • Color Palette
  • Font Style
  • Image Style
  • Illustration Style
  • User Flow Diagram
  • Wireframes
  • User testing notes and results
  • Responsive Design
  • Mockups
Guiding Principles

Home Decor is an e-commerce web app which helps people to find elegant, stylish and unique home decor items.

Our Logo

‘Home sweet Home’ made me influenced; that’s why I chose the big serif font ‘H’ and small decorative ‘decor’ word.

Logo please don’t

The examples illustrate some common incorrect uses and application errors.

Color Palette

I chose Soft colors used to awaken a peaceful atmosphere during shopping and the red-orange hues to create excitement and stimulate the desire to buy.

Font Style

Source Serif Pro is the font used for headlines on marketing and product web experiences. It is a serif typeface and a complementary design to the Source Sans family. It is available for most world alphabets. Nunito is the font used as the secondary typeface for paragraph text and small UI elements. The third available typeface is Snell Roundhand which is an impact font for design purpose only.

Image Style

I chose the bright background images throughout the project to create a friendly atmosphere and with some dark background images to highlight items and create contrast.

Illustration Style

Illustration style is friendly, unique and easy to understand.

User Flow Diagram

Based on several user stories from the brief, I created a user flow diagram.


I created the low and mid-fidelity wireframes created based on the user flow, which provided all the information. The rough wireframes present all the ideas rapidly and save time.

low-mid fidelity wireframes
high fidelity wireframes
User testing notes and results

Following the round of user testing, I made the changes and came to the final stage.


Finally, the optimized features are added to create more efficient and intuitive flows.

Landing Page
Home Page
Home Page Full
Profile Page
Search Page
Filter Page
Adv Filter Page
Filtered Result Page
Item Page-1
Item Page-2
Item Page-3
Item Page-4
Basket Page
Sign In Page
Create an Account Page
Checkout as a Guest Page
Checkout Page
Success Page
Responsive Desktop Design

For Responsive Design, the breakpoints are set at the exact device widths.

What I learned?

I learned about building a cohesive brand, how to translate an entire brand into brand guidelines, and how I can go about creating a brand guidelines document of my own for this project.