The main purpose of this project is to offer a new way of browsing or accessing any web application within a safe and controlled environment. This secure environment can be accessed from any device with connection capability and regardless of the operating system used. This technology breaks with the security systems based on searching and detecting threats by isolating each session.
Regarding User Interface, one of the main goals was to make the learning curve smooth by maintaining a clear and effective design. Here you can try a demo.
* For the demo, use the ‘prev’ and ‘next’ buttons. Buttons such as ‘Login’ or ‘Apply configuration’ go directly to the next screen (no login required). To change the theme to light/dark mode, use the ‘sun/moon’ icon at the top of any screen at any time. To view the demo again from the beginning, use this link.
I lead the UX Design and contributed in a number of areas such as ideation, benchmarking, research, user journey, buyer persona & experience map design, wireframes, wireflows & information architecture development, UX writing, prototyping, final design, responsive layout (HTML, CSS/Sass, Bootstrap, etc.), style guides, UI Kit, heuristic evaluation, guerrilla and user testing.
The handling and configuration of this software, despite its intrinsic complexity, significantly improved its ease of use and consistency throughout the tool on every iteration. I developed a new style guide, starting from the basic identity manual that the company already had. My new style guide, along with the UI Kit I developed, served as a basis for creating this and other tools. All new data-driven designs marked the line to follow in terms of visual identity, branding and usability.
This whole project was created under Agile methodology. Below are a series of materials to better understand the development process that I carried out with a team of about 15 people, from frontend, to backend, to QA or marketing.
01. Software Installer & Admin Dashboard
After several user tests and surveys, we obtained important insights that led us to make some important decisions. The surveys and tests revealed that, in more than 80% of the cases, administrators would remain in front of this software for at least 3 hours a day. That’s why we decided to add the light and dark themes to the project in order to adapt it to the personal preferences of each user. The colors’ contrast needed to be adequate in both themes. All screens are as simple and understandable as possible, even those containing a large amount of information. Contextual tools (tooltips) were added to improve the understanding of some of the settings that the user tests revealed to be more complex.
02. Wireframes Lo-Fi (Software Installer & Admin Dashboard)
Wireframes serve as a perfect example of the user’s interface refinement after several iterations.
03. Wireframes Mid-Fi (Software Installer & Admin Dashboard)
Some early design guidelines that I generated to make it easier for the client and stakeholders to understand screens and its evolutionary process.
04. User Dashboard (Hi-Fi)
This is the end-user side dashboard. It is the control interface provided to the end customer to manage internal or local network. Look & feel is already quite close to the final design. A good part of the screens that make up the section in charge of configuring the security software are shown.
05. User Dashboard Testing – Axure Mockup Iterations
This mockup was developed for improving and simplifying some especially complex sections of the software. Certain sections were regrouped by means of ‘card sorting’ and the space available on the screens was better used.
06. Logs Manager
This is a responsive HTML layout developed for a tool within the security software. It is used to visually manage the logs generated by the application, allowing them to be filtered by various criteria.
Some icons I developed for different parts of this security software.
08. Modals & Extra UI Elements
Sample of some of the modal windows and UI elements I produced for this project.
09. User Testing
Below you can read a list of user comments & feedback we received, in no particular order. I worked closely with the QA team to test and improve the final product.
- Restore connection window – give more information and not just show your attempts.
- Smooth scrolling (improve inertia).
- The keyboard covers the fields you will type in, at least on the first attempt.
- Incompatibility message out of context.
- Unclear typography in some titles and icons.
- Using the back button, the system sometimes drops.
- Double-tap and drag-and-drop zoom does not work (although not all apps allow it).
- Context menu flashes at times.
- Help messages. Unclear or descriptive in some cases.
- Check the wording of the help messages (unify them).
10. Alternative Wireframes
Finally, I’m showing an alternative wireframe version I did during this project.