The making of the Sima-Land website templates

Overview• Process

Looking at possible improvements even before we start designing the interface.

Exploring the current catalog structure, noting that many items are presented in several categories at the same time which confuses visitors and makes navigation difficult. Also, finding certain categories of products requires going 5–7 levels deep into the catalog. Removing the duplication and cutting the nesting levels down to three: category, section, subsection.

simaland process nesting

Using several attributes to create the catalog structure, such as item type (stationery, accessories, toys) and purpose (automotive products, sports and leisure, products for children). Removing duplication: pens, for example, belong to stationery, products for children and souvenirs. Physically they exist in a single place in the catalog, yet can be linked to from different categories.

Adding temporary categories such as Back to School, International Women’s Day, Victory Day, Wedding, etc. which will allow to dynamically add themed tags to product categories.

simaland process catalog

Realizing that many categories contain products grouped by a certain parameter, for example by materials, theme or price. Deciding to remove these groups and replace them with filters that would work for all categories, such as New Items, Hot and Exclusive.

simaland process filter

The website is designed primarily for companies. Writing down three most likely user scenarios: corporate purchases of office products, purchases of store stock and resale buying.

Describing user roles, their needs and actions on the website. Collecting ideas on making the website more convenient for each user group.

simaland process users

Noting that many people often purchase products from certain categories and entirely ignore other. For example, an office manager always needs pens, paper clips and paper. To prevent them from going through the entire website every time they need to place an order, we narrow their catalog down to a certain size. In fact, instead of adding a single item to favorites, they will be adding an entire category or search results. The store range is updated automatically based on the chosen category or applied filter. Later, all they need to do is open that list to see all new or discounted items.

simaland process select

Visitors can now see the selected part of the catalog or the entire product range. They can also create their own sections inside favorites. Sometimes it’s easier to add an entire such section to the cart.

Adding the ability to view products in favorites which went on sale since last visit, as well as new products in the chosen sections. This can be a good purchasing motivation.

Suggesting improvements to the order placement process. For example, easier repeat orders, quick adding of favorite products to the cart and similar product suggestions. Assembling all the ideas into a single clickable prototype.

simaland process backet

Making the first attempt at the design concept. Developing the header design.

simaland process concept1

Working on product lists and assembling a prototype to show some of the interface solutions.

simaland process prototype

Demonstrating to the client.

simaland process concept

The chosen direction and smaller interface ideas are approved, but the client still has doubts about the visual design.

simaland process concept2

Implementing full-screen search.

The team suggests to change the approach: right now we are working on the main page for an unauthorized user, while most of the store’s users are going to be logged in.

Trying to create the main page for an authorized user implementing as many functional solutions as we can.

simaland process main

The client doesn’t like the new approach. It wouldn’t work for the target audience—women—and the colors look gloomy and unattractive.

Asking the art director for advice.

simaland process reject

The main designer goes on vacation, inviting another one to help.

Trying to make the website graphically interesting. Finding a major theme: castles in the air and flying trade ships delivering products to the distant corners of the world.

simaland process castles

Abandoning the idea to show the catalog to unauthorized users and deciding to replace it with a nice landing page inviting to register.

simaland process landing

The client likes the new approach.

The primary designer returns to continue developing existing ideas. Considering turning the unauthorized user’s main page into a dashboard.

simaland process dashboard

Putting together a new presentation.

simaland process presentation

The client approves the concept.

Continuing the work on the remaining pages. Thinking about the shopping cart and the catalog. An idea comes up to allow users to mark products with a marker, like they would do in a paper catalog.

simaland process marker

Keeping the full-screen search.

simaland process search

We get another task: we need to implement collective purchasing. One user should be able to create an order and invite other users to view it, or make the order available to everyone from the start. Starting to design.

simaland process co_buying

Meanwhile, the second designer is busy creating graphic elements and working on the landing page.

simaland process draft

Ultimately deciding to drop the landing page in favor of a fully functional main page as the client changes the business model which now allows unregistered users to place orders, too. Changing the page accordingly.

simaland process search_results

Adding the order block with notifications and status updates to the main screen for authorized users. Prioritizing favorite sections in the catalog. Adding recommendations and the last viewed items block.

Embedding Expert Picks right into the catalog: it’s a nice and useful feature that can come in handy during holidays and seasonal events.

Animating the tiles on the main page, they now expand on click to show product previews. The first tile is expanded by default to demonstrate the functionality.

Clicking the arrows will change categories.

simaland process interactions

Adding a page explaining the new user interface.

simaland process tutorial

Creating a personal recommendation page with full user statistics and an automatically populated recommended products list.

simaland process advisor

Reaching the final decision regarding the color scheme. Bringing all the elements on the website to a shared style.

simaland process final

Typesetting, fixing bugs.