Loading
00
UI & UX Design
OLA
Client: SELF PROPOSED
Year: 2020
Platform: WEB
THE IDEA

OLA (Online License Activator) is a platform that is designed to buy, sell, track and manage licenses for software. To be more specific, this platform is inteded to be used as a portal for a company's clients to self maintain, renew and acquire products (software). The idea for an OLA came to me after one of the previeous companies that I've worked for, struggled with manual maintaining an efficient way to keep with the client's requests.

THE CHALLENGE

My ambitions was to create a strong foundation that can embrace a rapidly evolving business. The main focus of this platform is the scalability and the power to accomodate any type of software licenses that are added.

The high level goals were to:

1. Create a user permission system for the platform.
2. Design a style guide for the user interface to fit for different pages and user permissions.
3. Design the client side to be as self sufficient as possible, with minimum to no input from the admin side.
4. Be scalable.

HOW IT WORKS - Client Side

Initial Steps

First things first, the users (just the clients) are required to create an account and then login on the platform. In case of forgetting the password or requesting help support, there are dedicated buttons for the users to press and solve their problems.

Log In

Dashboard

After the login, the client is greeted with the the dashboard page, where a handfull of statistics are presented to him. The app consists of two navigation bars, one on the left side of the page and one at the top. The left navigation bar is used to navigate between main points of interest for the user such as dashboard, products, buy licenses, user profile, while the top navigation connects the search, calendar, cart, notification and user help pages.

To improve the accesibility for the user, buttons with quick links have been added on the dashboard.

Client Dashboard

Products section

Products section consists of four pages products, add products, view products (with licenses) and view products (without licenses).

When the client selects the product icon on the left navigation bar, the app redirects him on the product page and a list appears with all the products that he added. On this page each product displays basic relevant information, an icon (the globe) that indicates if the products is public or private and a delete option in case the client wishes to delete the product from their account. In order to improve the user experience, a filter and shortcut buttons were added at the top.

To add a new product, the client simply needs to click on the "+ product" button, select the product from the dropdown list and then press the save button. Product details are loaded from the database automatically.

View Product Page is represented in both states (with and without containing licenses). The "View Product Page (with licenses)" contains a filtering system which enables a faster search for the client.

Purchasing licenses is covered in the next section.

Product Page
Add Product Page
View Product Page (with licenses)
View Product Page (without licenses)

Purchasing Licenses

Purchasing a product is quite straight forward. The clients selects the product from the dropdown list, the start date, license duration, number of licenses and the discount code if applicable (discount codes cand be generated by admins). A preview of the order is displayed on the left side. The client can add multiple orders on the same invoice.

Purchase Product
Cart
Payment Details
View Invoice

Calendar

The calendar page displays basic information such as server maintenace schedule, some user actions, license expiration dates and potential updates announcements for OLA.

Client Calendar

Search and notifications

OLA includes a search system that returns relevant results based on the search such as products that you added on your account and even specific license keys. Selecting one of the search results will take you automatically to that page.

The notification system allows the client to view relevant system messages and messages from admins (in case you have reported a problem to the admins).

Search
Notifications (collapsed)
Notifications (expanded)

User Profile

The user profile section can be accessed by selecting on the user image on the left navigation bar. This section allows the user to change personal details, such as address or billing information or to view previous orders. In case a problem occurs with the order, the client is required to use the live chat to report the problem to an admin.

User Profile
Billing Information
Orders
Report a problem
Support Admin

HOW IT WORKS - Admin Side

Dashboard

The dashboard page is similar with the dashboard on the client side, the only difference being two extra cards with statistics about the number of admins and generated licenses and a quick button to ad clients.

Client Dashboard

Products Section

At the first glance, product section is similar to the one on the client side, but there are several diferences. The admins are responsible to insert and manage new products into the system and set the apropriate visibility for the clients (public, private and private-visible).

Product visibility is usually set when the product is launched to public or private, however the visibility can be changed for individual clients in case they wish to purchase licenses. To allow the client to view a private product, the admin must select the product, then the client and set the product visibility to private - visible.

The admin has also the ability to view with client has active licenses for that specific product.

Product Admin Page
View Product Page
Add Product Page
Product Visibility

Client Section

When clients register in the OLA, they automatically become visible for the admins. In case there are problems with the registration process or the companies details change, the admin has access to change key information such as name / address and other contact details.

Admins have also access to view or delete the client's active product licenses and can even generate licenses or discount codes.

Client Admin Page
View Client Page
Add Client Page

Admin Section

This secion allows admins to view other admins profile details as well as their recent activity regarding clients or products. Super admin rank is the only one allowed to edit or delete active admins due to potential security reasons. (super admin is a rank that has not been yet implemented)

Admin Page
View Admin Page

Generating discount codes and licenses

Discount codes can be generated by admins in OLA for clients that would like to place big license orders. Admins can set number of licenses and the discount amount as well as the period of availability of the discount codes.

Generating licenses should only be used by admins in case a client reports a problem with license purchasing.

Discount Code
View Client Page
Generated Licenses
View Generated Licenses

Admin Calendar

Similar to the client calendar, the admin calendar page displays basic information such as server maintenace schedule, admin actions and potential updates announcements for OLA.

Admin Calendar

HOW IT STARTED

OLA PLATFORM FLOW

I designed the flow of the platform based on the access permissions of the user ranks. The client side was intended to be able to run independently without the assistance of other ranks.

OLA App Flow

WIREFRAME

When I built the wireframe, I have encountered a series ui and ux problems (from a regular user's perspective) which I've taken as a challenge to solve them by using simpler solutions. I have tried to maintain a relative standard layout such as left and top navigation menus, which should be intuitive for most of the users.

Accesibility was an important point when designing the layout, in a sense that the user should be able to access everything with ease.

CONCLUSION

OLA has been by far the most interesting and challenging project that I've worked on so far and hopefully I will be able to add more features in the future and take it to the next level.