The Challenge

Our client Steve is an entrepreneur with a background in Molecular Biology and Biochemistry. He felt currently academic research lacks visibility to the public, which has become a barrier for collaborations, be it between researchers, or between researchers and industry partners. He wanted to create a transparent, inclusive platform to fill such a gap. So:

We were challenged with building an online platform named StormBrain to foster research collaboration.

Client’s Vision

Steve envisioned StormBrain to be transparent, inclusive, and accessible. Unlike ResearchGate (an existing product that is closest to Steve’s idea), which requires signup using an institution email, StormBrain allows anyone to browse it without signing up, free. He also wanted StormBrain to provide personalized collaboration matches for researchers.

The Design Team

Our team consists of three UX designers–Joseph, McKenzie, and Ying (myself); as well as Robert, our instructor and coach.

The Research

We conducted user research and comparative/competitive analysis to drive our research phase. We were aware of two potential user groups:

• Researchers working in both academia and industry.
• Non-researchers who work as partners with researchers, in both academia and industry (such as program coordinators and sponsors).

Researchers are obviously a major user group of StormBrain. It was also the user group we had the most access to. Considering the time constraint, we chose to focus our design on researchers for the initial version.

User Interviews

We interviewed seven researchers, currently working in either academia or industry. We asked questions such as how they found their collaborators, their biggest obstacle to finding collaborators, and their criteria for choosing a suitable collaborator. We then used affinity diagram to extract insights from the interview data.

Note: We also interviewed four coordinators tied with Learning Disabilities Association Canada, as introduced by Steve. These interviews gave us some initial idea about the non-researcher user group. However, considering the number and homogeneous background of the partner participants, our understanding was quite limited and unavoidably biased. There was still a knowledge gap to fill before we were able to design confidently for the secondary user group.

User Interview Key Insights

We distilled the following themes from the affinity diagram.

Comparative/Competitive Analysis

To inform our design, we analyzed the user experience of a few existing professional networking and dating apps. We mainly looked at three products— LinkedIn, OkCupid, and ResearchGate. We identified the following features we considered helpful and clever for networking/connection apps .

• People you may know (LinkedIn and ResearchGate). Provide users with suggestions about who to connect with.
• Degree of connection (LinkedIn). For people who users are not connected with directly yet, show degree of connection (how to reach out to those people through existing connections)
• Matches (OKCupid). Provide matches based on users’ filtering criteria and matching algorithm. Users can either quickly check out the shortlisted “Quick Matches” or use “Browse Matches” to do a more extensive search.
• Well-designed onboarding/prompts (all of them). Provide prompts to engage and motivate users to complete their profiles and keep profiles updated, so that more accurate and personalized suggestions can be provided. This is an example of “seductive interaction design” (Anderson, 2011).

The Users

We developed personas based on the user research findings–a primary persona of researcher Richard, and a secondary persona of coordinator Judy (the secondary persona was only a starting point due to the information gap).

The New Pathway

With Richard’s goal and frustration in mind, we thought about how we could make his pathway of connecting to a potential collaborator easier and faster. Our client Steve wanted StormBrain to focus on people rather than publications. Also, a researcher we interviewed commented she was happy with using ResearchGate to check out publications and would not consider switching. What would draw her to StormBrain was being able to quickly check out people and find collaborators.

Instead of letting researchers start from digging into research work, we want StormBrain to provide them with a different and hopefully better approach–starting from people.

The new pathway provides multiple access points:

• Users can start by checking out the Top People Matches or Top Project Matches on the Home page.
• They can start from Browse People. They will be shown all the potential collaborators for the users. Users can refine results using different filters.
• They can also start from the traditional access point — publications.

All these access points will eventually take users to the profiles of potential matches. If users feel positive enough after viewing a profile, they can reach out to the potential match through the contact information provided.

In addition, to support researchers better network at events especially conferences, users can look up events on StormBrain and find out who are going.

The Site Structure

The “people-first” and “people-centred” concepts guided us to design the browse structure of StormBrain.

From the site map, we identified the MVP screens that we would include in the initial version:

• Home screens (before and after signing in)
• Browse People screen
• Profile screens (including the persona Richard’s profile in Editor mode, another researcher’s profile, and a professor/lab profile)
• Event screen

Sketch and Design

We used the Design Studio technique to kick off the design stage. We sketched screens separately in 10-min sprints. After each sprint, we compared notes and merged the best parts from each designer into the next version.

We also decided to try the Mobile First approach in this project. So we started sketching and paper prototyping for the mobile version, and then started designing the desktop version screens when we moved to digital prototypes.

Testing and Iteration

We conducted usability testing with four participants–two of them with paper prototypes and another two using digital wireframes (all with the mobile version due to the timeline). The later two participants were researchers we interviewed earlier.

The testing highlighted the following issues.

Browse Matches

We observed that our participants only checked the “Top People Matches” on the Home screen when asked to find a collaborator. They did NOT click “See My Collaboration Matches” (which would take them to the Browse Matches page) at the top of the Home screen at all.

When asked why after the test, participants said they were not sure if “See My Collaboration Matches” and “Top People Matches” were the same thing. One participant also commented the wording of “See My Collaboration Matches” sounded like Google’s “I am feeling lucky”.

We made two changes accordingly (see below): 1) Added the “See More Matches” link to the end of “Top People Matches”, which will direct users to the Browse People screen. This link would help users understand the connection between the two functions and guide their flow. 2) Reworded “See My Collaboration Matches” to “Browse People”.

Important Context Information

When checking out a potential match’s profile, our participants commented they wanted to know how active the person was on StormBrain (obviously it is more promising to contact users who are relatively active). We added active status accordingly (see below).

Our participants also wanted to know how StormBrain works, e.g., how the matches are generated, and how the user profiles are populated (automatically generated by pulling data from somewhere or manually filled). Accordingly, we included some context information on the Home screen (before signing up/in).

These feedback well reflects the intellectual and inquisitive qualities of the researcher user group. By providing the user group with the context information, we would give them the needed reassurance and thus potentially increase conversion. Although we have made some initial changes, more could be done (such as a dedicated onboarding flow) in future iterations.

Initial Branding Touch

Branding was not required for this project, as we didn’t work with UI design students this time and were asked to focus on creating the app skeleton–wireframes instead. However, we felt the app would benefit from some branding touch even at the wireframe stage. We completed a design inception sheet together. From there, we came up with some preliminary branding elements, including the StormBrain logo.

The Prototype

We developed two versions of prototypes. The desktop version demonstrates the primary persona–researcher Richard looking for a researcher collaborator. He starts with suggested matches and continues to search people by research interests. He finds a good match and reaches out following the contact information.

The mobile version shows the secondary persona–coordinator Judy searching for a professor who conducts genetic research. StormBrain allows her to search without signing up.

Desktop Version

Mobile Version

Recap

The prototype of StormBrain features the following:

• providing users with multiple paths (promoting people first and people centred approach) to find a potential collaborator.
• supporting users to quickly get adequate information about potential collaborators from their StormBrain profiles.
• Supporting users to prepare for networking at conferences in advance.

Future Work

• Further streamline researchers’ pathway of finding collaborators, through more iterations and testing.
• Further refine the information and visual hierarchy of the wireframes.
• Explore how to support users to quickly gain insight into researchers’ publication record, e.g., through a co-authorship visualization.
• Design an onboarding experience to better support users.
• Flesh out the matching design, after our client figures out the backend matching algorithm.

Thanks for reading! You are more than welcome to share your thoughts by leaving a comment. :-)