Project

(A)

Search Gateway

Search Gateway

Search Gateway

Allows Developers to manage and be notified of the health of the APIs from different projects and providers.

Allows Developers to manage and be notified of the health of the APIs from different projects and providers.

Allows Developers to manage and be notified of the health of the APIs from different projects and providers.

Overview

(B)

Problem

How can we create a more accessible, intuitive, and feature-rich platform that enables developers to monitor enrolment’s health and fix issues?

How can we create a more accessible, intuitive, and feature-rich platform that enables developers to monitor enrolment’s health and fix issues?

How can we create a more accessible, intuitive, and feature-rich platform that enables developers to monitor enrolment’s health and fix issues?

Outcome

Although the design was well received by the developers, the initiative was put on hold on building it due to other projects priorities.

Although the design was well received by the developers, the initiative was put on hold on building it due to other projects priorities.

Although the design was well received by the developers, the initiative was put on hold on building it due to other projects priorities.

Info

(C)

Role

Product Designer

Product Designer

Timeline

3 weeks

3 weeks

Team

Product Owner

Product Owner

Project Manager

Project Manager

Tech Lead

Tech Lead

Full Stack Developers

Full Stack Developers

Tools

Figma

Figma

Miro

Miro

Design Sprint

(D)

I led the research, design process and facilitated workshops with the team.

I led the research, design process and facilitated workshops with the team.

I led the research, design process and facilitated workshops with the team.

This project gave me experience working on a complex platform for developers. I needed to familiarise myself with the platform and all the terminology, processes, and tasks they performed with the software.


As it was a project outside the scope of the squad's backlog, I had to quickly devise a solution to present to Senior stakeholders, who would decide the priority for its development.

01

01

01

Week: 1

My first task was to familiarise myself with the platform. A couple of meetings with a developer helped me start grasping what the software did and how they used it and ran the tasks.


That also helped me to create my research brief and plan, which I conducted with 7 Developers.

02

02

02

Week: 2

In the second week, I shared the insights with the team, and collaboratively, we pinpointed the major challenges. Afterwards, we agreed on a user story and created a user flow to map the main tasks and screens for the platform.


Also, I ran an ideation workshop, where, through a Participatory Design session, I gathered more data on how each developer would approach the challenge. That helped me be more assured of what we wanted to build.

03

03

03

Week: 3

After gathering all the ideation data, I designed a low-fidelity prototype of the first screens and conducted usability testing to evaluate users' expectations and needs.


Once I had collected the feedback, I re-iterated the prototype using a mobile-first approach and tested it with a broader range of developers.

User Research

(E)

User Research Results & Findings

User Research Results & Findings

User Research Results & Findings

I conducted task analysis research to understand the different tasks and steps Developers performed in the current platform. I also asked questions related to their goals and how they used the information within the platform.

100%

100%

100%

of Developers thought that the management of the new and existing enrolments were convoluted

Streamlining the process of managing Projects and Providers would simplify the task and allow for more efficiency when checking their APIs' health and making changes when necessary.

Streamlining the process of managing Projects and Providers would simplify the task and allow for more efficiency when checking their APIs' health and making changes when necessary.

Streamlining the process of managing Projects and Providers would simplify the task and allow for more efficiency when checking their APIs' health and making changes when necessary.

100%

100%

100%

of Developers expressed concerned about not having ways to look into a project’s log or send requests for providers for testing environments.

Ensure developers have access to features that facilitate their work when testing and solving environments' issues.

Ensure developers have access to features that facilitate their work when testing and solving environments' issues.

Ensure developers have access to features that facilitate their work when testing and solving environments' issues.

90%

90%

90%

of Developers mentioned that the layout was confusing, not responsive across both web and app platforms.

Provide a clear information architecture and assume that a responsible platform would allow for an accessible platform.

Provide a clear information architecture and assume that a responsible platform would allow for an accessible platform.

Provide a clear information architecture and assume that a responsible platform would allow for an accessible platform.

Participatory Design

(F)

Low Fidelity Prototype

(G)

Sketching

(H)

Screenshoots #1-3

(I)

Dashboard, Notifications & Portfolio pages

Dashboard, Notifications & Portfolio pages

Dashboard, Notifications & Portfolio pages

This design addresses developers' concerns about the Search Gateway platform and enhances overall usability, ensuring a more intuitive and practical user experience.


The Dashboard offers comprehensive real-time updates and clear overview information of the systems, allowing developers to see system status insights. It includes a streamlined search function for quickly locating existing environments.


The Notifications page consolidates alerts into a single, easy-to-navigate interface to help prevent errors. It assists users in understanding and resolving issues efficiently, and it displays detailed error descriptions and suggested solutions.


Finally, the Portfolio page delivers an at-a-glance view of providers and projects, facilitating quick access to frequently used enrolments, which supports the heuristic of recognition rather than recall by minimising the cognitive load required to retrieve this information.

Screenshoots #4-6

(J)

Provider’s Management page

Provider’s Management page

Provider’s Management page

The Provider's page aimed to deliver detailed information about each environment, including its usage statistics, integrated projects, and error information. It ensures users have immediate access to crucial data and the flexibility to adjust efficiently.


This page also enables direct editing within the Swagger interface, streamlining the process for developers.

Screenshoots #7-9

(K)

Logs Page

Logs Page

Logs Page

The Logs page displays all logs from the Search Gateway platform. It allows users to search for existing queries and apply filters to find specific logs.

Additionally, developers can retrieve requests to an endpoint, viewing the whole request sent from the Flow Engine in both JSON and raw HTML formats. This feature enhances transparency and debugging capabilities.

The Logs page displays all logs from the Search Gateway platform. It allows users to search for existing queries and apply filters to find specific logs.

Additionally, developers can retrieve requests to an endpoint, viewing the whole request sent from the Flow Engine in both JSON and raw HTML formats. This feature enhances transparency and debugging capabilities.

Insights

(L)

Rapid prototyping and testing was crucial for reaching the design decisions and coming up with a 

final design

Rapid prototyping and testing was crucial for reaching the design decisions and coming up with a 

final design

Rapid prototyping and testing was crucial for reaching the design decisions and coming up with a 

final design

The developers received the new platform well. They thought having a web and app version was helpful, although they mentioned that we should rethink what features each version would include.


Also, the new user journey felt more intuitive, and less time was spent searching for issues and understanding their causes.

Lessons Learnt


(L)

01

Project Prioritisation

This project was an initiative outside the scope of the team's backlog, so from the start, we had the assumption that the project could be put on hold at any moment. We struggled to manage the time of some of the team's main stakeholders, which was red-flagged, which could lead to bottlenecks and delayed milestones.

I had to act quickly to deliver a solution to showcase the potential impact and benefit of the improved experience and interface to the developer's work. This approach allowed me to navigate the complexities of the project first to achieve optimal outcomes by focusing on high-impact tasks first.

02

Value of User Research

I initially aimed to maintain feature parity across both platforms, assuming this would ensure a consistent user experience. However, through user testing and feedback, it became evident that users preferred quick, on-the-go interactions such as checking API health status or lines of code on the mobile version while maintaining the comprehensive functionality and more detailed information on the web platform.


Tailoring features to the strengths and context of each platform would improve user satisfaction and engagement and address the distinct behaviours and preferences across platforms. 

Thanks for checking out my portfolio!

Thanks for checking out my portfolio!