top of page

Task 
Hopper

User Interface Project

Students need a new task management app designed for college students to organize tasks by category, title, and description. The project involved user interviews, prototypes, flowcharts, and more to create an intuitive and efficient experience. 

Task Hopper App Mockup_edited.jpg

The Process:

User Interviews

In order to understand the target user, a series of user interviews were done with college students as well as other individuals for its functionality with anyone. From the interviews, the main points gathered were:

  1. Students use a variety of task management apps or non-task management apps like the Notes app

  2. The need for basic features - checking off tasks and due dates

  3. Students want a minimalist app to help them manage tasks not for them to manage

Low Fidelity Wireframes

From initial user interviews, an initial prototype was made with the basic essential features of the task app

LoFi Wireframes- ShirleyL .png
LoFi Wireframes- ShirleyL .png

User Flow Chart

This demonstrated all the paths a user could do within the task management app

Atomic Design

This dives deeper into the atom and molecule design choices that would be included in the next prototype

User FlowChart.HEIC
Atomic Design.HEIC

Prototype 1: Paper

A paper prototype was made highlighting the most essential features and helped determine which to keep and remove based on user testing.

Paper Prototype.HEIC

The Minimum Viable Product

Screenshot 2025-02-23 at 2.24.24 AM.png
Screenshot 2025-02-23 at 2.24.52 AM.png
Screenshot 2025-02-23 at 2.24.44 AM.png
Screenshot 2025-02-23 at 2.25.01 AM.png
Screenshot 2025-02-23 at 2.24.33 AM.png
Screenshot 2025-02-23 at 2.25.15 AM.png

Iterations Made

​From testing the paper and low-fidelity airframe some user goals shifted to address these points for the final iteration:​

  • Removing redundant features 

  • Condense Information on tasks

  • Add more organization

  • Enhance Features

Final Product

Opening Page.png

Task Details:

Dashboard (1).png
Dashboard.png

Add Task:

Add Task.png
Dashboard Check Off Task1.png
Dashboard (2).png
bottom of page