Se lee en 4 minutos

The Challenge

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.  

My Role

I lead the UX Design and contributed in a number of areas such as ideation, business goals (KPIs), benchmarking, research, user journey & experience map design, wireframe development, wireflows, information architecture, UX writing, prototyping, final design, responsive layout (HTML, CSS/Sass, Bootstrap, etc.), Style guides, UI Kit, guerrilla and user testing.

Results

The handling and configuration of this software, despite its intrinsic complexity, significantly improved its ease of use and consistency throughout the tool. 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 and branding.

The process

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 at least for 3 hours a day, that’s why we decided to add the light and dark theme 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 were also 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 we 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. Iconography

Some icons I developed for different parts of this security software.

06. Modals & extra UI elements

Sample of some of the modal windows and user interface elements I produced for this project.

07. User testing

Below you can read a list of user comments, in no particular order. I worked closely with the quality control team to ensure the quality of the entire product.

  • Restore connection window – give more information and not just show your attempts.
  • Certificates don’t work on Android.
  • Smooth scrolling (improve inertia).
  • Obvious loss of quality at 90% in images. Especially in (Android).
  • Pixel ratio failure (iOS).
  • The numeric or alphanumeric keypad does not come out when it should in some cases.
  • The keyboard covers the fields you will type in, at least on the first attempt.
  • Keyboard Lag on iOS.
  • The keys do not always works.
  • Incompatibility message out of context.
  • The page is displayed with default zoom.
  • Error when downloading PDF.
  • iPhone does not open Excel file.
  • Does not connect to Apple Store via link.
  • From time to time, he pulls out of the navigation to Google.
  • Video playback does not work.
  • Sound is choppy and of low quality.
  • Video fails repeatedly after approximately 3 seconds of playback.
  • Unclear typography in some titles and icons.
  • Using the back button, the system sometimes drops.
  • Sometimes it does not open new tab.
  • Double-tap and drag-and-drop zoom does not work (although not all apps allow it).
  • Context menu flashes at times.
  • When refreshing the tab with the PDF loaded it fails.
  • Help messages. Unclear or descriptive in some cases.
  • Check the wording of the help messages (unify them).
  • After finishing the wizard, add a message (only the first time) type “Configuration correct”.
  • Mark more the “CONFIGURED” status on the screen after the installation.

08. Alternative wireframes

Finally, I’m showing another alternative wireframe version I did during this project.

Suscríbete a tonalidad.es