Port80 Secure Dock

Responsibilities

  • UX & UI Design
  • User Interaction Flow
  • XHTML, CSS & Javascript
  • JavaServer Faces (JSF)
  • Facelets Templating

Port80 Secure Dock is a product focused to Port80 Connected Technology customers and their employees, and users of Hubtill. It allows the exchange of sensitive files in a secure way.

After receiving a specification document with the functional features that the application should cover, the discovery phase was triggered. My first step was creating an user journey map to identify how users would interact with the product to reach their goals, and the different scenarios that may arise (error, success or blank states).

From a design point of view, the main challenges for me where the following:

  • Create a reliable enterprise design.
  • Design a product quick and easy to familiarize with.

The first challenge was accomplished through a clean interface with minimal distractions, displaying only relevant information and organising it in a clear disposition. My aim for the second challenge was to create a pleasant onboarding experience through a quick guide in the empty state version of the app.

Desktop upload
Desktop request access page: success state.
Desktop upload
Desktop reset password page: error state.
Mobile Loging
Mobile user management page.
Mobile Registration
Mobile login page: error state.
Mobile Upload
Mobile forgot password page: success state.
Desktop upload
Desktop files page: empty state.
Desktop upload
Desktop URLs page: empty state.
Desktop upload
Desktop new URL page with required field.
Desktop upload
Desktop summary page.
Desktop upload
Desktop users page with first user highlighted on mouse hover.
Desktop upload
Desktop URLs page.
Desktop upload
Desktop files page with delete confirmation dialog expanded.
Desktop upload
Desktop settings page with change password option on error state.
Desktop upload
Desktop upload page with error state (invalid file) and dragging state.
Mobile Loging
Mobile menu expanded.
Mobile Registration
Mobile summary page (stacked column chart).
Mobile Upload
Mobile summary page (donut chart).
Mobile Loging
Mobile users page.
Mobile Registration
Mobile URLs page.
Mobile Upload
Mobile new URL page: empty state.
Mobile Loging
Mobile files page.
Mobile Registration
Mobile settings page: error state.
Mobile Upload
Mobile upload page: error state.