Nibble

I designed an app that uses a digital companion to help users become more productive.

Team
Kathy Nguyen, Brooke Stevens
Duration
Spring 2020
Tools
Sketch, Axure RP, Adobe Creative Suite
Key Skills
User Research,  Prototyping, User Testing, Visual Design, Brand & Identity
Troubles Of A College Student
In Fall of 2019, I was thinking about what my capstone project would look like. It was hard for me to think of a perfect project; there were so many things I was passionate about! But one thing stuck out to me: productivity and motivation. They're undoubtedly linked, and when I worked as a teacher's assistant for students on academic probation, I noticed that many of them were having difficulty succeeding in their classes. But not because they weren't hard-working or smart, but because they didn't have the motivation, especially when they fall behind. It's a Catch-22; users who fall behind feel unmotivated, and users who aren't motivated will fall further behind. I wanted to help students bounce-back from that stage, and even prevent them from getting there in the first place.

I also liked the idea of having a digital pet. I was fascinated by Tamagotchi in my younger years, and as I grew I became an avid fan of these types of games, such as Neko Atsume. Pets often help their owners with anxiety and depression. I wondered if having a digital pet for motivation would help, too. With this in mind, I wrote out some clear goals for my project:
I knew that while I couldn't force people to become motivated, I could help them along. Our app would be one of the many tools that someone could use if they need a little push.
Ideation
With my partner, Brooke, I started sketching some ideas for Nibble. I was designated as the designer, and she was the developer, but it was important to us that we were on the same page. There were a lot of ideas that could be really cool, but weren't viable for our small team.
‍

Initial Sketch

I had originally imagined Nibble on a mobile-only interface, but we found that a progressive web app (PWA) would fit our needs better. It would be a website, but it could easily be designed for a mobile-interface. Users can also access our app from their home screen if they wanted to as well. I also entertained the idea of using a currency and having the user 'unlock' more pets and accessories if they were productive, but due to time and energy constraints, we scrapped that idea for a later time.

Integrating Mochi, Our Digital Pet

We also had a lot of different ideas on how we could incorporate Mochi, our digital pet. We wanted him to be interactive, but not overbearing. We decided that he could change his appearance based on how productive the user has been; if they were not productive, he'd be in his pajamas. If they were, he'd be fed and he'd start getting out of bed; like a daily routine. We also adapted terminology to better fit our theme; when the user breaks down their tasks, they'll get 'meals', 'nibbles', and 'bites',

Click to see full sketch
Click to see full sketch

Second Iteration

It's easy for apps to fall victim to feature creep, and Nibble is no exception. Our team had several ideas that may be cool in theory, but in reality, would only get in the way of the user's goals. We narrowed down two key actions that we knew would best help our user: planning (organizing, making a to-do list, prioritization), and execution (actually doing the thing you planned). We also figured out some key strategies that most people use when they're trying to be productive:

  • Time Management - Users will usually designate a set amount of time to be productive, whether it's as little as 10 minutes at a time, or hours. We want to incorporate something like a timer to help the user start on their work.
  • Chunking - If the user is overwhelmed with a big task, we can help them tackle it by chunking, or breaking it down into smaller pieces. It will help the task feel more attainable. The user should also feel a sense of accomplishment when they finish the task.
  • Priority - Some tasks are more important than others. We want to further help the user organize their tasks by giving them the ability to sort by priority. This way, they can get a visual indicator of what they should probably work on first.
Prototyping
Our prototype was made an Axure RP, and was used extensively for testing and interviewing users. We also consulted our faculty mentors and professor about our project. Here's a quick preview of our prototype.
‍
Our clickable prototype
‍

Key Finding: Users Don't Chunk Using Time

After a round of testing, we found that users were having trouble breaking down their tasks because of our wording. Users don't break down their tasks by time, they break it down sequentially, or in milestones. For example; studying for an exam. Most users don't break it down by 30 minute increments, but instead perhaps by topic or by chapter.

Key Finding: Streamline The Interactions

We also found that users wanted a more streamlined flow. We had each part of the process broken down into pages (creating sub-tasks, priority, etc) and it would be more efficient if we condensed this process into one page.

Design
After adjusting the prototype, we felt that we were comfortable enough to move onto the final design. I created these designs using Figma. I also created the art for Mochi, our digital pet. While it's not the work of a professional artist, I'm proud of myself for drawing these.

Desktop


‍

Mobile Demo

Brooke, our developer, was able to successful deploy this project for our capstone project. Here you can see the new task view, as well as the task flow for getting work done with the timer.

Capstone Presentation

Final Thoughts
Nibble was just one of 46 capstone projects that was presented that semester. I'm proud to say it was one of the projects highlighted by my program! It was a culmination of blood, sweat, and tears, and I'm really glad to have worked on it.

If I had more time to work on it, I'd definitely want to incorporate more features that would reward the user for using the app. Ideas that were previously scrapped, such as a monetary system, might help retain more users. I'd also like to incorporate more of Mochi. We had to stick to static images due to time constraints, but if Mochi moved and made sounds, it would definitely help with the digital pet aspect of our app.
OnCampus
Swivel
Designed in Webflow by Kathy ❤