In 2018 Inedo decided to change the way users install and manage Inedo applications. They wanted to create a new tool that users would use to install, update, and otherwise service applications in the Inedo Suite.
My role in this project was to work off of a basic application with no styling, and design the user interface. I also had to design a logo and icons. The goal was for the tool to visually fit seamlessly within the Inedo Suite with a similar look and feel, while also feeling new and modern.
Designing the UI
Designing the Inedo Hub started from a simple un-styled application and a word doc outlining a "demo" of how to work through the application. It included screenshots of the un-styled app, and I was tasked with re-designing each screenshot in a cohesive manner.
Mockups
Breakdown and Spec's
Current Main Screen
I added tabs at the top - using Creative Cloud as inspiration - I thought it would be a good place for links to documentation and tutorials.
For the button colors, the idea is that the button will be grayed out if there isn’t an option to upgrade or repair. Which would notify them of an issue or a new release.
I made the tabbed section for "Installed" and "Available" look like some of the tabs in Inedo's other applications, so that should be in line with the other designs.
The Available section, with the most recent version populating but a drop down is available if they want to select a previous one.
Installing a Product
Displayed when installing a product (or products). In the background it’s running dism to determine Windows features and querying the registry for installed SQL instances. It has typically only taken a few seconds to do this on my machine.
When they click install, or upgrade, the section will highlight gray, and then the other sections will disappear and the highlighted section will move up to the top.
Non-upgrade Install
Shown on a new, non-upgrade install. This is the only information needed to collect before installing, and so it doubles as a summary page. Clicking “Install” will pop open a modal prompting for name & email if registration is not set to “I already have a key.” The registration is performed directly from that dialog so any errors/problems are displayed directly instead of buried in an install log as now. The “Install Inedo SQL Express instance” will use the Inedo SQL instance if it’s already installed, otherwise will install SQL 2016 Express. Selecting the “IIS” radio button without IIS installed will pop open a dialog prompting the user to install those features, and it can do so automatically. Clicking Install will go to the page shown below.
I have "install" grayed out until they select one of everything, I also added the information icon for the SQL Server note, just so it doesn’t take up space unless they need to know.
The green install button since everything has been selected, they can now click install
Designing the Logo
Instead of using Inedo's logo, stakeholders wanted the Inedo Hub to have its own recognizable mark. I was tasked with creating a logo and desktop icons for the application.
Final Logo
The final logo is an extension of Inedo's current logo, but with an addition to the original mark. I also created desktop and application icons that would be readable at a small size by expanding the white space between the shapes:
Process Work
This was the first round of logo exploration for the Inedo Hub:
