UdacityMobile App Design & Development

Habit Planner & Student Companion App

Udacity is an e-learning platform that teaches the most sought-after skills in today’s tech industry, helping a generation of professionals find new opportunities at a fraction of the cost of traditional institutions.

The California-based startup wanted to create a tool that allowed their students to forge healthy studying habits with a rewards-based system focused on building motivation through ‘Nanodegrees’. It was no easy feat, so, naturally, they gave us a call.

Our approach

Help & Motivate

Rather than focusing on distant, complex goals, we centered the process around bite-sized steps that would eventually add up to reaching the original goal. The whole experience was built as a way to minimize anxiety, supporting students through gentle reminders and motivational nudges along the way.

More sketchings of the app on a notebook

Goals & Schedules

Tailored experience

We wanted the app to adjust to the Student’s needs and personalities, so we let them fine-tune how Udacity works by choosing one of four profiles, according to their routines and usual availability.

More sketchings of the app on a notebook
I'm lazy < 2 hours a week
Keep it up 6 hours a week
Got time 12 hours a week
Hardcore 24 hours a week

Onboarding

We divided the onboarding experience so that users could focus on each individual step, making sure that they paid attention to every stage and all the settings were genuinely tuned to their habits and personalities.

Commitment is key

Notify

We crafted a set of notifications for both inside and outside of the app with everything from reminders to goal updates, with the addition of motivational messages to keep users engaged throughout the process.

Screenshots of the app showing how notifications works
EXTERNAL NOTIFICATIONS Screenshots of app notification working Screenshots of app notification working Screenshots of app notification working Screenshots of app notification working INTERNAL NOTIFICATIONS
Screenshots of app notification working Screenshots of app notification working

Track

Tracking progress was key for users to visualize how they evolved through each stage and how, with every hour they put in, they came closer and closer to reaching their goals. It also served as an encouragement to build consistency.

Screenshots of the app showing how tracking works
Screenshots of the app showing how tracking works Screenshots of the app showing how tracking works Screenshots of the app showing how tracking works

Motivate

We wanted users to feel empowered and in charge of their own growth. We included several motivational facts, friendly nudges and progress reminders throughout the app to keep things positive.

Screenshots of the app showing how motivation works
Screenshots of the app showing how motivation works Screenshots of the app showing how motivation works Screenshots of the app showing how motivation works

Reward

If we wanted users to keep pushing through and working for their goals, we had to find a way to make them feel good about their progress and to feel like they were constantly improving. That’s how we came up with a badges and achievements system that consistently granted new titles and reinforced the user's sense of’ progress.

Screenshots and sketchs of the app showing how rewards works
Screenshots and sketchs of the app showing how rewards works Screenshots and sketchs of the app showing how rewards works

Badges Illustrations

Identity

We adapted the brand identity to fit to the guidelines of Material Design, as well as those defined by Udacity itself. We created a whole new visual system that included original icons, logos and illustrations, paired with a custom color palette and a very specific style of copywriting.

Screenshots of the final styles used on the app, like fonts, colors and icons
LOGOTYPE ITERATIONS/ Screenshots of the final styles used on the app, like fonts, colors and icons FONT — ROBOTO/ Screenshots of the final styles used on the app, like fonts, colors and icons COLOR PALETTE /
  • Midnight Knight #2E3D49
  • Turquoise Noon #02CCBA
  • Workaholic Pine #15C26B
  • Grey Hour #DBE2E8
  • Café Bleu #08B2E2
  • Saffron Tea #FFAE0C
Thanks! for watching
Check Similar Projects