The New Design With Version 2.2

The latest version of Updraft does not only come with new functionalities and improvements (check them out in our previous Blog), but also with quite a few design changes. While version 1.0 of Updraft was mainly designed to build and distribute new app versions via git, Updraft from version 2.0 onwards is now mainly used for distribution only. This realignment of the core function automatically required a new visual appearance. We became aware of this after we had already released the 2.0 and 2.1 versions. Too many elements of Updraft 1.0 had sneaked into the new versions. We felt the need to clean up radically. Our biggest update yet offered the perfect opportunity to make a few improvements in design and thus also in user experience.

In this blog post we explain what our thoughts behind the major design changes were and how we solved some of the pain points.

 

The new panel design

Updraft focuses on one build at a time. What the user is interested in besides all the app details can be illustrated with two questions:

1. How and where is the build stored/localized? (How can I retrieve it?)

2. What can I do with the build? (Context)

In addition to the classic app view, a clear navigation for every existing project (app list) and an area dedicated to the functions (menu) were required. We wanted to place these two on the left side. The app list should overlay the menu if the user wants to jump to another project. On the right side we wanted to create a context area. It dynamically adapts to the selected elements in the app view. It contains information about builds, user groups or user feedback.

 

The biggest pain points and how we solved them

In order to be able to work efficiently, the switch between app projects should be simple and fast. In the previous version this was possible via the search bar "App Overview". The problem: This search function was either not found by the users or not expected for switching between app projects. 

In our opinion this was due to an unclear icon as well as the unexpected placement, centered in the header. Therefore we changed this: The search function now has a magnifying glass icon and an improved placement in the upper left corner so that users can find it more easily. 

An everlasting paint point for us was the change between the two platforms iOS and Android. The duality between iOS and Android was not visible enough. From a technical point of view, we had to overcome some hurdles to solve this problem. From a UI/UX point of view, the question arose when and where we wanted to offer the user the opportunity to change between platforms. Do the different platforms have to be queried during the app search? Or is the possibility to change platforms only given in the app detail? 

Our solution is a mix. In the App Search the user already sees which platform is available. The change however can only be made in the detail view, via dropdown in the header area. 

Another ambiguity was the difference between the 3 dot icon and the pen icon. Both are options to change something in an app project. Users can edit projects, update or download versions, add a new environment and view user feedback. For a majority of Updraft users, it was not obvious for which of these functions they had to choose which icon (3 dots or pen icon). The 3 dot icon was often overlooked because only the pen icon was listed as an edit function next to the project title. 

Now, all app editing functions can be found in the menu item "Project Settings". Instead of unclear icons we now use text to describe the functions.

 

What remains the same 

Basically everything functional from the previous version (2.1) was maintained. Since Updraft always had a very specific and reduced range of functions, we didn't want any reduction of those functions. Most likely, a reduction would also have resulted in annoyed existing users. That’s why we actually even extended the functional offering. Thereby we focused on the user interface and the user experience. 

 

We hope you enjoy the new designs we implemented in the latest Updraft version! As always - if you come across any bugs or have any other issue, reach out via info@getupdraft.com or twitter. We are happy to get as much feedback from our users as possible to continuously improve our platform.