Developer Community
Lead UI / Interaction designer

As a part of the team of 2 UX designers and a UI designer, my role was to explore and create concept visual experience for the developer community site. They needed on-brand, responsive experience for their developers’ thriving API communities as well as extending their pattern library to the content-rich site.

Refinitiv, formerly the Financial & Risk division of Thomson Reuters, is a global provider of financial markets data and infrastructure. Their data powers very popular & powerful FX monitoring and analyzing tools such as Eikon. The Refinitiv developer community site is where developers can learn how to work with the financial data used for the Eikon data platform, ask questions and discuss ideas with the experts and community. Here, the developers can learn about variety of API tools to be more effective when developing with Refinitiv APIs.

Concept visual data graphs

These concept data graphics were created to show the API service usage on the dashboard. We wanted to give some life to the usage data, so their existing customers can manage and leverage the product usage in more engaging way.

Creating the new navigation design to support the content-rich site

The design we created consisted of existing components from the design pattern library and the new side-navigation component. This new navigation design was the crucial part of the project I worked on as it needed support various user behaviours.

From the user testing, we were able to gain valuable UX insights utilising mid to high fidelity prototypes using Invision and responsive design with HTML/CSS.

The UX

Insightful findings from the User Testing on the navigation

  • The participants thought that Recently Viewed and the Update information on logged-in homepage were helpful. 2 of 3 participants who saw the updates said they would find them useful.

  • Recommendation: More consideration is required for Your Updates. Is it information that a user would need to know before they come to the portal?

Wire_hero_04
  • It was pointed out that there is the potential for participants to get lost when using the menu anchors.

  • Recommendation: Consider adding a symbol to anchor menu items to show they have a different role. Show a scrolling animation when an anchor is selected.

Wire_nav_anchor_01

We found that there was no uniformity in the pathways that participants looked to discover API content.

  • Quick Coders looked in various tabs and sections to find code examples to grab. Investigators looking for the full picture but wanting to do it quickly might start in Tutorials or Documentation, then jump to Quick Start and then back.

  • One preferred to read all documentation at the start. Others break off reading the Tutorial and try the code before returning to read the next step. Three particularly explained that that they appreciated being able to move around content in a browser.

Navigation layout

The proposed Side Navigation interaction

Side Nav interaction
  • Mobile nav interaction
  • Desktop nav interaction

Side Navigation in responsive layout

Responsive layout

Pattern Library

Colors

  • RefBlue
  • RefDBlue
  • RefDDBlue
  • RefOrg
  • RefPupl
  • RefTeal

Typography

Buttons

RefDev_Buttons

Forms

RefDev_Forms

Column grids

Responsive grid

Next case study