BP
"SYNAPSE" PROJECT

UX Designer - UI Designer - Logo Designer - Front End Developer

Operating within a high-performing agile team of six, I led delivery across UX, UI, and front-end development, taking full ownership of the end-to-end experience from concept through to implementation.

Working in close partnership with users and senior stakeholders, we delivered a community-driven, visually rich platform that enabled the business to map and understand its application ecosystem at scale. By visualising how individuals interact with and move between systems on a daily basis, the solution exposed inefficiencies, surfaced best practices, and created a shared understanding across global regions.

The outcome was a powerful operational tool that not only improved process visibility but also drove alignment, standardisation, and more informed decision-making across the organisation.

For this project I used:

  • Adobe XD

  • Adobe Illustrator

  • Adobe Photoshop

  • Atom

  • HTML

  • CSS

  • Javascript

  • jQuery

  • NodeJS

  • Microsoft Azure

  • Microsoft Active Directory

CHALLENGE

Teams across geological and scientific functions relied on a fragmented set of tools to process complex data matrices - extracting specific variables, transforming formats, and restructuring datasets for use across multiple applications. These ranged from off-the-shelf solutions to bespoke tools developed internally by the users themselves.

The initial challenge was to map this ecosystem in full: identifying all applications in use, understanding how and why they were used, and uncovering the dependencies and connections between them.

With this foundation established, the focus shifted to designing a dashboard that visualised the entire ecosystem. This enabled clear visibility of data flows and exposed the most efficient pathways for transforming datasets between applications, reducing duplication, improving consistency, and streamlining operational workflows.

SOLUTION

Following an extensive discovery phase, including interviews with both application creators and end users across the business, we developed a clear understanding of how the ecosystem operated in practice. This insight enabled us to define a solution that would simplify navigation, support knowledge sharing, and expose inefficiencies that were costing time and money at scale.

Early concepts explored 3D visualisation; however, these were set aside in favour of a more effective 2D interactive map built using web technologies, prioritising usability, performance, and accessibility.

I led the interface design and developed the front-end solution, creating an interactive environment where users could freely manipulate elements, explore application relationships, and trace data flows across the ecosystem. The result was a practical, user-driven tool that improved visibility, streamlined workflows, and supported more efficient decision-making.

UX CONSULTANT

Working in close collaboration with UX, we led interviews and workshops with users and stakeholders to define the product direction and align on core requirements.

Wireframes were used to establish structure and functionality, while mood boards set the visual direction. These outputs were synthesised into a clear foundation, enabling the project to move into delivery with shared understanding and design intent.

UI DESIGNER

For this project, I was given the freedom to move beyond established brand constraints and explore a more progressive visual direction. The goal was to create an experience that felt both intuitive and distinctly different from anything previously delivered within BP.

Through multiple iterations and concept explorations, I developed and presented several design directions to a panel of users and stakeholders. The chosen approach centred on an organic visual language - featuring fluid lines and soft, circular forms—designed to create a more engaging and approachable interface while maintaining clarity and usability.

BRAND SPECIALIST

Developed multiple logo concepts, each grounded in a distinct visual direction and strategic rationale aligned to the product. Presented a curated set of options to stakeholders, articulating the thinking behind each to support informed selection and final sign-off.

FRONT END DEVELOPER

Following UI sign-off, I defined the front-end architecture, evaluating multiple approaches before selecting a lightweight HTML, CSS, and JavaScript stack with jQuery for rapid prototyping, with a planned migration to Vue.js within a Node.js/Express application.

I translated the UX and UI into a cross-browser web application, wrapped in Node/Express to support scalability and integration. In parallel, I worked closely with backend developers, shaping API design, JSON structures, and endpoint definitions to ensure alignment with front-end requirements.

The application consumes data via AJAX, with both the front end and API deployed on Microsoft Azure, delivering a responsive and scalable solution.