ChatterplotLanding Copy 3.png

Chatterplot

Branding and UX for language learning social platform

  My contribution:  I was the Chief Creative Officer and cofounder of this language learning social site. I created the UX, branding, and marketing materials for the company.  With Chatterplot, users could find partners based on their location to mee

My contribution: I was the Chief Creative Officer and cofounder of this language learning social site. I created the UX, branding, and marketing materials for the company.

With Chatterplot, users could find partners based on their location to meet up in person and share lessons in each other’s target language.


User flows and site map

User flows and site map

A lot of initial work went into how the various pages of the site would be organized. Our site would need to do its own marketing while also functioning as its own social app.

The marketing side would drive users towards signing up across various relevant landing pages, while the social side would allow them to create profiles, find each other, connect, or even offer and coordinate teaching services.

Landing pages flow

Landing pages flow

We had enough marketing work that we needed to organize our various landing pages as well.

Main landing page

Main landing page

For our main landing page, I choose friendly colors and created custom illustrations to make the site feel fun, lively, and trustworthy. After all, the users would be ultimately be meeting each other in person, so good vibes would be important.

Animation example

Animation example

I wanted some interactions to be smoothly animated to showcase the care that we put into our product. I created animations to better explain the execution of these animations to our developer.

Navigating the map animation

Navigating the map animation

Again, some animations were helpful to explain the desired experience to the developer.

I wanted the map to be closely integrated with the list on the right, so that an interaction on one side would highlight the corresponding info on the other.

Profile design

Profile design

Search design

Search design