Rokt platform redesign



Rokt began a redesign of its entire B2B application with the vision of becoming the next biggest ads management platform, alongside Facebook Ads Manager and Google Ads.

The goal of this particular project was to identify any usability issues with the beta release and determine the critical features to prioritise for the next iteration of the product.
Product Designer
User Research, Interaction, Visual design, Prototyping & Testing

July 2018 - Ongoing


Rokt is a Sydney-based internet marketing company that connects businesses to their customers through the customer buying experience. Learn more about what Rokt does.
I am half the design team at Rokt.
I joined Rokt as a product designer a year ago as one of 2 designers in a company of over 70 engineers and 15 product managers. I support design across every aspect of our business and am responsible for leading UX and UI across key parts of the application side of the platform.
I've grown tremendously in the last year, some key achievements of which I have listed below:

The process

Our process at Rokt is based on the Double Diamond Theory and Lean UX process. We aim to incorporate the key phases of Discovery, Definition, Ideation and Implementation in all of our projects.

Understanding the problem

Before Rokt even hired a product design team, a beta release of the new platform had been implemented based on blue-sky concepts executed by an external consultancy. These mockups were created without any usability testing and had little consideration for the technical and product limitations on the scope of work.
I conducted research interviews with our primary users (account managers) to uncover any pain points that they were experiencing with the beta release.

My research encompassed:

Gathering insights

After collecting the recordings from the user interviews, I conducted affinity mapping with my teammate to synthesise the pains identified. We grouped these problems under common themes and features in the platform.
I relied on a data-driven approach known as the severity framework to inform my process and list usability issues in order of priority. The framework helps to identify the severity score of a usability issue based on the following three variables:
Task criticality x impact x frequency = severity

Prioritisation of issues

I took the extra step of categorising these problems into broader Epics to provide the Product managers and engineers with visibility into the key areas of the platform that needed to be addressed from a usability standpoint. This not only helped to prioritise usability issues in order of need but also helped to shape the product roadmap for the quarter.

Product, Design and Engineering teams came to the conclusion that the first Epic we would prioritise would be the Audience Wizard due to its severity score, UX and engineering effort required to rebuild it.

Narrowing down the scope of work

Based on the user interviews conducted with 7 users on the existing Audience wizard, we found the following key issues:

Wireframing the solution

Based on the above problems identified, I worked towards addressing these pains by coming up with potential solutions:
I quickly mocked up some basic wireframes to gather feedback from Product, Engineering and the users on the overall layout and structure of the wizard form. This involved establishing a standardised visual hierarchy and layout for the future wizard component.

Validating the designs

I conducted usability testing sessions with our primary users to validate whether the new designs would solve their problems. I wrote a script including a scenario asking the user to create a new Audience targeting females of all ages on mobile devices with manual bidding enabled.

During the session, I observed how they interacted with the prototype and set up the Audience. The usability session revealed that it was less arduous to set up a new Audience due to the grouping of related fields. It was easier for the user to identify which forms they had to fill, as advanced settings were now hidden under a collapsable toggle.

Developing the designs

I created my high fidelity mockups in Sketch and then imported them into Invision to allow the engineers to inspect the file and export the HTML and CSS code.

I worked very closely with the Front End team to spec out any missing interactions that were not covered in the high fidelity mockups. I conducted a UX review of each front-end ticket that was implemented to ensure it was aligned with the designs before it went live.

Results and takeaways

Since the implementation of the new rebuild of the Audience Wizard, we have seen a significant decrease in the number of complaints lodged through the service desk. Additionally, I have received positive feedback from users about the simplified configuration of their Audiences, saving them a large proportion of their time.

Some key takeaways from this project are:

More projects