The leading AIOps platform for Systems, Applications and Products (SAP) operations commissioned my team at Make it Clear to redesign their existing interface from the ground up. After the initial research, we proposed significant updates to the interface structure and functionality, created and tested wireframes for the priority tasks and set creative direction for the future in-house team to work from.

The existing interface organically evolved in response to the changing business priorities over more than two decades of use. Despite offering a world-class SAP monitoring solution, the software had an outdated look, major accessibility flaws, and an extremely steep learning curve. At this point, the client was ready to rethink and rebuild the interface from the ground up.

I was the lead product designer working on all stages of the design process from the initial research and functionality definition through to the solution, usability testing and style guide creation. I also did further consultancy work supporting the client with implementation and delivery.

The research team conducted a series of nine stakeholder interviews and identified a set of priority tasks for each of the four user groups. We noticed that there was little overlap between their preferences and priorities. For example, an enterprise CIO needs a top-level overview of the system’s health and relevant alerts, while an SAP consultant requires a much more in-depth picture with quick access to all system layers, reporting tools and automation capabilities. This divide highlighted the need for a customisable dashboard that can be easily modified to serve the different users’ needs.

Based on the user research findings, we identified twelve priority templates that cover around 80% of the interface. Taking the existing interface as a starting point, I reviewed the findings from the earlier user and competitor research and created functionality specifications for each template.

Once this was approved by the client, I created a set of wireframes and built a low-fidelity prototype for testing. I deliberately chose to test the early wireframes to ensure we validated the proposed changes to the interface structure and functionality before focussing on its appearance.

Wireframe grid for twelve priority templates

I conducted a series of twelve usability testing sessions with users and stakeholders, reported on findings and iterated on the wireframes until the proposed templates satisfied both user and business needs.

Once the structure and functionality for the priority templates were signed off, I worked alongside two other UI designers to create three conceptual directions for the interface design. Avantra selected my concept so I was assigned to lead on subsequent development, including light and dark modes and a basic mobile app design.

Dark and light UI modes for the home dashboard

Due to the scale of the project, my team focussed our efforts on a twenty pages style guide that set principles for how the interface should look and feel. The guide covered the appearance and interactive principles for all core interface elements, such as colour, typography, grid, buttons and links, forms, cards, lists, modals, search, navigation and customisation principles, data visualisation and more.

The in-house team that was assembled after we completed the project used this work as a foundation for further interface development. The first version of the new interface went live in 2021 and the entire interface redesign is due to be complete in the next few years.

Guidelines on the style, layout and interactive principles for buttons and tags

Guidelines on the style, layout and interactive principles for form elements

Guidelines on the style, layout and interactive principles for cards

Guidelines on the search functionality and style

Guidelines on data visualization widgets