We all know that a gorgeous UI with great photographs should work well.

But even when you’ve got both, you can still be putting off or confusing your users with the layout of your products.

When you’re offering too many product choices, displaying too many pictures of your products, or arranging your products in jarring ways, you risk overwhelming the users. You don’t want bad design to kill your sales

This case study makes suggestions for optimising your portal design by drawing on the cutting-edge of recent research.

What makes your portal a successful design

Avoid clutter

There should be a clear point of focus. The visitor’s eyes should be drawn straight to a CTA button or important information.

Simplify your menus

Menus are a great way to stay organized and group what you’re selling. Menu shouldn’t be super specific. Instead, use broad terms to categorize your products.

Eliminate unwanted steps

Once a visitor decides to buy something, they should find it easy to complete the checkout process. Each additional step in this process will increase the chances of them abandoning the transaction.

High quality product images

Having an online portal means user’s don’t get to touch and feel the products, that’s why you need to take HD pictures of each product you’re selling.

Clear navigation

User must be able to navigate easily and consistently. An annoying and confused navigation can never help to increase adoption.

Go mobile

You can’t afford to exclude mobile users. If you want to take your mobile strategy to the next level, you should consider mobile friendly optimisation.

Process

Empathise

Define

Ideate

Prototype

Test

Red Moki Way Portal Design

Portal Landing Page

The tile based UI has been designed to cater the requirement where the user has to order something frequently. In this design methodology upfront search bar helps user to navigate faster to the desired item.


It also provides ease of use to access other options such as:

  • Report and issue
  • Get help
  • My requests
  • Knowledge Base etc.

Service Catalog Page

Service catalog landing page has been customised based on the business requirements.

Widget based UI to make it more functional.

Main widgets are:

  • Flyout menu
  • Carousel banner
  • Popular items
  • Recent Items
  • My requests
  • My Approvals
  • Saved Bundles

Flyout Menu

Flyout menu not only looks good but it works good too. It’s a logical grouping of most important and frequently used categories, sub categories and items. It provides ease to view category upto three levels down by just doing hover on it. Flyout menu is also equipped with meaningful icons to provide a better visibility and understanding of the categories.

All Categories Page

We can not have all the categories on the flyout menu as it will make it look cluttered and heavy to download.

All categories of the catalog can be seen from this page. It is an exhaustive list of all the categories and its sub-categories.

    More pages