When I joined the team, Bosh was a first pass prototype. We did a complete overhaul of the whole system and added in 20 new micro-services. One of the tasks was to do a refresh to the look and feel of the application.

Below is the standard SAP layout for a launch pad.

My task was to design a new layout for the BoSh ‘minimal viable product’ using the majority of the infrastructure of the SAP standard layout. So the goals of the redesign were:

• A completely new look
• Easier to navigate
• Leverage our machine learning capabilities
• Reflect the excitement around new products

When exploring different layout options I decided to take a step back from the UI itself and begin with an exploration of simple shapes. Geometric shapes are aesthetically pleasing, symmetrical balance strikes a cord in us; so I want to utilise that. 

I combined with the the removal of the curved corners that we had on the current tiles. We now have a more aggressive, sharp and edgy design which takes us away for the safe corporate SAP look and feel.

I wanted to declutter the UI as much as possible as we wanted to add a ton of new features into it.
Therefore I combined a number of similar pages into bundles ‘groups’ of closely associated functions to drastically reduce the number of tiles, thus lessening the cognitive load and mental processing required to find the desired information/section. 

Another part of the functionality that I removed in my later design was the use of the ‘menu’ bar spanning across the top and associated headings. When clicking the menu items the page would scroll down slightly bringing that section to the top. However, as the page had so few items (all of which are visible upon landing) I felt that this feature was not worth the space that it took up. By removing this functionality I again had more real estate on the page to work with and less items to digest and understand. 

As we had five sections I wanted to use colour as the differentiator as opposed to text as I felt this could be implicitly understood after a short learning period and reduced the overall amount of text on the page. But picking 5 colours that can work next to each other in any order, without 
clashing was very challenging. 

Accessibility played a large part in the choice of colours. It is absolutely crucial to a successful user interface to be fully inclusive. I ran the chosen colour pallets through scanning software to make sure it was compliant.

To determine the success of the colours I visually combined them in an array of arrangements to explore the relationship they had with on another- the goal of which was to test that they did indeed work no matter what the organisation or sequence they were presented in. Below are two examples of colour pallets that worked and a business decision was made to select the option on the right. I do feel that the option of the left is more visually appealing in this mixed-up grid layout, but once placed in the design the option on the right worked well and had greater contrast between the colours. 

Below is the final design

• I continued the aesthetically pleasing geometric look by adding a bit of code that forms a square out of the square tiles as opposed to the irregular row length in the original design
• The section titles were removed and the tiles are colour coded as a differentiator based on the type of task
• Icon sizes were changed to reduced visual clutter to improve scalability
• The extra space allows more room for the chat bot to pop up into and the news articles to slide out without hiding the tiles
• The tiles are sharp and edgy looking
• The colour palette is loud, bold and accessible. No corporate look here!

  

The layout can accommodate a tile pattern of five row before encroaching into the area where the chatbot and news articles now sit when selected/opened.

This design shows the new space given for the chatbot.

The news articles have been given a much larger platform once opened as they we currently lost in a small tile.
The text was going over the image and the whole message became convoluted.
Now the images can be much larger and clearer so details are not lost. There is space for long detailed articles and links to further information as opposed to just a short tagline that was previously presented. A search has been added to help the user find the relevant story.