Logo

While I’m sure that at some point the Edmodo logo had usage guides, by the time I started at Edmodo they had been lost to time. Inconsistent use of the logo was rampant within the product and our own marketing assets (see accompanying image).

I worked with my design counterpart in marketing to create a standardized relationship between the icon and text, a standardized text treatment and rules regarding when to use the light vs dark versions. We also created an easy to reference usage guide with pre-made logo assets that users could download and use without having to create their own (yes, pretty common sense, but this is what I meant by low hanging fruit).

Most of our new users were millennials with favorable views of popular social media brands like Instagram and Snapchat, so we knew we wanted to move our colors in a more vibrant direction to make the brand feel younger and refreshed.

Working with product, I created a few new working UI palettes that kept blue as our primary color and expanded our color options. The palette to the left is the one that product selected and we rolled it out to the brand.

Typography

On the product side, typography wasn’t too tricky to fix up. I decided that instead of using many proprietary fonts inconsistently, we’d start using system fonts consistently. That meant that on each platform, only a single font family would be used within product. Edmodo is a very UI and dashboard intense product, and having reliable, clean font display is paramount.

On the marketing side, the font GT Eesti was selected for all of our brand marketing materials.

Icons

Icons had never been coherently used or styled in our product. When I started, we were using icons from at least a dozen different free icon sets in no particular order.

I created a library of our own custom-tailored and stylistically unique icons to replace the dozens of strange sets in use within the product. I talk A LOT more about creating this icon set over in my design system section.

Illustration

Edmodo had been using illustrations from many different, stylistically distinct, free clip art packs. So many illustrations were used, in fact, that I felt it warranted creating our very own stylistically distinct illustration system.

Using our new color palette, I created a wide array of illustrations and style guidelines to serve as a foundation for all illustrations moving forward. I did most of the illustrations myself, but a few were created by very talented freelance illustrators that I had the pleasure of Art Directing.

Its easy to see why you may need branding assets created for marketing reasons, but the purpose of brand elements within the product is a little less straight forward.

Using a product to solve a problem is rarely a purely logical or utilitarian act. Humans have a range of emotional needs alongside their technical needs and successful brands know that fulfilling emotional needs is just as important as fulfilling utilitarian ones.

Regardless of whether you are conscious of it or not, your product WILL have a “feel,” and if you don’t actively acknowledge it, you will not be able to understand or harness its benefits to your business.

Products with emotionally invested users enjoy many benefits including longer retention, better conversion rates and a higher rate of user evangelism, just to name a few.

So, how do you encourage emotional investment in something like an app? There are many ways, too many ways to list here, so I’ll just say this: It’s impossible to have a relationship with something that has no personality. Illustrations, animations and interactions within the product can be used as touch-points to establish a crafted personality for your product.

Illustrations

I created most of these illustrations myself, but a couple were created by illustrators under my direction.

Product Features

Infusing personality into key features of a product is a great way to begin forging a brand identity that a user can connect with. These product features move a step beyond static illustrations, transforming mundane actions within the product into opportunities to create a positive emotional impact on users.

Edmodo Student signup update

Signing up for a product generally tends to be a tedious and dry experience, but introducing personal customization and gamified elements can build a lot of interest for the user, leading them to be more invested in seeing the entire process through.

Avatar Generator

It’s part of the sign up process here, but the avatar generator exists as its own product feature. While students can create one of millions of customized avatars, it also solves the problem of storing potentially sensitive personal information for young children for identification purposes. On the platform, teachers can easily recognize their student’s by their personalized avatars, and don’t require actual photos or real names to see who is who.

Like animations

This is a concept design for a more robust feeling ‘like’ action. User can also select other types of animations to attach to the post.

Assignment submitted

Submitting an assignment is a big moment for students, and it should feel big. Students receive this animated message when submitting an assignment.

Empty states

Sometimes empty states are things to be celebrated. If all of your assignments are turned in or all of your to-do items are completed, the state should reflect success.

Animated Stickers

These stickers can be attached to a post or sent as a direct message. Giving users the tools to express themselves is one of the best ways to form a relationship with them.

Class selector

Concepts for a more expressive class selector tool.