KoboToolbox
KoboToolbox is an open-source tool for field data collection developed by the Harvard Humanitarian Initiative. It's used by researchers to help manage data collection analysis efforts during humanitarian crises & emergencies to identify how NGO's should coordinate disaster relief efforts.
Defining Problems
As a team, we conducted multiple user interviews with researchers and key stakeholders. Interviewers went through the whole process from creating a basic form, using specific features like the data table, and using reports to extract data. During this phase, I conducted a heuristic evaluation to identify the underlying UX issues.
Key concerns shaped the foundation of two main problems:
- Information Architecture
- Visual Consistency
Information Architecture
Page 1
- We had two search fields when there were no
technical limitations justifying them. - Consolidating the search fields reduced complexity and confusion.
- When landing on this page the user is left to figure out how to use
KoBo, we needed to integrate some form of onboarding.
- tems in Data dropdown should be displayed instead of hidden.
Page 2
- The option to collapse the side navigation should be available
while in project page in order to reduce clutter. - The two CTA’s Collecting data w/ Web Forms &
Collecting Data w/ Android app look like advertisement.
Visual Consistency
We aimed to make the style of all the icons consistent across the board and also improve the metaphors behind our icons to make icon style consistent across the board.
Record Validation
UNHCR needed a feature within Kobo's existing data table that allowed project owners to assign permissions to other users within their team. Users with this permission could view a data set, edit, and attach a status to the data record in question as a way to ensure the integrity of the data.
UX Challenges
Designing this feature to work around the current structure of the data table wouldn’t allow for this feature to work in a way that would be serviceable to our users. We needed to enable our users to scan, analyze, compare, filter, sort, and manipulate information to derive insights.
Horizontal Scroll
![]()
Horizontal scroll allows us to compare data with multiple identifiers.
Horizontal scroll allows us to compare data with multiple identifiers.
Resizeable Columns
![]()
Resizing columns allows us to see abbreviated data in full.
Resizing columns allows us to see abbreviated data in full.
Hover Actions
![]()
Presenting additional action when on hover reduces visual clutter.
Presenting additional action when on hover reduces visual clutter.
Inline Editing
![]()
Inline editing allows us to change data w/o having to access a details view.
Inline editing allows us to change data w/o having to access a details view.
Solutions
We had to design a better data table. We started with an exploration of usage scenarios, then switched to wireframing and testing the user flows to define critical layouts and interaction patterns.
Prototype
Final Designs
