Class or Pass

This was a project done for a Udemy Hackathon. 

I intentionally wanted to work on a fun app that was not part of the Udemy brand to practice my illustration and animation skills. It was also simpler for our engineer to build out the app separately from the Udemy codebase. 

1
2
3

Defining the Problem

Our Discover pages on web and mobile receive 2,000,000 views per week. However, one of the biggest challenge that remains in our marketplace is course discovery: matching students to the right course. Historically, we’ve built many mechanisms to help students decide for themselves what the right course is. We wanted to explore how we could help students narrow down on their selection by asking them to make binary decisions based on their interests. 

Kick off

The first part of the day consisted of finding the right people for the team, and planning out what had to be done. From our initial brainstorm, we formed a simple flow for creating an app. This aligned everyone on our team for what they had to build. 

hotornot
Simple flow to align the team on what work needs to be done

Finding a mascot

My personal goal with this Hackathon was to practice skills that I don’t typically use on a day to day basis. Illustration was something I wanted to get better at, so I explored different illustrated mascots that seemed curious and excited. These explorations inspired the branding of the rest of the app. 

mascot

Visual Design

vizd

Animating Ed the Mouse

I wanted Ed to be excited for the courses that we could find for the user. I previously learned how to animate objects using Photoshop’s timeline tool. So I initially mocked up every keyframe of Ed jumping up and down in excitement. 

keyframes

The jump I was able to produce in Photoshop was slow and choppy though, so I tried again in Principle. This was a new tool for me and it took a couple tries to make the jump feel smooth. After a bit of trial and error with Principle, it became quite intuitive to use. Because of this, I was able to animate in extra details like his eyes and mouth moving as he jumps, and change the easing for his push off. 

bbefore-after
Before (Photoshop) and after (Principle)

All together now

(c) Beatrice Law 2018