cover.png

bridge

A web-based platform that allows UX practitioners to discover HCI academic papers and share direct feedback and related resources with the authors.

Sponsored by frog design 🐸

̌

 

how might we improve knowledge sharing
between HCI academics and UX practitioners?

 
 

timeline

19 weeks
Mar - Aug 2018

 

team

Hy Nguyen
Eclair Junchaya
Ricardo Paz

tools

Sketch
Principle
InDesign
After Effects

involvement highlights

User Interview
Competitive Analysis
Information Architecture
Usability Studies
Video Production
High-fidelity Prototype
Motion Design

 
 

 
 

what is the gap?

We identified the gap as the space that exists between academic research and industry implementation. There have been dedicated fields, in medicine for example, specialized in bridging the gap through translating academic research to practice. However, do we have this for HCI academia to UX design?

 
 
 
“I think it’s a two sided issue. There’s stuff that academic researchers can do and there’s stuff that practitioners can do.”
— Gary Hsieh | Associate Professor - University of Washington
 
 
 

why should we care?

The academic-industry gap prevents the larger human-computer interaction community from exchanging scholarly and practical knowledge and therefore hinders efficient problem solving. Furthermore, enhancing discoverability of the values shared from academic to practice would foster better communication and relationships between the two communities, all of which necessary for idea generation, refinement, and implementation.

 
 
 

introducing bridge

bridge is a human-centered education and discovery website for HCI topics, utilizing the following three pillars:

 

discover

Engaging the readers with research papers and leading academics by showcasing the popular and high-level UX topics on the forefront.

learn

Elevating the human-centered learning experience through summaries and stories behind the academic papers from the authors themselves.

bridge

Starting a dialogue between readers and authors by sharing direct experiences using a feedback and response framework.

 
 
 
 

explore academia through leading papers and academics

By displaying the high-level topics upfront, bridge promotes serendipitous search of the popular topics in industry and academia as a mode of exploration to appeal to users’ genuine curiosity. In each subtopics, users can discover trending papers, recommendations by other academics, and the leading academics that contribute most to our platform.

 
 
 

turn paper into stories

Within each paper, the Expert’s Summary allows academics to explain the reasoning behind their work, and how they envision the impact of their work. Readers can also learn by reading from others’ feedback, experiences, and relevant resources corresponding to the paper itself. By highlighting both perspectives, bridge allows industry and academia to relate, utilize, and learn from one another better.
 

 
 
 

learn from the academics

We integrate personal stories on the public academic profile to help readers learn about academics from a human-first perspective. It also acts as a collection of resources that are important to them, showcasing their favorite research papers from their colleagues, and popular sources recommended by other readers.

 
 
 

share experiences and resources

After reading the paper, readers are encouraged to leave direct feedback and share to the academics what they used the research for, how their understanding of the topic improved, which parts of the paper helped them most, and which parts were unclear to them. These experiences can help academics gauge the impact of their work beyond stats and numbers.

 
 
 

start a conversation

In addition to promoting shared experiences, bridge allows designers to recommend resources and links to emphasize the connection between academia and industry. From their personal profile page, academics can continue the discourse by responding and engaging with the received feedback.

 
 
 

 
 

consulting subject-matter experts

We conducted interviews with 4 HCI academics from University of Washington and Indiana University to understand the current discourse on the gap. Insights from our conversations have provided external validation to our problem space, pushing us to further our research with user interviews.

 
expert.jpeg
 
 

research questions

Informed by our secondary research and expert insights, we pinpointed factors hindering the bridging process, from business goals, to information access. However, most of these factors are beyond the scope of a 6-month capstone, namely jumping through policy hoops, and disrupting decade-old publishing system. Instead, we aimed to find out from our research:

 
 

1. What aspects of academic research do UX designers view as most important in their design process or decisions?
 

2. What are the current frustrations in the process of communication between UX designers and academics in HCI?

 
 
interview.JPG

meeting the users

We conducted remote and in-person research sessions with 12 participants in the UX field to understand how design practitioners value academic research. These practitioners: 

  • Work in design agencies, start-ups or in-house design team

  • Have at least 2 years of work experience (range: 2-25)

  • Hold various job titles in the field: from UX Designer to designer-research

 
 
 

research methods

 

semi-structured interviews

To learn how they use external sources of information in their work environment, and how they might communicate with outside expertise.

directed storytelling

To better understand past & current design process and research methods, and uncover pain points and problems in these interactions and what their attitudes are in relation to the academic world.

cognitive walkthrough

To observe how practitioners react, organize, and extract information from academic papers.

 
 
 

synthetic artifacts

From the stories and anecdotes we collected from expert and user interviews, we then synthesized the experience of potential stakeholders by creating empathy maps and journey maps.

 
 
 

making sense of it all

With all the raw data in hand, we began transcribing, coding, and affinity diagramming. From the sense-making process, we derived the following main insights and principles that would shape the remainder of our capstone.

 

design principles

The insights helped us form the following principles that would guide us in our ideation process

 

Providing guidance and assurance in their search for new knowledge

Insights: 1, 2, 3, 5

Facilitating two-way knowledge sharing and communication

Insights: 2, 4, 6

Translating ambiguous research into specific examples

Insights: 1, 3, 5

 
 
 
 

from 100+ sketches...

With the challenge statement in mind, along with our insights and principles from initial user research, we sketched out a total of 100+ different concepts to tackle the challenge. We then quickly narrowed down to 5 concepts that were most viable, feasible, and desirable.

 
ideation
 
 

...to 1 concept

We created paper prototypes and storyboards to convey our 5 concepts and get started on testing with users. From the received feedback, we narrowed down to one concept that encapsulated bits and pieces of the initial five:

A web-based searching and bookmarking tool that curates visual, academic, and industry sources based on self-defined parameters

IMG_2610.JPG
 
 

we were adding to the problem, not solving it!

From our initial prototype testing, we received major critiques on our concept’s desirability. Participants didn’t want another Google Scholar or Pinterest for academic papers; it only added to the information overload that hindered academic research discovery in the first place without adding any value to the design process.

 
IMG_2995.JPG.jpeg
2 - Inclusive Design Search.jpeg
4 - Here are the top results.jpeg
6 - Board.jpeg
 
Screen Shot 2018-07-26 at 12.27.53 PM.png

going the discovery route

Combing through our transcripts once again, we discovered that our users, despite being puzzled by searching tasks, enjoyed the process of browsing through results and going deeper into each the topics without being prompted.

After going back on the drawing board, we reiterated on our concept to emphasize on discovery instead of searching to appeal to genuine curiosity.

 
 
 

the “secret sauce”

One of our main concerns then became the lack of user retention - how would we keep readers and authors engaged on the platform? From our conversations with both academics and designers, we iteratively built out the overarching feedback framework that acts as the basis of discourse and engagement. The feedback and resource sharing system stemmed from our intention to highlight both perspectives equally, therefore promoting mutual knowledge sharing and collaboration.

 
Screen Shot 2018-09-11 at 4.05.09 PM.png
 
 

experimenting with making academic papers digestible

Popularizing academic papers to a wider audience deemed to be more of a challenge than we anticipated. We couldn’t throw the papers out there and hope for the best. Furthermore, showing the abstracts or some random quotes just did not work as our test participants felt constantly out of context.

After numerous testing sessions, we found out what users were curious about were the stories behind the findings and how the authors got there, in small, simple and personal verbiage.

 
 
“The little bridges can’t be too big, otherwise students can’t cross them; they also can’t be too small, otherwise they’re not motivating.”
— Andrew J. Ko | Program Chair, Informatics - UW iSchool
 
 
slomo.gif
Screen Shot 2018-09-12 at 1.42.48 AM.png

motion design

Inspired by the iOS App Store’s animation, I aimed to convey a sense of delight while informing directionality with bridge’s page transitions. As the user goes deeper into a topic, bridge leaves subtle artifacts of where they came from using a combination of fading out and vertical moving animations. To further emphasize the information architecture on each page, I utilized a slight delay to separate the main metadata from the rest of the contents. For more details, check out our full UI spec below!

 
 

 

future steps

testing for scalability and sustainability

Given the opportunity to further develop bridge, I would seek out to test the platform on a larger scale to examine what kind of responses, if any, would derive from our framework from both academia and industry, therefore refining our questions for the feedback form and the expert’s summary.

considering the other side of the equation

With the current feedback framework, I’m curious to see how it would be beneficial for either side if we instead encourage designers to share their work and stories, and academics to give feedback and suggest related academic papers.

branching out to other fields

In addition to HCI, many other emerging technical fields can benefit from better mutual knowledge sharing and discovery through our platform.

takeaways

the core of human-centered design

Our design journey was riddled with moments where we felt like hitting a wall. However, sticking to data and insights from user research guided us out of the valley of despair. It’s better to know early on that our concept didn’t work and reiterated accordingly, than spending a quarter building an undesirable product.

find the common thread

Involving two primary user groups meant that we needed to find ways to cater to both groups’ needs without overloading our solution. The key was to find the common thread and capitalize on the opportunities it presented.

be ambitious but practical

It’s OK to envision a world where we catalyze the perfect synergy between academia and industry, but practically there’s only so much we could do in 19 weeks! This project has allowed me to be bold, dream big, but also be mindful of real-life constraints.