Kristi Bar Design

Creating thoughtfully researched, tested,
& well executed designs.

goal Getter

App designed for middle school students to inspire & empower them to effortlessly manage their academic lives.

overview

    • My Role
    • UX/UI Designer
    • Front End Developer
    • Project Lead
    • Tools Used
    • Trello
    • Miro
    • Figma
    • InVision
    • Slack
    • Zoom
    • G Suite
    • Visual Studio
    • GitHub
    • The Team
    • 3 UX/UI Design Students
    • Duration
    • 3 week sprint
    • My Contributions
    • User Interviews
    • Empathy Map
    • Sketches
    • Wireframes
    • Lo-Fidelity Testing
    • Mood Board
    • Style Tile
    • Mid-Fidelity Testing
    • High Fidelity Testing
    • Slide Deck Design
    • Coded: Header/Home Page/Goals Page

research

user tests

Interviewed five students between the ages of 12 - 16 and two parents of middle schoolers via Zoom to discover:

  • How students are keeping track of homework assignments.
  • How parents are staying informed of their children’s performance.
  • How students stay motivated to keep on top of homework assignments and get good grades.

user testing insights

  • insight #1

    paper isn't working

Middle schoolers are given paper planners to manage their work. Paper planners are inefficient because they are time consuming to update, difficult to edit, and easy to misplace.

Result:

Create a digital app designed specifically for middle schoolers to manage their schoolwork, extra curricular activities & all aspects of life.

  • insight #2

    LACKING FEATURES

Current apps lack flexible viewing features such as List or Calendar view and the ability to set notifications for overdue and upcoming assignments.Because of this students struggle with prioritizing their work.

Result:

The app gives students viewing optionsincluding list view/calendar view & notifications.

  • insight #3

    WHAT MOTIVATION?

When giving it their all and not succeeding because of inefficient processes and no rewards system; motiviation decreases and students eventually stop trying.

Result:

A built in reward systemfor students to track their progress and achieve their goals. Students can enter and edit goals, dates and rewards.

  • OTHER RESEARCH

Proto Persona • User Insight Statement • Affinity Diagram • Feature Prioritization • Direct Competitor Analysis • Indirect Competitor Analysis • Empathy Map

Design

SKETCHES & WIREFRAMES

Subjects Page Sketch

Subjects Page Wireframe

  • Strategic Decision: Design desktop first as students use the app primarily on their school issued computers.

APP NAME & TAGLINE

  • Goal Getter: Because kids using our apps are little “Go Getters”!

  • Academic Parkour Mastery: Ties in to kid’s love of video games; energetic, fun and rewarding.

    Definition of Parkour: Athletic training discipline in which practitioners attempt to get from Point A to B in the most creative and entertaining way possible and in the fastest and most efficient way possible.

STYLE TILE

  • FEELING

    Fun, playful, colorful, rewarding & empowering.

  • CONTENT

    Lots of meaningful icons with minimal text.

  • DIRECTION

    Balance between youthfulness yet mature enough for the user to feel in charge & self motived.

Testing & Ideation

Tested lo, mid and high fidelity prototypes with nine middle school students tasked with the following:

  • Find assignments for the week.
  • Ask teacher a quick question.
  • Check for late assignments.

SUBJECTS PAGE

Before Testing

user Quotes

  • “What does ‘Dashboard’, ‘Email’ and ‘To-Do’ mean?”

    ~6th Grader

  • “I’m not sure what the icons in the subjects boxes are for.

    ~8th Grader

  • “Is there a place to take notes? That would be helpful.”

    ~8th Grader

  • CHANGE #1

    REFINED MAIN NAVIGATION

    Users were unclear on some of the names. They agreed on the following more intuitive titles.

    • Dashboard Subjects.
    • To-Do To-Do List.
    • Inbox Email.

  • CHANGE #2

    MICROTEXT FOR ICONS

    Microtext was added to the subject icons so they could be easily understood.

    • Important
    • Notes
    • Assignments
    • Reminders
    • Chat

  • CHANGE #3

    NOTES FEATURE ADDED

After Testing

CALENDAR PAGE

Before Testing

user Quotes

  • “I would look at the calendar every day and if I had a missing assignment, I would quickly get it done.”

    ~6th Grader

  • “I don’t see how to add something to the calendar.”

    ~7th Grader

  • CHANGE #1

    NEW EVENT BUTTON

    There was no way for users to add a new event. A button was included so users can input new events to their calendar.

  • CHANGE #2

    ICON FOR COMPLETED ASSIGNMENTS

    Users couldn’t tell the status of their assignments.A green check mark icon was added to completed assignments to eliminate confusion.

After Testing

TO-DO LIST PAGE

Before Testing

user Quotes

  • “It’s confusing that the mini calendar is on the next month.”

    ~7th Grader

  • “I would never use the week/month button.”

    ~8th Grader

  • “An inspirational quote is always a nice touch.”

    ~6th Grader

  • CHANGE #1

    MINI CALENDAR SET To CURRENT MONTH

    Users found it confusing that the mini calendar was on the previous month. It was adjusted to be on the current month.

  • CHANGE #2

    WEEK/MONTH TOGGLE REMOVED

    When looking for assignments in the future, users preferred the filter within the list.The week/month toggle was removed.

  • CHANGE #3

    INSPIRATIONAL QUOTE ADDED

    An inspirationation quote was added and well received when tested.

After Testing

GOALS PAGE

Before Testing

user Quotes:

  • “How do you enter new goals and what the reward would be?”

    ~6th Grader

  • “The Goal Tracker is eye catching and encouraging to see! I would be motivated by this.”

    ~8th Grader

  • CHANGE #1

    EDIT FEATURE TO GOALS CARDS

    Users weren’t sure how to update goals. A update pop up card was added to the prototype.

  • CHANGE #2

    NEW GOAL BUTTON

    There was no way for users to add a new goal. A button was included so users can input new goals.

After Testing

HI-FI TESTING INSIGHTS
  • Users were thrilled with the icons and the parkour theme!
  • Goals page excited users and made them feel motivated.
  • Interface is easy to use and understand.
  • Users were delighted with being able to customize their calendar events and goals.
FINAL THOUGHTS

Middle schoolers are a unique demographic. They straddle two worlds as they move from being kids to young adults. We believe there is a huge opportunity to transform the way they manage their schoolwork and lives.

Goal Getter was designed to be easy to use and empower them to go after their dreams. Middle schoolers are our the future and we can’t wait to see the amazing ways they’ll impact our world!