836 Followers
·
Follow

Designing Unacademy’s 2019 Year in Review - The power of NoCode!

In this article, I am going to talk about another favorite project of mine, the 2019 Year in Review Project.

Image for post
Image for post

About the company

Unacademy is an online learning platform where students in India can study for various competitive exams such as UPSE, IIT JEE, NEET, Banking, CA, and more.

The company hires educators who teach the classes LIVE and students can watch them at their own convenience. Students have to pay a subscription fee to access all the content the platform offers. Similar to Skillshare and Netflix.

About the project

The 2019 Year in Review was a project I worked on single-handedly. There are a few reasons why this is one of my favorite projects.

  • I got to decide the final visual look of the design.
  • Was able to accomplish it within a span of 2 weeks.
  • It was a super success. The educators and learners were very much impressed with the end result.
  • Got to use Webflow to ship this product.

So what exactly was this project?

At the end of every year, a lot of companies release their year in review statistics for their users. For example, Headspace, Spotify, and Dribbble. Some companies like Unsplash, Google, and Behance talk about the company’s growth and performance.

And so at Unacademy we too decided to design something similar for our learners and educators. Here is a quick look at how the final result looked like. Do check out the video on Dribbble and drop a like ✌️

Project Timeline

Since I had only 2 weeks to work on this, I had to come up with ideas and design quite fast. Now designing is only one part of this, but then the designed screens have to also be turned into a functional webpage.

The front-end developers were quite busy with a lot of other projects and did not have the bandwidth for another project. And so I decided to use Webflow to create the build the functional webpage with interactions and gestures.

Oh btw, I didn't have to use a single line of code to build this.

Wait… What? No Code?

That’s right! The power of NoCode!

Webflow

For those of you who are not aware of Webflow, it’s the best online website building tool ever in my opinion. You can build a fully functional website without using a single line of code.

If you want to learn to build a fully functional website from scratch without using a single line of code in Webflow, make sure to check out my Mega Webflow Course for Beginners! You can find the course on Skillshare

Register with my link and get 2 free months of Skillshare Premium and watch it for free.

Anyway, let's move forward.

Game Plan

So the plan was that I would design the screens in Figma and build one functional version in Webflow. Then I would export the code from Webflow and hand it off to the back-end developers who would link it with their database.

They would substitute the text elements like names and numbers with real data from the database and make a unique page for each user.

Wow! How did they do that?

Honestly, I have no idea. I’m not bothered about how they did it 🙈

Competitive Analysis

As usual, every project I work on starts with a bit of competitive analysis. I started by looking at the year in a review released by other companies. The idea was to get a few ideas on the design direction.

One common pattern I found was that all the year in review pages were scrollable webpages. It was as good as looking at a website. But we wanted to do something different.

Spotify had done something similar to the Instagram Story format where you swipe or tap to go to the next slide. And this is something I really liked. It felt new. So I decided to go with this approach.

Now I had to decide the visual language. I of course had to come up with something that matched the brand. And I already was able to visualize the design in my head.

  • Blue and Green brand colors
  • Colorful Illustrations
  • Big bold text
  • Rounded corners and shadows

Iterations

Now since I had only 2 weeks, I did not have much time to iterate. I was able to come up only with a few concepts. Here are a few.

I decided that it would be nice to give each metric or statistic a separate slide of its own and so went to go with the 4th iteration.

Final Design

I had to make two sets of these webpages. One for the students and the other for the educators.

Screens for Students

Screens for Educators

Discovery

Now we were not sure how we would distribute this to our users. There were a few ways to do this.

  • Email
  • Banner touchpoint on app and website
  • Notifications

We decided to go with notifications on the web and mobile app. But I created banner touchpoints just in case we wanted to use it.

And… That’s a wrap!

I hope you guys found this case article useful and informative. Feel free to hit me up on any social media platform if you have any questions. I would be more than happy to have a chat with you.

Designer