Writer & Designer

Labor Résumé About

 Catnip    Organizing your schedule based on priority

UI/UX Mobile Design   •   Mockups and Wireframes   •   User Testing




Introducing Catnip

Catnip is a concept for a mobile app that aims to encourage Northwestern University students to better prioritize their daily tasks. Catnip features a unique primary display where tasks and assignments are represented as rectangles on a 4x4 grid.

TEAM: Allison Lu, Janus Kiong, Lexy Praeger, Leslie Zhang



What I Did

User Testing

  • Conducted A/B testing with
    multiple paper prototypes
  • Hosted brainstorming sessions
  • Ran a 3-week-long notifications simulation test with users

UI Mockups and Wireframes

  • Created comps and wireframes with Adobe Photoshop and Illustrator
  • Adapted designs based off of user feedback
  • Independently redesigned UI after project's conclusion


"Houston, we have a problem!"


“By week 5 or 6, many students quickly get overwhelmed even if they’ve felt fine week 2 or 3. This can be due to a combination of midterms, their academic workload, or study habits. It’s important to give them tools that can help them out before they’re struggling.”
JANICE MEJIA, FIRST-YEAR ADVISOR

Students lack resources for how to adjust to rigorous university life, consequently becoming quickly overwhelmed with academic and extracurricular commitments by midterms.

Insufficient methods of time management can exacerbate stress, anxiety, hopelessness and frustration.

Some students used digital calendars like Google Calendar, but found that manually updating them was tedious and a chore in itself.


Catnip encourages students to visualize their tasks in a different way. By syncing with Canvas, Northwestern's learning management system, Catnip minimizes manual input of tasks. Users can focus on what's most important: getting things done.



Key Features

List View

  • Supplementary view
  • Chronoligical list of assignments
  • Ordered by due date
  • Users can swipe left on a task to mark it as completed

Priority View

  • Primary view
  • Tasks represented as movable, resizable rectangles on an 4 x 4 grid
  • Each box represents 1 hour, budgeting students 16 hours for productivity and 8 for rest and leisure
  • Tasks can be moved across different calendar days by holding and dragging to side of screen

Calendar View

  • Supplementary view
  • Monthly display of tasks
  • Boxes turn a darker shade depending on heaviness of workload
  • Allows users to reflect on past activity and create long-term time management plans for the future


Adding and Editing Tasks

While Catnip anticipates to automatically pull course and assignment data from Canvas's API, the app also allows users to manually add and edit tasks.

The Add/Edit menu is activated by double-tapping on an existing task, or by tapping the + button in the top right corner of the dashboard.

Here users can input details such as date and duration, assign a color, mark the task as urgent and delete a task from the screen.



Reflection

Making an app is harder than it seems! It was a great opportunity to dive into introductory UI design, and I'm still trying to learn the basics and improve.

The class this was for spanned over twenty weeks, and it was a challenge to stay focused and motivated.

Funnily enough, working on Catnip was an exercise in time management. I learned that there's definitely a fine line between being grounded in user testing and research and being bogged down.