LINCS Rich Prospect Browser
I led the design to improve various aspects of the early stage LINCS Rich Prospect Browser (RPB) interface. This web app lets users explore LINCS data through a unique visual 2.5D format. As the sole designer on this project, I addressed usability issues and introduced features to support users’ browsing experience.
Context
LINCS is a grant-funded interdisciplinary project creating linked data tools that enable researchers to create and share cultural data.
Rich Prospect Browsing is a conceptual framework for designing digital cultural collections that represent every item in a collection as part of their default interface. LINCS adopted this framework by presenting all LINCS categories in an infinitely zoomable interface where users can access LINCS data, which includes cultural information about authors, artists, and more.
Nodes represent filter categories, spread across the page navigable by drag. When a user zooms a node, users can facet underlying results by the selected category. After zooming, users can continue faceting categories until they reach their selected categories’ associated results.
When I joined this project, a live prototype had been created. I was tasked with finding existing pain points and improving the aesthetics of the interface. This project was a collaboration between Texas A&M University and LINCS.
My impact
Uncovered pain points of a proof-of-concept through usability tests.
Led a workshop to brainstorm and prioritize solutions.
Designed two major features to improve user orientation.
Initiating the project
To start with this project, I held multiple stakeholder meetings with developers at Texas A&M and managers at LINCS to determine goals for RPB. With a LINCS release scheduled for August and an existing prototype, we wanted to know how to improve the interface’s usability. In addition, the developers had several features outlined for the future and wanted input on their implementation.
As such, I determined that the best course of action was to run a usability study to discover pain points. From there, we determine solutions and map out development priorities.
Research
Before running the usability test, I conducted a usability analysis of the interface myself. Looking at existing literature about Rich Prospect Browsers, a study by Morse (2019) on three browsers found that they lacked coherence in visual organization. On top of that, the study illustrated coherence as particularly important for rich-prospect design.
From these findings, I reviewed the existing prototype, finding a similar coherence issue. When selecting a node, I found that it was difficult to recall my location within the space, and as a result, I couldn’t remember what nodes I had clicked through.
Therefore, a significant pain point I discovered was orientation.
To confirm my analysis, I conducted a think-aloud test with three users, asking them to complete tasks related to information seeking within the prototype. I found that:
Users had difficulty locating themselves as they interacted through the space.
A lack of orientation caused interaction slips and misclicks
Users had difficulty finding specific categories.
Due to the untraditional mode of navigation, large space, and varying sizes of nodes, participants had difficulty finding smaller nodes. Some participants erroneously used the search bar to find nodes.
Based on these findings, I created a list of general recommendations. In summary, these recommendations were to:
Provide system status of user location
Provide better information grouping or system guidance for finding categories
Running a workshop
After disseminating my findings and recommendations across the team, I led a workshop session with the entire team to brainstorm solutions. We voted on solutions and plotted them on an impact-feasibility matrix.
As a result of this workshop, we settled on the following solutions:
A status widget indicating a user’s current location
Make the system status visible by indicating which node a user is in and what active filters they have applied
Multifunctional search bar
Users opted to query the search bar to find categories, however, the search bar only queried the titles of individual LINCS results, not categories. We can support users' preferred behaviours by adding this new feature to the search.
Designs
From these prioritizing findings, I created sketches of each solution. Collaborating with developers, I first iterated on the status widget. To aid my process, I based my colours on the Material 3.0 colour system.
From these iterations, we settled on this final widget design:
From there, I created a new search bar incorporating multi-search functionality, enabling users to search for individual results and navigate to categories.
Quick wins
With these completed, I found time to add some quick-wins as well. A visual element I added to support user orientation was to colour-code the background layers. Inspired by the TV show “The Expanse,” I found it interesting to interpret the nodes as ‘Rings’ (i.e. gates or wormholes).
A space opens as a node is selected, displaying a deeper network underneath. As users click through more nodes, the background layer gets darker and darker, indicating their current level.
Conclusion
This project was very fun, as the unique rich-prospect aspect of the interface brought about interesting problems and solutions. Working with the developers, I learned a lot about how the library worked and learned how to build my designs around it. I'm also glad I got the opportunity to run a workshop session, as we were able to get perspectives from all members of the team, and allowed us to allowing our thinking.