What is Transformd?

Transformd is a product built for businesses who want to put their customers first. It is a digital tool that allows you to create personalised customer experiences that are able to connect securely into a companies existing digital infrastructure. Unlike traditional methods, Transformd enables anyone to be able to deliver efficient and connected experiences in a fraction of the time. Though the platform itself is incredibly powerful and robust, what it lacked was an intuitive user experience. Due to the complex nature of what the product can produce, the platform itself was laced with technicalities beyond the capability of the average user. In addition, over time the remit of features outgrew the original platform architecture, resulting in a complex navigational structure – amongst many other usability issues.

The Problem The Transformd Builder is where the majority of work happens to literally build out an experience (formerly; forms) on the Transformd Platform. It helps to build the foundational structure that can be later built upon using additional platform features such as automations and assets (formerly; documents and email templates) to construct a user experience. The following is a part breakdown of the platform in its original form, some of the usability issues, challenges and examples screens showcasing the redesign. For a comprehensive case study and project breakdown, get in touch.

To begin the redesign I had to first look at the platform as a whole and completely reset the foundations, starting with an upgrade to Bootstrap 4.1. – https://getbootstrap.com/. In order to maximise realestate and allow for a large building area, I designed the platform to be fluid(vs. fixed width) meaning that the contents of a page will span the entire width of your viewport, rather than just a specified fixed width. Utilising as much screen real estate as possible meant that I was able to create an optimal user experience.

At Transformd, we conform to 4 x responsive breakpoints based on device usage and popularity in the market. Our breakpoints therefore, are as follows: 1420px – Desktop HD, 1200px – Desktop, 766px – Tablet and 576px – Mobile. Accompanying each of these breakpoints is a grid system that allows each viewport to comfortably (and mathematically) respond as required. Though the number of columns per breakpoint may vary, what remains consistent is the 30px gutters that pad out each column. For a better understanding, see visual grid references below.

Once the foundations were laid, it was time to address some of the platforms’ biggest pain points – starting with navigation. It was apparent that the navigation and its confusing structure distilled the users confidence in their ability to manoeuvre the product comfortably. During research. users mentioned that “the navigation was not friendly at all to use” and that it “takes a bit of clicking around to end up where you want to go”. There were also comments suggesting that the grouping and hierarchy of menu items was illogical and sometimes actions (in our case, clicks) would cause unexpected outcomes. Other comments suggested that items of frequent use (i.e. actions – later renamed to ‘automations’) were nested within the navigational structure instead of being easily accessible.

Not only is the legacy navigation confusing and somewhat disjointed to the page the user is currently interacting with, but it also takes up much needed real estate that is beneficial to the more robust parts of the platform – see legacy navigation and the redesign explained below.

The Redesign

The focus for the redesign of the Builder was simple – make the builder the hub of the platform. In addition, I wanted to consolidate the process without limiting users to conform to a specific build manner. Proven through numerous research rounds was the fact that the build process could take any shape depending on the way the user would approach the task. For example: certain users might build out all ten pages before adding details, whilst other users might work on completing entire pages at once before moving onto the next one.

Below is a breakdown of how the redesign allows for flexibility and enables choice – all the while, providing an opportunity for the user to be guided if that is what they desire.