top of page
MobLab Internship
Survey Web App
Overview
In the summer of 2020, I joined MobLab as a front-end engineering intern. MobLab values experiential learning and dedicates itself to creating interactive games and experiments in education. With the onset of the pandemic, synchronous classes became less feasible, so I focused on transitioning one of MobLab's existing survey feature to an asynchronous capacity.
My Role
Timeline
Toolbox
Front-end engineer, Sketches, User flow, Prototype
May – August 2020
React, HTML+CSS, Dojo, Figma, Marvel
Problem
Prior to the pandemic, most instructors who integrated MobLab into their classrooms could take full advantage of the survey feature: generating online surveys from their dashboard and distributing the survey to students during class. Nevertheless, this feature was limited to a real-time or synchronous context and only MobLab users who were enrolled in a class could take the surveys, which limited the scope of survey data. These limitations posed challenges to instructors who not only want to conduct surveys asynchronously, but also want to collect data from audiences beyond students in the class. In order to meet these demands, we needed a way to make surveys accessible to unenrolled users and users who were not taking classes in real time.
Process
To tackle the problem, I first perused the existing design and structure of the survey feature, making sure that the solution I developed would not stray too far from established standards. I then communicated my vision of a stand-alone survey web application with project manager, UX designers, and other engineers who work on most projects in MobLab and could provide rich feedback as to how closely my ideas align with user expectations. Keeping their feedback in mind, I constructed a user flow diagram that would help guide my work during phases of development and deployment.
User Flow
Solution
My solution has two components. On one hand, I added a widget to the existing instructors' dashboard that allows users to generate and copy a shareable survey link. On the other, I implemented a standalone web app that allows existing MobLab users to take the surveys and new users to register for an account.
Survey-sharing widget on instructor dashboard
Main flow for taking survey
Main flow for new user registration
Interaction Design
While implementing the "Share" widget on the instructor dashboard interface, I not only prioritized maintaining consistency with the existing components, but also integrated new interactions that would make this new feature more instinctive to users.
Tooltip for share function
The word "share" can have a number of different meanings when it appears on a dashboard like this. Rather than having users guess what the exact connotation is, I added a horizontal tooltip that allows users to directly understand the function of "Share" in this context.
Key Takeaways
Consistency is key
While developing my initial ideas for the application's design and hearing feedback from my colleagues, it became increasingly apparent to me that consistency across MobLab's interfaces was one of the most important rules of thumb to abide by. Because the solution I designed was not embedded within the dashboard interface that most students and instructors were accustomed to using, it was all the more important that I aligned elements in the survey app—the tone or vocabulary in system messages and labels, visual behavior of buttons, user flow, etc.—with MobLab's existing styles and standards.
Proactive communication can escalate productivity
This was the first time I took on an internship in a remote capacity. Without the immediacy of being in a physical office, I realized that I needed to reach out more proactively for help and feedback. By communicating timely and regularly with my colleagues, I was a more efficient problem-solver and uncovered issues that I hadn't pinpointed on my own.
bottom of page