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.
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.
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.
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.
Use progress bars for complex tasks to visually indicate when a task is incomplete, and thus increase the likelihood it will be completed.
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.
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.
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.