Cleverly Portal

Design of a web portal offering a workplace concierge service. This platform allows offices to organise, manage their facilities (planned and reactive), it offers staffing solutions as well as office wellness such as hospitality and meeting room booking.

CLIENT: Homyze

The portal

The Cleverly portal is browser-based. It is responsive, but it’s designed primarily to be used on desktop. Such choice is dictated by the amount of graphs and data reported, but also by the target audience – who are people not always very familiar with IT systems.

When designing this product the main aim was to simplify. To make all information easy to access and keep the navigation as simple as possible. That’s the reason which brought us to sacrifice one fifth of the screen to display the sidebar menu, having it fixed on the left.

To make the portal clear and accessible we chose to “don’t compress things”. In principle the client wanted as much information as possible to be shown in one screen. In this way users had everything under their eyes right away, without having to scroll the page. However, given the amount of content to show in pretty much every page, I talked the client through this decision. I convinced them in displaying things more neatly.

The amount of white spaces, the clear sectioning and the balanced use of primary and secondary colours, are the key for making the portal more usable and easy to navigate. Of course users need to scroll down more, but that’s the compromise and in any case scrolling down is becoming more and more a spontaneous movement, even for the least tech savvy users.

Data Page

While the homepage is a dashboard collecting the main information from different pages, the Data one shows in detail all the data of the client/user. There it’s possible to browse through different sets of data which are orderly grouped in different subpages – selectable by the menu at the top. We worked to make all the statistics pleasant to visualise, using tables and graphs as much as possible. All the charts were eventually developed using Highchart.

Settings

This page had to include a huge amount of information, but having them all in one place. Therefore we opted for creating interactive tables, so that users just compiling them would set up all the work they were doing through the portal. The tables’ content depended on the type of work the client was doing, so they would differ from client to client. I designed table templates (quite a few more than the ones shown in this mockup) for all possible kinds of data to insert in a cell (toggle to switch on and off, text with icons, confirmation icons, numbers, arrays of data, etc..).

Bookings

This page shows a resume of the jobs done by the client’s company, followed by two tables listing the jobs with some issues (disputed and unpaid jobs). However, the main feature here is the “new booking” section where it’s possible to add a new job, or following the portal language “place a new booking”. That is done in seven steps, but rather than having 7 pages for that, we opted to have all the process in one page in a collapsable menu. In this way users can fill the content not necessarily in order and can easily review it before submitting.

Addresses

The jobs addresses are displayed on a customised map which I designed with Mapbox. The addresses added on the map can be colour distinguished by their function. In the sample shown there are only two kinds of addresses (blue and pink), but more items can be added to the legend.

User pages

Besides the main pages, I had to design many other “boring” pages containing forms and tables. I would normally just give a style and create nothing more than wireframes for such pages, but the client wanted everything designed.

Contractors

One of the main functions of this portal is for companies to add contractors and manage their work. For this reason the whole contractor section had to be carefully thought to be as sleek as possible.

After a series of wireframes and maps to see what was going where, we arrived to simplify the process of adding a new contractor in a only 3 pages process. It seems simple, but there was a lot of information to show. We arrived to hide most of them, having them appearing into pop-up text boxes appearing on hover. The fear here was that users would get lost in the process given the amount of information. To design this I took inspiration from the booking process of flight companies.

All the contractors’ names and main information are displayed in a table. From there is possible to access each contractor specific page, where all the personal information and job statistics are displayed.

Provider Dashboard

So far we only spoke of companies accessing the portal, however the portal is thought also for single users (the contractors mentioned above). Indeed, when logging in there are two options to access – as a company or as a service provider.

The provider sections differ slightly from those of the company, but the structure is pretty much the same. The main difference is in the menu on the side as they won’t have the “admin” section which includes all items for companies.

Then the page which changes the most is the homepage. Providers have a more social media-looking dashboard with a profile picture and some personal information. Followed below by their work statistics.

Branding

For this project I also designed the Cleverly logo and brand image.

Privacy Settings
We use cookies to enhance your experience while using our website. If you are using our Services via a browser you can restrict, block or remove cookies through your web browser settings. We also use content and scripts from third parties that may use tracking technologies. You can selectively provide your consent below to allow such third party embeds. For complete information about the cookies we use, data we collect and how we process them, please check our Privacy Policy
Youtube
Consent to display content from - Youtube
Vimeo
Consent to display content from - Vimeo
Google Maps
Consent to display content from - Google