Badges

3 min read

PUBLISHED ON

12 September 2023

Badges

Badges

Badges

img

Badges

Badges

img

MY ROLE

Visual Design, 3D & Interaction Design

TIMELINE

August 2023 (1 Month)

OVERVIEW

Newton School is an Indian ed-tech startup that focuses on building a futuristic online university. They are set to introduce a new venture called "EDGE," dedicated to providing aspiring developers with a comprehensive education in Data Structures and Algorithms. This offering will be delivered through an online, AI-driven course, eliminating the need for direct human intervention.

I led a team of four in designing the EDGE product experience from scratch. In an effort to acknowledge and reward students for their achievements, we introduced the concept of badges. To add an extra flair, we opted for 3D badges with interactive features, allowing students to showcase their accomplishments proudly on the internet and among their peers.

We decided to push this feature for future versions, prioritizing the rollout of the entire product for alpha testing. Consequently, I undertook the design of badges as a personal project, gaining hands-on experience with Spline in the process.

MY ROLE

Visual Design, 3D & Interaction Design

TIMELINE

August 2023 (1 Month)

OVERVIEW

Newton School is an Indian ed-tech startup that focuses on building a futuristic online university. They are set to introduce a new venture called "EDGE," dedicated to providing aspiring developers with a comprehensive education in Data Structures and Algorithms. This offering will be delivered through an online, AI-driven course, eliminating the need for direct human intervention.

I led a team of four in designing the EDGE product experience from scratch. In an effort to acknowledge and reward students for their achievements, we introduced the concept of badges. To add an extra flair, we opted for 3D badges with interactive features, allowing students to showcase their accomplishments proudly on the internet and among their peers.

We decided to push this feature for future versions, prioritizing the rollout of the entire product for alpha testing. Consequently, I undertook the design of badges as a personal project, gaining hands-on experience with Spline in the process.

MY ROLE

Visual Design, 3D & Interaction Design

TIMELINE

August 2023 (1 Month)

OVERVIEW

Newton School is an Indian ed-tech startup that focuses on building a futuristic online university. They are set to introduce a new venture called "EDGE," dedicated to providing aspiring developers with a comprehensive education in Data Structures and Algorithms. This offering will be delivered through an online, AI-driven course, eliminating the need for direct human intervention.

I led a team of four in designing the EDGE product experience from scratch. In an effort to acknowledge and reward students for their achievements, we introduced the concept of badges. To add an extra flair, we opted for 3D badges with interactive features, allowing students to showcase their accomplishments proudly on the internet and among their peers.

We decided to push this feature for future versions, prioritizing the rollout of the entire product for alpha testing. Consequently, I undertook the design of badges as a personal project, gaining hands-on experience with Spline in the process.

What to expect in this documentation?

In this document, I will provide some context for the feature. Primarily, I will cover the process of designing the badges, discussing the challenges I faced while creating them on Spline. Finally, I will offer a glimpse of the feature's placement in the product.

Introduction of badges in the course

In an online, human-free course, maintaining student motivation for consistent problem-solving and course completion poses a significant challenge.

To address this challenge, we delved into various motivational strategies, including peer-to-peer competition, goal achievement features, and methods to encourage regular participation. As a result, we introduced badges at different milestone completions as a means of recognising and motivating students.

Milestones for which the student will earn the badges

Badges Earned for Consistency

1

Perfect Week

Earned upon completing a 7-day streak

2

Perfect Month

Earned upon completing a 30-day streak

3

10 Daily Goals

Earned upon completing 10 daily goals.

4

100 Daily Goals

Earned upon completing 100 daily goals.

Badges Earned for promoting Competition

5

First Podium

Earned upon finishing first on the monthly leaderboard.

6

Second Podium

Earned on finishing second on the monthly leaderboard.

7

Third Podium

Earned upon finishing third on the monthly leaderboard.

Badges Earned for Completion

8

Builder

Earned upon finishing a coding project.

9

Grinder

Earned upon solving 80% of practice questions.

10

Pro

Earned upon completing a module in the course

Final Designs

Sleepy Head Furmoji

Perfect Week

img

Perfect Month Badge

Perfect Month

img

10 Daily Goals Badge

10 Daily Goals

img

100 Daily Goals Badge

100 Daily Goals

img

First Podium Badge

First Podium

img

Second Podium Badge

Second Podium

img

Third Podium Badge

Third Podium

img

Builder Badge

Builder

img

Grinder Badge

Grinder

img

Pro Badge

Pro

img

Interaction Design

Imagine sitting in a restaurant, eagerly ordering your favourite cuisine. When the waiter arrives with a tray, you catch the first glimpse of something familiar. As it reaches your table, the aroma and vibrant colours of the food envelop your space.

In designing the interaction for badges, my vision was similar to that moment in the restaurant. The badges should be easily identifiable from a distance, yet reveal intricate details up close. They should represent a solid, metallic feel, enticing you to reach out and grab them—much like something elegantly presented to you.

Badge Interaction

3d Render

Badge Interaction

3d Render

Badge Interaction

3d Render

Badge Interaction

3d Render

Sharables

Perfect Month Card sharable on Social Medium

Perfect Month Card

img

Perfect Month Card sharable on Social Medium

Perfect Month Card

img

Perfect Month Card sharable on Social Medium

Perfect Month Card

img

Perfect Month Card sharable on Social Medium

Perfect Month Card

img

Play with the card

3D Render

Play with the card

3D Render

Play with the card

3D Render

Play with the card

3D Render

Closing Notes

For a while, the desire to learn 3D design, but kept procrastinating. While I had played around in MagicaVoxel, a 3D pixel art tool, it remained rather rudimentary.

This project finally granted me the opportunity to step outside the confines of the 2D world and venture into the realms of 3D and interaction design. The journey of learning Spline and crafting the badges proved to be exceptional. Concepts like camera placements, lighting, materials, and numerous other aspects unfolded during the process.

Navigating a project rich in 3D and interaction dynamics presented a distinct shift from the pixel-pushing routine of 2D. The challenges of implementation, embedding, and optimising assets added a layer of complexity.

In the end, it was an enjoyable experience— "Maza aaya!"