︎ HOME 

Pedro Bare


Interaction Designer


WORK
   
RESUME
︎ My Resume

CONTACT 
︎ pedrobbare@gmail.com

WEB DESIGN

KoboToolbox

Interaction design / UX/UI Design 

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.
Resizeable Columns


Resizing columns allows us to see abbreviated data in full.
Hover Actions

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.

UX 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




TEAM

Emily K. Ferguson: Senior Product Manager

Southisack Johhny Kounlavout: UX/UI, Prototyping

Pedro Bare: UX/UI, Wireframing, Concepting, Prototyping