Kirot

Online wallpapers catalog

Explore Project

Project Scope

  • Defining the product flow
  • Improving the brand look
  • Creating visual language
  • Creating an easy to use interface

My role

  • UX Designer
  • UI Designer
  • Visual Designer
  • Web developer
Easy and intuitive

Kirot website should provide the easiest, fastest & delightful experience for its customers.
The main objective was to create a catalog which let the user explore between the various categories, find the product he has an interest in and submit a form for more details

Timeline

The timeline I had to work on this project was about 10 days, therefore I needed to produce relatively fast results that will serve the goals of my client.
We decided to treat it as a kind of MVP that contained the most important features while providing a look & feel of a professional service.

Main features

The website in its initial form will include an home page which includes:

  • Main products catalog and categories navigation.
  • About & testimonials sections, in order to establish the feel of confidence to the potential customers.
  • Fast contact forms for customers who want a phone call service

A product page which includes:

  • Image gallery for more color options
  • Product description
  • Room types that will fit this wallpaper
  • Order form with all the information needed to provide a price for the customer.
  • More products from the same category

Lets start

To achieve my client's goal, while keeping in mind the short timeline, I first started exploring a few layouts ideas I sketched.

Home page layout sketches
Wire-framing

After creating a few layout options, I moved it to a digital design software (Figma) i'm working with, so I could turn it into a wirefarme I could share and discuss with my client.
I chose to work with Figma because it has strong sharing capabilities (similar to Google Docs) which giving me the option to collaborate and iterate fast with my client.

The home page

For the home page I explore several layout options, including different layout for the hero section, the products catalog sections and for the other informational sections.

From marketing needs we decide to place a CTA contact form in the main hero section, to make it easy for customers to leave their contact information for a re-call.

For the products catalog we chose to option with the top categories bar over the right bar, so we "earn" more place to show the products (using a 4 columns grid instead of 3).

Also in this stage I thought that the categories bar should act as "Sticky" in order to ease the navigation between the categories tabs and not making the users scroll to the top every time they would like to switch to a different category.

Home page wireframes
The product page

For the product page we explored to options, each has its pros and cons:

01. A pop-up overlay on top of the home screen.

Pros:

  • Make the navigation between products very easy.
  • Make the experience feel lite - all of the journey is happening in one place.

Cons:

  • There is not much space to place other components beside the most important ones - very limiting for future improvements.

02. A separate screen

Pros:

  • No need to compress the content into the relatively small size of a pop-up.
  • A lot of space for potential and future features.
  • By having more space on the screen, the experience will be dedicate to this products and the user won't be distrust by other products.

Cons:

  • The navigation to other product will take a bit more effort from the user.

After considering both options, we decided to go for the full page experience.
This conclusion come from the understanding that the customer will spend his time browsing between various products on the home page, and only after he will decide to learn more about a certain product we should let him focus on that product only.

To extend the experience we added a section for related products from the same category.

Product page wireframes (pop-up vs. full page)
Brand identity & visual language

After we decide about the structure and layout of the website, we moved into the design phase.

Because Kirot is a new brand, I also helped my client improving and defining the logo and the brand assts.

The logo

The values we want to communicate is a young, bold, exiting & stylish brand.


Starting with the logo, after exploring various options, we found an interesting symbol with the letter "K" that transfer a geometric-pattern look, inside its box it also look like a wallpaper on a wall. The line below the text indicates a scroll shape

Logo exploration process

Then we chose a font that will accompany the K symbol.

We want the typeface to be bold and stylish - has the brand.

Final logo (2 Colors & 1 color variations)
Logo mockups
Color palette

The colors we chose for the logo and the visual language are bright yellow and dark green.

The yellow represent the values of the brand - young, bold, exiting, while the dark green balance it and giving it  a stylish look.

After picking the main colors, I created a palette from each of them so we can use it in different parts of the UI and the visual language.

The yellow will function as the primary and CTA color in the UI, while the dark green will be used as the neutral colors of the UI.

Kirot color palette
UI typography

Kirot website is in Hebrew, so we needed to find an Hebrew font that we could use in the website and will match the overall design look.

Heebo - a Google font, is a perfect choice for us, it has a stylish look and a varsity of weights to use in different places of the UI.

I defined the different sizes and weights of the headings and paragraphs That will be used in the UI.

Website typography system
Brand assets

Some assets from the visual language of the brand that will be used in the website and in other applications.

K pattern
Website icons
Home page design

As mentioned, the main flow of the website is to explore between products in the catalog and navigate to the product page, from there to submit a form.

The whole home page was built to serve this main flow, meaning the products catalog it the main and the most interesting section on this page.

The other sections below it should empower the feeling of confidence to order from Kirot:

  • About us: Establish a friendly yet professional look
  • Why choose us: present the main features and advantages of the company
  • Customers reviews: social proof for the quality of the product and the service
Website Titles

We made a use of the logo structure in the website headings

The title text is used as the logo text, the "K" is being replaced by an icon that fits the title and the stroke beneath all.

Interactions

In order to make the experience smother and add finesse to overall feeling, I added interactions to some of the elements.

Product hover interaction
Choose us over interaction