Thank you for the work you did for us, the whole process was arranged, professional, and efficient leading to an impressive product with a lot of thought of the smallest details. The work with you was really flowing, ticking and pleasant. You are patient, understanding, proactive, and determined to provide a solution for every need. The project progressed with efficiency and agility that did not come at the expense of results. Glad I chose to work with you and the result is far beyond what I expected! So thanks again, we will surely meet in the next project.
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
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.
The website in its initial form will include an home page which includes:
A product page which includes:
To achieve my client's goal, while keeping in mind the short timeline, I first started exploring a few layouts ideas I sketched.
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.
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.
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:
Cons:
02. A separate screen
Pros:
Cons:
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.
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 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
Then we chose a font that will accompany the K symbol.
We want the typeface to be bold and stylish - has the brand.
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 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.
Some assets from the visual language of the brand that will be used in the website and in other applications.
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:
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.
In order to make the experience smother and add finesse to overall feeling, I added interactions to some of the elements.
