The process designing of Smarkez browser
It now seems clear to me that the pandemic situation has upset our lives, not only in the annihilation of almost every form of sociality, but has also led our minds to the need to rethink certain activities, especially work activities. The world today has understood even more the importance of the digital revolution, especially those countries where the digital divide is still very strong. Platforms that today allow us to create new jobs or support existing ones, is a consideration that we must deepen because the future will certainly see a lot of investment in this. Therefore, several questions arise in this regard:
How can we facilitate those who have to work with a PC?
How can work be reorganized?
How many services does a worker have to manage each day and how many accounts does he/she have for each service?
How can we redesign work on a single screen to speed up the workflow?
It is precisely these questions that Datbrain Ltd wanted to answer by asking me to redesign an old product of theirs, a browser that has the purpose of better organizing digital work, and in some way anticipating what the coronavirus would then bring us: Greater expansion, today by necessity, of smartworking which is undoubtedly in my opinion the future of the working world for various reasons — Read the article on Medium
Smarkez is a product that is aimed at Social Media Managers, those who manage e-commerce, freelancers who use the web for work, advertisers, also now people who work in more traditional fields but who on this particular occasion they have and now make a strong use of the web to work (state employees, lawyers and even doctors). It‘s a product that is also aimed at companies or agencies that have multiple collaborators in their offices or company employees who make shared use of computers.
I thought I’d share this article with you because I am convinced that platform designers should always consider users first but often, too often, business and commercial needs prevail. In this case, however, the desire to really meet the needs of users was very strong, in an emergency situation and distortion of the work experience.
Today, companies ask for multitasking qualities, workers who need to know how to do more things or in any case be predisposed to do it, but we have the impression that digital services are not perfectly aligned with this and therefore do not facilitate the workflow of those who have to perform for work with multiple activities at the same time. It seems to me that the characteristic of the Fordian assembly phase in industries is by now in the digital revolution overcome by a sense of individualistic independence, where the worker is a direct source of production in solitude and from which one expects to have a product worked in its entirety. And a key feature of this new industry is “Speed”, we have a lot of information in a very short time, and it will be faster and faster, so Smarkez wants to capture this sense of speed that should not be a limit for the digital worker.
I’m sharing these considerations to reflect together on the need to re-organize work in the broadest sense in this new situation, where digital has made it possible to continue to produce. A situation that has revolutionized work, which has led many new digital users, many traditional workers to reconsider the web in a new and necessary vision. And we cannot fail to consider them and we need to get to know them better. The time has come to consider the newcomers and listen to them. How many of you have heard in the past years that digital works could not be a real future? Today it is almost embarrassing for traditionalists to admit how fundamental digital is, not only today in this world pandemic situation. A new window opens on the web, a way to navigate the troubled sea of the internet in a safer and easier way, a more organized workstation in its design and ready to be used for a more fluid workflow, a digital personal office: Smarkez.
Quoted in the book DIGITALIZATION written by Gianluigi Ballarani & Francesco Facchinetti — Sperling & Kupfer, 2019
“Smarkez is the first professional browser for who work online […] It‘s a fundamental tool for those who work on the web.”
Smarkez is a desktop app with a browser and a service to organize digital platforms into lists that the user can protect with a password or setting it accessible to those who have access to his/her PC.
Add most popular apps and related accounts from the internal market, manage app icons positions in a left tab and receive notifications. Use the Split View feature to manage the layout from 1 to 4 different and totally indipendent screens. In addition, an internal market for Add-ons organized into categories. Easily manage of all passwords for added app-accounts and many other features totally free.
Add most popular apps and related accounts from the internal market, manage app icons positions in a left tab and receive notifications. Use the Split View feature to manage the layout from 1 to 4 different and totally indipendent screens. In addition, an internal market for Add-ons organized into categories. Easily manage of all passwords for added app-accounts and many other features totally free.
An office in 1 screen
Certainly one of the main goal for this project was to support those who work with the web, it is therefore designed for those who already work in digital and every day use dozens of platforms to sell, advertise, design or manage his/her own Business.
In the design process, therefore, the first look was aimed at the main users of Smarkez, but obviously it can also be used by those who simply want an easy-to-use browser. One of the problems of those who work online, maybe not in a physical office, as it is becoming more and more frequent, is to have dozens of so many opened pages in front of them to follow more activities, perhaps also often linked to different companies, on one single screen.
Imagine being an employee of a marketing agency that deals with the sales of different companies and following the sales trend of different e-commerce, sponsoring products on the web or social networks and responding to emails or instant messages from customers. So imagine all this activity on a single screen, perhaps a laptop, and who knows how many opened web pages and apps! A lot of effort to open and close, time lost to make the different switches from the different accounts (because not all digital services offer quick and easy switches). This is one of the reasons why Datbrain Ltd wanted to completely rethink an old project, to offer maximum comfort to those who work in the digital world, entrusting me with the redesign of the user interface and the user experience.
Smarkez is designed by Marcello Di Giovanni — marcellodigiovanni.design
Focus on possible users
A new niche product, specific for a catchment area of users defined “Professionals”, of which only the very confused bases existed, and it was necessary as a first approach to identify more specifically the possible real users to understand their uses and behaviors by creating Personas cards.
A first substantial difference between these users was that they are divided into two first macro-groups, those who work from home with a personal computer and those who work in the office from different or shared computers. A second macro-group is formed by those who follow a single activity and others who follow several different projects. Other characteristics have emerged that I will not dwell on in this article. Thanks to this first analysis I understood what are the real needs of those who work with the web (Social media manager, Marketer, digital Freelancer, marketing agencies, digital employers, etc…).
It emerged that for such a virgin product it was necessary to start with a basic launch, with a clean interface and that gave the feeling of having an open, clean and customizable space with which to work.
Personality is what makes you unique.
Smarkez had to have a stronger identity image from my point of view and it wasn’t just an aesthetic fact. It was not part of the project but the instinct to combine a new graphic design for this digital product with a much more broad, linear and consistent to better define Smarkez’s identity.
I then proceeded to work on the project but at the same time I also developed a new brand, on the other hand a completely renewed Smarkez was being born and the team was aware of it. The old logo was developed too vertically and it was a problem if you resize it, for example in a tab or simply in an app icon for desktop.
I then proceeded to work on the project but at the same time I also developed a new brand, on the other hand a completely renewed Smarkez was being born and the team was aware of it. The old logo was developed too vertically and it was a problem if you resize it, for example in a tab or simply in an app icon for desktop.
The new logo continues to be a letter “Z” of Smarkez but with a renewed shape, it continues to have a reference to the lightning bolt symbol in the sense of fast browser / accelerates your workflow, a new color no longer yellow but an electric blue #2459FF, a reference to the splitting of web pages (they are two pages that split) and therefore a more suitable symbol for a digital-professional market. — Read the article on Medium
Smarkez and its new desktop interface
For internal development reasons and a team decision there is currently only an app in desktop version available for macOS and Windows, an app that can be downloaded for free from smarkez.com - I want to clarify that the app was completely redesigned by Marcello Di Giovanni as an external Digital Product Designer and then delivered and developed by the current owner Datbrain Ltd starting from February 2020, so in this article some images of Smarkez redesign with macOS Big Sur to make it more current despite having been developed earlier.
Smarkez appears as an empty space that the user can customize. A tab on the left side where the user can access the browser (The logo Smarkez is fixed in top in all created lists and it represent the browser page) for navigate in to the web, after all icons of the apps installed, in this case no apps are installed in the “Welcome” list which is a welcome page, an initial guide, which the user can also delete or modify (make it private or change its name).
Then add-ons market, still under development and finally the photo account from which the user can access to all settings pages. — Read the article on Medium
The left bar is thin and vertical to leave central space for user navigation. All digital services installed in the created lists appear there. From the left bar the user can then access the browser, the Apps, the App market, the Add-ons market, the management and selection of all lists and the user account.
By clicking on one of the apps the user can manage the central space layout from 1 to 4 screens and manage all the views with the “Split view” feature that I will show later. And manage the positions of installed apps in left tab simply by dragging it up or down. All logos of the services, all favicons and all pages of the services shown in this article and project are protected by the copyrights of the companies mentioned and my only purpose is to show the functionality of a browser on which it is possible to install the most popular external services in the digital world, of which neither Datbrain Ltd nor myself hold any rights.
By clicking on one of the apps the user can manage the central space layout from 1 to 4 screens and manage all the views with the “Split view” feature that I will show later. And manage the positions of installed apps in left tab simply by dragging it up or down. All logos of the services, all favicons and all pages of the services shown in this article and project are protected by the copyrights of the companies mentioned and my only purpose is to show the functionality of a browser on which it is possible to install the most popular external services in the digital world, of which neither Datbrain Ltd nor myself hold any rights.
Left tab: a. Browser fixed icon in top is selected in “Personal” list and 1 app is added — b. In a different list some apps are uploading/installing while user are hovering on on one of these — c. In the “Social list” created by the user nothing is selected and appear the grey page where appears some guides — d. The user added in the list “Office” so many apps — e. How appear the scroll in the tab — f. How to switch from one list to another or create a new one — g. The user in “Work list” selected an app and he/she want to manage the screen view from 1 to 4 (In this case the screen is divided in 2 views) and possibility to delete the app. The user is moving the last app in another position. An add-on installed by the user is selected (In this case the Hudi extension) — Copyrights to all companies mentioned
Imagine being able to create a list of apps for your office open to all your colleagues or a list of personal and private apps protected by a password. Imagine that PCs in an office (or a school) are often used by several people. You then enclose your accounts or those of your employees in an easy-to-manage way.
The user can then install all the apps he wants in the list through a dedicated internal market. He can leave reviews or share these apps with his colleagues.
By clicking on the Smarkez logo the user access the browser. All lists created have a fixed browser at the top and what the user is searching in a list will not appear in the browser of another list, this is because the browser is dedicated to that list!
Here the homepage and other 7 website that user are visiting, closed in little cards. The homepage show a big search field, favorites pages saved by the user and recent visited websites that the user can easly manage.
Here the homepage and other 7 website that user are visiting, closed in little cards. The homepage show a big search field, favorites pages saved by the user and recent visited websites that the user can easly manage.
By selecting a 4 view layout in Smarkez, the navigation bar in browser is optimized by an horizontal scroll for easy and intuitive navigation. — Read the article on Medium
The user has finally added his/her apps to the list. In this case the user has selected an app, selecting the 4-view layout, and so can access multiple accounts of that app without any tiring switching, managing all views with Split-view feature. Our user takes care of the management of different ecommerce and can chat freely with his customers at the same time and on one screen. And he/she can also open multiple cards in nav bars in the same view, like in browser, thus opening hundreds of possibilities.
The internal team also asked me for a new possibility, to do a simple internal switch of the app, directly in the central area. On Smarkez is designed the possibility of switching from one app to another directly by selecting the favicon and selecting the app to show (obviusly only added apps in this list). This feature to make it even more fluid choice.
Easy management of all the accounts included in the apps added to the list. Go to Settings in Smarkez left tab > Select Apps account manager > Select the List > Manage all added accounts and their passwords.
And obviously the dark mode version great for who works in the night to enable or disable directly in the dropup. Below a detail of dark mode:
In the future I am sure that Smarkez can be a valid support for those who have their office practically on their computer, it can be a fantastic tool for offices or for freelancers who manage their work on the web.
"Digital work has now a fantastic ally called Smarkez"
Smarkez is designed by Marcello Di Giovanni in 2020 — All Rights Reserved Datbrain LTD www.smarkez.com
Some pictures, logos, words, companies name, platform UI or other graphic elements covered by the copyrights of the owners are shown for illustrative purposes of a browser with most popular digital platforms and services.
Some pictures, logos, words, companies name, platform UI or other graphic elements covered by the copyrights of the owners are shown for illustrative purposes of a browser with most popular digital platforms and services.
This article not have a commercial purposes and all rights are reserved to the companies mentioned.
