Masa'ot

Organized tours booking website

UI / Web design

2015

Senior designer at STG

About Masa'ot

EASY SCREEN provides a unique range of products and brands for tradeshows, Mobile Presentation Systems, Events, and Display. The company design and supply display products for long-term use such as Rollups, Counters, Tents, Exhibition support, Flags, Outdoor Equipment, for operations in Europe, Africa, and America.

The project

Create a website that enables EASY SCREEN customers to place orders online while making their porches process easy. EASY SCREEN offers its customers a big selection of products, each product has different variables and lots of technical information (materials, videos, images, assembly instructions, etc). Therefore Our key focus was on how to present the products. Our challenge was to present complex products in a simple way and making their porches process easy.

My part?

Our user


The vast majority of our users are returning customers with a professionals background, they are goal-oriented, and they are here to complete an order. 

Renewing the logo

The vast majority of our users are returning customers with a professionals background, they are goal-oriented, and they are here to complete an order. 

Key Valuse

Color Pallet

3 Personas

3 different flows

Personas


The vast majority of our users are returning customers with a professionals background, they are goal-oriented, and they are here to complete an order. 

One

The vast majority of our users are returning customers with a professionals background, they are goal-oriented, and they are here to complete an order. 

two

The vast majority of our users are returning customers with a professionals background, they are goal-oriented, and they are here to complete an order. 

Three

The vast majority of our users are returning customers with a professionals background, they are goal-oriented, and they are here to complete an order. 

Buttons

Action Button


The vast majority of our users are returning customers with a professionals background, they are goal-oriented, and they are here to complete an order. 

Information button


The vast majority of our users are returning customers with a professionals background, they are goal-oriented, and they are here to complete an order. 

Home Page

 

After Defining our users we decided to design the home page without a fancy header image or an about section, Just the product categories.

Two in one


Category page + Product page

 

Next In hierarchy came the single category page, usually followed by the product page. Here we changed the flow to create a better process. We combined them both into one. The products were arranged like thumbnails but they contained all the information about the product and all the actions the user needs to do. This way we saved a click and shortened the process

product-page-wair.jpg

The welcome to product flow

Two different flows for logged in or gusts

Opening screen

Register

Sign in

log in home display

log in category display

log in product display

Opening screen

Gust home display

Gust category display

Gust product display

Gust product preview​

The differences between
gust user and logged in users

  • Registered users can view prices.

  • Registered users can add products to the cart.

  • Registered users can see more information about products.

logged in product preview​ 

EASY SCREEN, easy access

The shopping cart

As I machined Only a logged-in user can see products and make an order.
We wanted to give those users an easy way to open the cart at any time and edit the products in it including their different variables. This was important because of the high number of changes a user makes during the order and the complexity of the products information.

So we used a cart tub to follow the user left side of the web pages, click on it opens the cart preview with all the editing options. My UI challenge was to squiz in all this information and buttons in the limited screen space.
 

Cart preview 

All Products in the cart are in accordion display.

 

When clicking on the 'edit' button it opens and reveals the different product variables like size or finishes. 

The user can edit them separately, remove one of them, or move to trash the howl product.

Repeating the system

After creating the cart preview we applied it to the cart itself with a full-screen display. In addition to the regular cart, we had a screen of former orders, so we used the same editing system on this page as well.

Accordion > Click edit button > Opens variables > Edit > Done

Phone      857-540-8806

E-mail      afekmar@gmail.com

LinkedIn  linkedin.com/in/afek-chernov