Loading... :)

Loading... :)

Project  03 / 03

Year

2019

Client

Milestone
Systems

Tools

Sketch,
Zeplin, Invision

Role

UI Designer

XProtect Installer

The main task of this project was to refresh UI of the existing Installer for the main product XProtect. This includes being up to date with visual trends while being aligned with the Milestone Systems brand. Unfortunately, I was not assigned to improve the UX or the interaction part of this project.

Part of this project was also doing competitor's research and research of Installers in general.

The reason for this UI refresh was because the current installer has a very generic looking and outdated UI. At the beginning of the project, I was handed in a design brief written by my manager that included all the requirements and deliverables with a deadline.

Project Background

The installer framework currently enables users to install and repair the entire XProtect Video Management System as well as additional stand-alone applications and plugins.

Milestone aims to provide an easy to deploy method of installing VMS applications, tools, plugins and databases.

Old Installer

Project Requirements

  • Designing for accessibility and inclusiveness.
  • Theming for OEM partners.
  • Trends in Dark vs. Light.
  • Milestone Branding.
  • Simplification of UI.
  • Deadline - 4weeks (8 working days).

Design Goals

  • Logical and consistent grid layout.
  • Optimize the size of the installer application to the best size for the content.
  • Simply flexible design system where a few key elements can be edited in order to create OEM version for our partners.
  • Fill the white space in empty screens.

Constrains

  • This is not a major redesign of the interaction or the flow. Obvious improvements on a screen by screen basis may be explored.
  • The installer should not support theming by the end user.
  • The installer will use WPF to develop the interface, which can be considered to have similar rendering ability as html/css.

Deliverables

  • Light-weight UX research.
  • Examples of other good installer experiences out in the world.
  • 2-3 design concept’s that llustrate potential design directions.
  • Zeplin deliverables with clickthrough prototype in Invision of the final version.
  • Small design system.

Process

The first step in my process was competitor's research, other installers out there and also lightweight UX research. I decided to focus on 2 most relevant UX laws for this project.

In the process of the competitor's research I quickly realized there is not much of a competition when it comes to beautiful looking installers within the VMS field, all of them looked very generic.

Since I couldn't find much of inspiration from competitors within VMS I decided to move on to Installers in general. One of the best looking I found was Avast Installer on windows where the dark theme is used as the main theme. Later I move on to Dribbble where I found a couple of interesting concepts and in the end, I looked up some articles on Medium and best practice within wizards.


Takeaway:
Chunking is an effective method of presenting groups of content in a manageable way. Organize content in groups of 5-9 items at a time.


Takeaway:
Use progress bars for complex tasks to visually indicate when a task is incomplete, and thus increase the likelihood it will be completed.

Concepts

Design Process

After my light-weight research, I jumped into creating the new UI. Because we kept the same structure from the old installer, no low-fidelity wireframes or sketches were needed in this case.

I took the most "complex" or unique screens from the old Installer and start creating new concepts. I decided to go with fixed windows size (752 x 680) as most installers have. Every component is aligned on to custom made grid.

The initial goal was to make 2 or 3 concepts, I ended up with 7. After each feedback session I had with my team (twice a week), I came up with some improvements and therefore made another concept.

Key Research Takeaways

  • Display a progress bar or a stepper so user knows how many steps are left and where the user currently is.
  • Always provide button to go step back.
  • Narrow down steps by adding more actions on one screen.
  • Don't add unnecessary menus or actions outside of the installer.
  • Simplification of UI.
  • Always Include Title for each screen or even a short description so it's clear what actions are you taking on each screen.

Final Designs

Road Blocks

There were a lot of discussions and concepts when it comes to progress bar which was very prominent in the beginning, at the end we decided to make the progress bar very minimalistic.

One of the issues was also making the installer UI with only 3 colors so it's easy to rebrand for our partners (OEM) therefore I was working a lot with opacity to create different color shades and states for interactive components.

Solution

At the end, the deadline was extended from 4weeks to 6weeks (12 working days) because of endless feedback loops and making things pixel perfect. Personally I wish I could make it completely from scratch but that was not the point of this project, unfortunately.

When it comes to the final UI all the requirements and deliverables were met. The installer is on-brand, easy to OEM and has its small design system.
At the end of the project, I presented the new look of the installer to the product owner.

Prev Project
Home Page
contact@lukasjurcik.com