About

As a team lead in Johns Hopkins’ UI/UX club, JHUXplore, I led a team of five students to conduct user research and improve the user experience of a local non-profit organization’s mobile application. We conducted user interviews, met with stakeholders, and designed the interface on Figma. We focused on the UX of the app’s camera function, making gestures and buttons more intuitive and adding more user feedback aspects.

Work

UI/UX Research & Design

Tools

Figma

What is VectorCam?

VectorCam is a tool that aims to aid malaria prevention and elimination in sub-Saharan Africa by simplifying the mosquito identification process. It allows users to take photos of mosquitos with a smartphone, and using computer vision models, provides characteristics of the specimen.

Problem

The interface of the app's camera was clustered, lacked structure, and had inconsistent style, disturbing user flow. In addition, there was little feedback regarding the photos that were taken, resulting in poor sample photos.

Background

User Research

The target users for this project were those who lack access to internet and technology. Accordingly, we focused on implementing clear icons and intuitive gestures.

Research

App User Flow

Features & Design Decisions

Solution

We consolidated the functions of the camera, eliminating unnecessary buttons and decluttering the interface. We also layered relevant information concerning the mosquito onto the camera screen, allowing users to maintain focus on a single element.

To provide feedback to the user, we came up with a system that displays the quality of a image through a colored square around the mosquito and a percentage. This percentage would be based on the sharpness and composition of the photo, and how well the specimen in the photo can be assessed by the computer vision models.

Feedback