Graduation Project-2020 at InterviewBit

Building Scaler NIFT Graduation Project 2020

Copyright C National Institute of Fashion Technology, Jodhpur 2020 No part of this report may be copied or reproduced in any form by means of electronic, photocopying, or otherwise without the prior permission of NIFT or InterviewBit except by a reader who wishes to quote a brief passage in connection with paper review written for inclusion in a periodical, newspaper or broadcast.

National Institute of Fashion Technology, Jodhpur

Graduation Project 2020 Company: InterviewBit Pvt. Ltd.

Pushti Bhatia Dept. of Fashion Communication 2016-2020

Industry Mentor : Shruti Kartikey | Faculty Mentor: Ms. Anupama

� � �

������������������� ���������������������� � � � ������������������������������������������������������������������������������� �������������������� ������������������������������� � ������������������������������������������� � �������������������� ������������������� ����������������������������������� �

������� ���� �������� �������� ��� ������ ���� ��� ��� �� ��������� ���������� ������� ����� �� ������������� �������������������������������������� �

�������������������������������������������������������������������������������������������������� � ����������������� �

� � ��������������������������������������������

Industry Certificate

Certificate Of Authorship & Originality I, PUSHTI BHATIA, Daughter of MR.SHASHI BHATIA, a bonafide graduating student with Roll No BD/16/1624 (19) of NIFT Jodhpur campus, hereby certify that the work in this Graduation Design / Research Project Report with title BUILDING SCALER dated 20th July 2020, submitted by me for the partial fulfillment of the UG degree in B.Des. Fashion Communication, Batch 2016-20, has neither previously submitted for a degree / diploma nor has it been submitted as a part of requirements for a degree/diploma by self or anyone else, except as fully acknowledged within the text of this report. I also certify that the report has been originally and completely authored by me under the supervision of my project guide/mentors allotted by the Institute/Industry. Any help that I have received in my design research project and the preparation of the same has been acknowledged. In addition, I certify that all the creative and research works / intellectual content presented in this document are original and all information/data sourcestextual, numerical and visual nature, other literature used are indicated and due credit has been given in the report.

Certified by:

Verified by:

PUSHTI BHATIA

MS. ANUPAMA KUMARI

B.Des, FC, Batch of 2020

Faculty mentor

Date: 20th July 2020 | Place: Jaipur

Date: 25th July 2020 | Place: Jodhpur

Acknowledgement I’d like to extend my heartfelt gratitude to Mr. Anshuman Singh & Mr. Abhimanyu Saxena (Co-founders, InterviewBit Pvt. Ltd) for providing me an opportunity to work with their esteemed organisation. I’d like to thank my mentor, Shruti Kartikey, for guiding me so well throughout my time here at InterviewBit. She is a person full of knowledge and experience and at no point she left a chance to imbibe me with that knowledge. It’d have been really difficult to carry out my project with my other two team members, Seethal Krishna and Yashverdhan Tiwari who have given me the best of feedback that helped me improve my work and learn various new things. I’m grateful to the whole team of InterviewBit with whom I worked directly and indirectly in office and remotely, for making my time comfortable.

I’d also like to extend my gratitude to my campus director, Dr. Vijaya Deshmukh for providing this wonderful opportunity to carry out my Graduation Project & Ms. Anupama Kumari, my Faculty menotr who helped me throughout during my project with her valueable feedback and helped me in drafting this report and preparing my best for the presentation and juries.

Abstract My Graduation project “Building Scaler” is a compliation of work I did during my Tenure from January -June 2020. Initially starting with The Design System, I extended my work in various other sections like interface Design, Experience Design and Graphic Design. The design system was a through study of ntroducing new components and using it throught the brand offline and online to bring consistency. This would save a lot of time too. Phase 1 of the DS was completed which was the color system and the CTA profile. It was a study of how we could bring conversions to our company just by implementing the right colors. I designed new interfaces for few webpages which were to be added in the website to increase the SEO. To create better experiences I also worked on implementing some new features o improve student experience and make the process faster and organised. Apart from these I also worked on brand collaterals and social media and got to learn a lot about how marketing works and what impact a design can create if marketed well.

Introduction

2

The company

Design

SCALER

D E PA RT M E N T

PRODUCT DESIGN

FOUNDERS

WORKFLOW

UX DESIGN

MISSION & VISION

3

UI DESIGN

Contents

1

1

Design System

2

Interface Design

3

ABOUT DESIGN SYSTEM

A B O U T US PAG E

REFRGRAPH BLOCKER

NEED AND USAGE

SUCCESS STORIES

SAC DASHBOARD

I M P L E M E N TAT I O N

SUCCSS STORY REVIEW

LIVE CLASSROOMS

Experience Design

Coders Bit

5

P R E S E N ATAT I O N D E C K

GOOGLE ADS

SAC

WEBSITE DESIGN

B R A N D CO L L AT E R A LS

WEBINARS

SOCIAL MEDIA GRAPHICS

WORKSHOPS

Brand Material

6

Programs

CONTESTS

Projects

4

1

Introduction ABOUT INTERVIEWBIT

FOUNDERS

MISSION & VISION

InterviewBit InterviewBit is a company based in India, most well-known for its technical interview questions regarding software engineering practice. It was launched in 2015 by Anshuman Singh and Abhimanyu Saxena and headquartered in Pune, and recently moved their oice to Bangalore in January 2020. It's a platform that helps students practice issues and learn the skills they need for technology jobs. InterviewBit helps you polish your skills and get ready for the job, whether you are a fresh college graduate or a professional in work. It is free, and it provides a structured and engaging approach to the preparation for interviews, just like a personal coach.

InterviewBit They also have contests and a system that matches the company. Based on one's skills and preferences, they connect users with the right companies worldwide and do everything necessary to ensure that the user gets their dream job. InterviewBit is home to more than one million registered software developers with more than 300k active monthly users.

Over 600 global aspiring companies work with InterviewBit to meet their hiring requirements including Google, Uber, Amazon, Facebook, Flipkart, Myntra and Dunzo. InterviewBit rolled out a new product, its online learning academy, in April 2019 to bridge the gap between the Indian technical education system and the actual needs of the industry. The academy initially started with the name IB academy but later the name was changed to Scaler Academy.

Founders Scaler Academy (together with InterviewBit) is founded by Anshuman Singh and Abhimanyu Saxena alums of IIIT Hyderabad.

Anshuman previously worked at Facebook where he led the team to build the Messenger feature and scale it out. Anshuman also formed part of the four-member landing team that set up Facebook's London oice. He is a competitive programmer and a two-time World Finalist in ACM ICPC. Abhimanyu led a team that designed the entire front end of NYC-based retail marketplace Fab.com. A seasoned entrepreneur, while still in college Abhimanyu co-founded his first enterprise.

Scaler Scaler Academy is an online tech-versity for the country's top 1 percent software developer.

Through live classes delivered by tech leaders and subject matter experts, we oer an intensive six month computer science course. By oering a modern curriculum with exposure to the latest technologies, the meticulously structured program enhances the software professionals' skills. Scaler is an InterviewBit product.

Mission & Vision Scaler Academy is an online accelerator programme, which eectively

The company has helped the young professionals improve their chances of

enhances software professionals' coding skills. They teach all the relevant

working with leading technology companies via InterviewBit. They've

skills needed in software jobs to their students, mentor them to crack

changed the lives of more than 4000 young professionals since 2015 by

recruitment processes and also provide them with references to the best

helping them get their dream jobs in leading technology companies.

opportunities in the software industry around the globe.

Realizing early that people with whom they engage are capable, given the

Academy students spend an average of 3-5 hours per day on the platform,

right guidance, of achieving even greater things. The only thing missing in

learning and putting their skills into practice. They give their students

the picture was access to instructors and mentors, who would not only

access to over 400 working professionals from top software companies

teach them new skills but would also guide them in their careers. That led

including Facebook, Amazon , Google, Directi and Microsoft among others

in April 2019 to the launch of Scaler Academy. They strongly believe that if

who act as instructors, mentors, teaching assistants and career coaches.

there is a bridge between their theoretical knowledge and industry-specific

Some of the people who guide Scaler students as mentors are renowned

skills, capable individuals can build their dream careers. And it's just that

leaders such as Bhavin Turakhia (CoFounder and CEO of Directi Group and

Scaler Academy does.

Zeta), Rajan Anandan (ex-APAC Head of Google), and Jason Goldberg (CEO of Fab.com).

Investors Scaler Academy (along with InterviewBit) is backed by marquee investors: • Sequoia Capital • Tiger Global • Global Founders Capital • Rocket Internet They have raised 21.5 million USD in investment to date and are operationally profitable.

2

The Company D E PA RT M E N TS

WORKFLOW & HIERARCHY

Departments TECHINCAL

MANAGEMENT

DESIGN

OPERATIONS

STRATEGY

TALENT ACQUISITION STUDENT SUCCESS TEAM

MARKETING AND GROWTH

FINANCE

SALES

INSTRUCTORS

TECHNICAL They shoo all the bugs away. The coder gang comprises all the software engineers that take care of all the company's products. The team includes backend and frontend engineers responsible for developing the new features, maintaining the company website etc.

OPERATIONS Their aim is to ensure smooth operation of the business by coordinating among all stakeholders. They are working with other internal teams to enable prompt and clear communication between Mentor and TAs. They are also responsible for collecting feedback and allowing the team to evolve the oering continuously resulting in a smooth user experience.

FINANCE They work with the highest ethical and business integrity by diligently adhering to financial stewardship and regulatory compliance. Their robust financial technical competence ensures we are a valued business partner in supporting the company’s student-centred vision and mission.

STRATEGY They work on all things under the hood - new products, innovative tweaks to existing products, as well as future horizons of growth. Working closely with the founders and functional leaders, the strategy team transforms the best ideas into scalable business opportunities.

MANAGEMENT

STUDENT SUCCESS TEAM

The management team has the department of the admin and the people. They

Their north star is amazing student experience. Therefore, they work as a

do everything they can to keep the company together from managing the

point of resolution for all the students and make sure they have all the

company expenses to delivering the best company experience to the

resources and the support to succeed. They are the students’ advocates

employees. They always work with the first approach of an employee, which is

and voice for other internal teams.

why they are called the team of 'people.' They live by "hire, nurture and retain" mantra. They are dedicated to staffing, learning and development and a diverse and inclusive culture. They are the ones who always keep the pantry filled with stunning snacks.

SALES B2B: Their goal is to make sure of the availability of vacancies in the partner companies as and when the candidates graduate. They work as a bridge between hiring companies and the Students.

DESIGN

B2C: The team can always be spotted with a cellphone reaching out to

The ones who always provide logos in different dimensions to other

millions of students and making them aware of the product. They clear all

departments. They are highly obsessed with perfection, and are greatly

the doubts related to the academy and convert them into potential

disturbed by the misuse of colors and fonts. They spend days just choosing the

customers. They work as a bridge between Scaler and the Students.

best red shade for the call to action button. The team is responsible for setting the company onto the market as a brand. They 're also responsible for understanding users' pain points and creating better experiences for them. Not

MARKETING

only are they rolling out a feature but keeping iterating for a better user

The team is always focused on generating kickass ideas to put out the

experience. They focus not only on making the product look visually good but

brand before the people. The team comprises the growth and the PR team.

also good in functionality. can always be seen brainstorming and either creating

They build strategies on how to keep the users engaged and how can they

wireframes and user interfaces or google ads and creatives.

reach out to more people offline and online channels like Youtube, Instagram, Facebook, Twitter and LinkedIn etc

TALENT ACQUISITION The team is responsible to hire the best talent who add a lot of value to the

INSTRUCTORS

company. They can get to know about a person even without seeing them and

They are the frontliners of the academy. The instructors take everyday live

spending just a few minutes on the call. Their mailbox is always stuffed with resumes and cover letters.

lectures, set problems for the students and guide them throughout the journey.

Internal workflow Analysing the problem

Building Solutions

Iterate

By feedback collected

On the basis of the research,

If something goes wrong, or can

from various teams such as

the team then along with

be improved, team then reworks

marketing, operations, student

the help of other teams tries

on a better version

success, etc. or new strategies

to build up a solution

Discussing the Problems

The concerned teams discuss the problems and try to find a

Test

Carry out various tests like user testing, A/B testing etc.

solution for it

Research

The concerned team then carries out various researches and studies to reach to a solution

Launch

3

Design PRODUCT DESIGN

UX DESIGN

UI DESIGN

Product Design Product Design is about the whole process of creating usable products and experiences, starting with defining the problems facing real people and thinking about possible

Strategy Stakeholder Project Goals Brand Strategy Project Success

Discovery Requirements Analytics Content Audit User Interviews Surveys

Analysis Use Cases Personas Story Boards Experience Map Workflow Diagram

Design Mood Board Site Map Sketches Wireframing Prototyping User Testing

Production Prototyping BETA Launch User Testing Release/Launch

solutions. In the end, that will lead to the best design. In fact, product design can be classified into two types: digital, and physical.

Product designers in a company come up with different products according to a business and users needs. It involves a holistic approach of building a new product from beginning to end which includes different steps and processes. This includes everything from doing market research, identifying problems , developing products, designing informed solutions — and all in between. Product Design is the intersection of the different disciplines of UX design which aim at creating modern digital products. A Product Designer is a connection between marketers, managers and developers. Product work never stops and Product Designers always keep an eye on the product long after the first version has been released, and continue to do so after researching the data and studying the user interaction with a product.

Design & Development Growth Strategy

Prototype MVP

Ideation Digital Product Value Proposition

Concept Proof

UX Design Besides the management & strategy one of the major product design segments is user experience. User Experience or the UX give users meaningful and relevant experiences. This involves the design of the entire product acquisition and integration process including branding, design, usability and functional aspects. UX deals with the process of acquiring and integrating a product including branding, design, usability and functional aspects. It is a story that starts before even in the hands of the user the device is in. A good user experience is one that meets the needs of a particular user in the specific context in which he or she is using the product. UX includes user research, persona creation, wireframe design and interactive prototypes as well as design testing. These tasks can vary greatly from one organization to another, but they always demand that designers be the advocate of the users and keep the needs of the users at the center of all design and development eorts. This is also why most UX designers work in some form of user-centric work process and continue to channel their best-informed eorts until they optimally address all relevant issues and user needs.

Empathise

Iterate

Define

Understand Context of use

Ideate

Prototype

Specify User Requirements

Design Solutions

Evalute against Requirements

UI Design User interface ( UI ) design is the process of creating interfaces with a focus on looks or style in software or computerized devices. Designers aim to create designs that will be easy to use and pleasurable for users. UI design usually refers to graphical user interfaces but also includes other interfaces, such as voice-controlled ones. The design of user interfaces is a craft that involves building an essential part of the user experience; users are very quick to judge usability and likeability designs. Designers focus on building users interfaces will find that they are highly usable and eective. Thus, a thorough understanding of the contexts in which users will find themselves is crucial when making those judgments. Often confused with UX design, UI design is more concerned with a design 's surface and overall feel, while the latter encompasses the entire spectrum of user experience.

Visual Design User Experience Design System User Interface Brand Guide

UX Design v/s UI Design Accessible

Useful

Valuable

Buttons

Satisfiable

Desirable

Convenient Credible

Color Scheme

Content

Forms

Images

Layout Typography

4

Scaler Design MY TEAM

MY ROLE

My Team I am extremely fortunate to have the opportunity at InterviewBit to work with such an amazing team of creative minds. The design department was small and consisted of three full-time members each with expertise in their own field. The department worked in sync with other departments such as tech and marketing to better meet their requirements and build the products and the brand.

THE BOSS LADY

THE RICH KID

THE PERFECTIONIST

Shruti Kartikey

Seethal Krishna

Yashverdhan Tiwari

• My Mentor • A Super Manager • Great artist • Bundle of knowledge • Super Jolly • :unamused: Fav reaction

• Owns an in house Lamborghini • Automobile & Apple enthusiast • Great UX Applications • Happy Vibes

• My Co-partner in the design system • Great Aesthetic • Great Researcher • Implementing things to perfection

My Role I joined InterviewBit as a Product Design Intern. My role was to understand the existing products, work on the experience as well as on the visual side of it, build new features, handle creative social media, inside brand collateral, etc.

My time here in InterviewBit was a complete package and in collaboration with various departments such as Tech, Marketing , Sales, Growth etc. I got to work on many things. Every task was a new learning experience as my seniors were total enthusiasts. I was given various opportunities in various fields. My main tasks would include research, competetive analysis, designing solutions for the existing problems, creating interfaces and prototypes.

Design Thinking

+

Experience Design

Interface Design + Graphic Design Graphic Design = Summing up my 6 months

Projects

1

Design System ABOUT DESIGN SYSTEM

NEED AND USAGE

I M P L E M E N TAT I O N

DESIGN SYSTEM

What is it?

A design system is a collection of reusable components that can be assembled together

Patterns

People

to build any number of applications, guided by clear standards. Design systems provide a convenient, centralized and evolving map of the known product territories of a brand with directional indicators that will help you explore new areas.

It's a bridge between the designer and the developer. No library, no style guide, no pattern library. Actually, it's all this and so much more. A Design System is the single

Tools

source of truth grouping all the elements that will enable the teams to design, realize and develop a product.

The system is composed of elements tangible and non-tangible: • Designer Tools, Patterns, Components, Guidelines • Some abstract elements such as brand values, shared ways of working, shared thinking

Guidelines

Brand

and shared convictions

Identity

Principles

Best Practices

• Colors

• Brand Values

• Accessibility

• Fonts

• Purposes

• What is UX

• Images

• Objectives

• Trainings

• Sounds

Components & Patterns

Functional Documentation

Design + Development

Technical Documentation

Need & usage A Design System 's fundamental purpose is to facilitate teamwork. There are several people who work on the same project. The teams are continuing to change and hiring new employees too. The probability of creating inconsistencies in the designs in such cases would be very high. Therefore a design system is necessary to null it out so that all people related to the company, the employees and the stakeholders are on the same page.

“

Design is more important than ever. Design scales.

But it scales only with a DESIGN SYSTEM.

“

Components

Buttons PRIMARY CTA SECONDARY CTA

The Design system includes many divisions and it may vary from company to company

Buttons are used for interface actions. These invoke the user to take an action and hence also called call to action buttons

what all is to be included in the design system depending on who will be going to use it.

• Purpose and Values : It is necessary to brief out the goals so that everyone is on the

Alert

same page. Some guides and ideas are set out according to the brand objective so that

Danger Alert!

we’re designing does not differ from these key values

Success Alert!

• Design Principles: Design principles are the guiding sentences that helps the teams to reach the purpose of the product • Brand Identity & Language: This comprises the visual guidelines of a brand and is to be

Informs user about important changes or conditions in the interface. Used when need to capture user’s attention in a prominent way.

portrayed visually. It includes the usage of fonts, colors, patterns, shapes, icons, illustrations,animations, photography etc.

Badge

• Components and Patterns: Mostly used in designing the interfaces, it creates a consistency if we have a set of components. What is there on the home page should be there on the other subsequent pages too. The style and look should not differ. It includes components like cards, lines, buttons, menus, dropdowns etc.

This is a Badge Badges are used to inform users of the status of an object or of an action that’s been taken.

Checkbox

Cards

Accordion No selection

This is a card

This expands on click

Selected State Cards are shadowed surfaces that display content and actions on a single topic. They should be easy to scan for relevant and actionable information.

Definition Lists

Checkboxes are used to let a user choose one or more options from a limited number of options

Collapsible is a disclosure component used to reveal additional content. It contains a heading, followed by any additional content that is revealed on click.

Dividers

Icons

Name

College

Line below this is a divider

Riya Yash

NIFT Jodhpur NIFT Delhi

Line abovr this is a divider

Definition Lists are used to display name/value pairs such as terms and definitions. Particularly useful for glossaries.

Dividers are used to represent thematic breaks between paragraph-level elements. Visually, they look like horizontal rules or lines.

Icons are used to provide additional meaning or in places where text label doesn’t fit. These are graphical representations

Slider

Modal

Spacer This is a MODAL

Range Slider lets user specify a numeric value using a slider which must be no less than a given value, and no more than another given value.

Modals are used to display content that temporarily blocks interactions with the main view of an application

Spacer component is used to give additional white space between two components in an interface.

Initial Situation InterviewBit, initially was a stand alone product when it started but later on, it launched its other products as well. One of the products, i.e the IB academy was launched in april 2019 and was later renamed as the Scaler Academy with a new branding. The branding InterviewBit followed and that of scaler were completely different.

There was a new site for scaler but the dashboard was migrated from InterviewBit to scaler without any design changes.

PROBLEMS • There are currently no set of detailed defined guidelines on how to use the brand. The current guidelines consist only of logo use, first and secondary color palette introduction • There are no details of which colour, where and when to use. Cases of text and colors not used properly • There was no change in the Dashboard design when the dashboard was migrated from InterviewBit to Scaler. It was conceived according to the guidelines of InterviewBit • Rapidly evolving products and features and the many people who work on them create a lot of inconsistency • If a new person joins the team, they don't have a solid background on what ground to start the work.

Starting the Design System Since it's a never ending process and a design system is never complete because

I have been working on this project with one of the seniors from my team. We began with

of the iterations to make it better and better, we started with phases in which we

the most important and time-consuming subject which was the colors.

will be rolling out. We followed a process: Step 1: Individual Research Once we decided on what to start we researched on our topics individually. We referred

Listing the Topics

to blogs, research papers. We jot down our inferences on the basis of the secondary research.

Step 2: Discussion and integration

Research

Next, we discussed all the points we researched and integrated them together Step 3: Reviewing the existing We reviewed the existing color palette of the brand and based on our research tried to

Implementation

find out what problems are being faced or can be faced in future if the same colors are used. We tried to find the blockers Step 4: The iteration and experimentation

Cross discussions

We started with the experimentation and the iteration of the colors. We divided the colors into two categories, the greyscale and the primary and the secondary palette Step 5: Delivering the first draft Once the first version of the greyscales and primary / secondary colors was compiled, we

Iteration

tried them out and finalized them on various end-use areas. We provided our first draft which was discussed with the team afterwards. The team members mentioned just a few points and doubts and we looked at them and tried to resolve them in the next draft

The Color System

PRIMA RY C OLO RS

SECONDARY PALETTE

Initial Color Palette

Problems & Solutions There were various problems with the existing color Palette which we rectified through various testing methods.

THE YELLOW The yellow used was initially: #DFC600

To increase the contrast we experimented on other shades of yellow and

During testing we found the yellow looked pretty dull compared to the scaler

found Golden Poppy #FEC601.

blue which was our brand 's main color. In order to maintain the significance

When tested with scaler blue #0041CA the contrast ratio came out to be 5,

of each of them it was necessary to have the same intensity for all of them.

which was better than that of the previous yellow.

When evaluating # DFC600 for contrast ratio with the major color i.e. Scaler Blue # 0041CA the contrast ratio was 4.6

THE RED This was the most diicult color to work on since it called for a lot of actions. This was the major reason to get landing page conversions.

Previously this color was Fiery Rose # FF516D

We experimented with lots of shades and ended up reaching a conclusion for Apple

When used with the core color, Scaler blue, again the intensity was not that great. The

Candy # E21032.

contrast ratio was below average too. The Ratio came out to be 3.1 which was very

Since the color needed to be used for Call to Action, Apple candy's contrast ratio was

less as compared to apple candy.

better than Fiery Rose's on a white background.

When Fiery Rose was tested on the homepage, it gave negative results

THE GREEN In the existing Palette there was no success color. Hence we tried shortlisting some of the green colors which would match the intensity of Scaler Blue, Golden Poppy and the Primary CTA Color. Here were a few options which we shortlisted

HARLEQUINN GREEN

FINAL COLOR

THE GRAYSCALE It was a very tidy task to compile the grayscale, as we had to get through a lot of iterations to get the perfect palette of grays. For the desired component, we tested each and every color of the palette to check whether it suits well or not. It's not supposed to be that we add too many colors that aren't even differentiable from one another, creating a lot of confusion. For our palette, therefore, we had to get a perfect number of colours. Instead of going for a black grayscale, we decided to add to each of them a hue of our core "scaler blue" colour. Hence, we calculated each shade to get the best balance of hues, blacks and whites.

“

When we use texts with a tone of some color we are giving more opportunities to have more harmony with their environment

“

The first one has black color #000000 and the other one has a very dark blue color #021028. They both look black but they’re not. Both of them have same opacity but different results, One is Gray, the other is Gray Blue

#000000

#021028

THE GRAYSCALE

Why was this selected?

Pure black text can cause eye strain on white backgrounds when users read the text

A study found that "black text on a white background over-stimulates the OFF ganglion

over an extended period of time. White is 100 percent bright in colour, and black is 0

cells while white text on black background over-stimulates the ON ganglion cells." The

percent bright in colour. Such disparity in color brightness creates intense light levels

study concludes that "the striking eects of contrast polarity suggest that reading black

that, when reading text, overstimulate the eyes. That makes it harder for their eyes to

text on white background might not be advisable."

adapt to the brightness

Set 1:

Set 2:

Lorem ipsum dolor sit amet,

Lorem ipsum dolor sit amet,

Lorem ipsum dolor sit amet,

Lorem ipsum dolor sit amet,

consectetur adipiscing elit, sed

consectetur adipiscing elit, sed

consectetur adipiscing elit, sed

consectetur adipiscing elit, sed

do eiusmod tempor incididunt

do eiusmod tempor incididunt

do eiusmod tempor incididunt

do eiusmod tempor incididunt

ut labore et dolore magna

ut labore et dolore magna

ut labore et dolore magna

ut labore et dolore magna

aliqua. Ut enim ad minim

aliqua. Ut enim ad minim

aliqua. Ut enim ad minim

aliqua. Ut enim ad minim

veniam, quis nostrud

veniam, quis nostrud

veniam, quis nostrud

veniam, quis nostrud

exercitation ullamco laboris nisi

exercitation ullamco laboris nisi

exercitation ullamco laboris nisi

exercitation ullamco laboris nisi

#000000 Background

#FFFFFF Background

#021028 Background

#F4F6F9 Background

#FFFFFF Foreground

#000000 Foreground

#F4F6F9 Foreground

#021028 Foreground

This set cause less strain and provides a better readbility to the user. It has an essenece of the brand color which keeps the greyscale in harmony with the primary colors

Final Color Guide THE BLUE FAMILY Scaler 's core colors are harmonious, distinguishing the brand and maintaining consistency with product array & interfaces. They belong to the Scaler Blue Family and are fresh, unique, accessible and expressive towards vast demographic. Our logo colors are the blue family which support our brand presence across all products and experiences.

Scaler Blue

The Scaler Blue is our hero color. It depicts logic, Intelligence, thoughtfulness & Integrity.

It is the primary color for communication and can be used for action, links & active states.

SB60 #0041CA

True Blue TB60 #006ADA

The True Blue is one of the primary color, it can be used for creating depth in visual assets & accompany Scaler Blue in brand communication.

Dodger Blue DB60 #0F8CFF

The True Blue is one of the primary color, it can be used for contrast color in illustrations as well as highlighting & hover eects & accompany Scaler Blue in brand communication.

THE BLUE FAMILY- SWATCH VALUES

The white text indicates it's legibility on a background color

Scaler Blue HEX CMYK RGB

True Blue HEX CMYK RGB

Dodger Blue HEX CMYK RGB

SB90

SB80

SB70

The oxford ink indicates it's legibility on a background color

SB60

SB50

SB40

SB30

SB20

SB10

#001A50

#002779

#0034A1

#0041CA

#1954CF

#4C7AD9

#7FA0E4

#B2C6EF

#E5ECF9

100, 93, 34, 41

100, 93, 23, 13

100, 90, 2, 1

90, 78, 0, 0

86, 71, 0, 0

72, 52, 0, 0

49, 31, 0, 0

28, 16, 0, 0

91, 81, 53, 70

0, 26, 80

0, 39, 121

0, 52, 161

0, 65, 202

25, 84, 207

76, 122, 217

127, 160, 228

178, 198, 239

0, 13, 40

TB90

TB80

TB70

TB60

TB50

TB40

TB30

TB20

TB10

#002A57

#003F82

#0054AE

#006ADA

#1978DD

#4C96E5

#7FB4EC

#B2D2F3

#E5F0FB

100, 88, 37, 34

100, 85, 21, 7

95, 74, 0, 0

83, 60, 0, 0

80, 52, 0, 0

66, 33, 0, 0

47, 19, 0, 0

27, 9, 0, 0

8, 2, 0, 0

0, 42, 87

0, 63, 130

0, 84, 174

0, 106, 218

25, 120, 221

76, 150, 229

127, 180, 236

178, 210, 243

229, 240, 251

DB90

DB80

DB70

DB60

DB50

DB40

DB30

DB20

DB10 #E7F3FF

#063866

#095499

#0C70CC

#0F8CFF

#2797FF

#57AEFF

#87C5FF

#B7DCFF

100, 84, 34, 22

98, 74, 10, 1

84, 55, 0, 0

73, 43, 0, 0

69, 36, 0, 0

56, 22, 0, 0

41, 12, 0, 0

25, 5, 0, 0

7, 1, 0, 0

6, 56, 102

9, 84, 153

12, 112, 204

15, 140, 255

39, 151, 255

87, 174, 255

135, 197, 255

183, 220, 255

231, 243, 255

COMMUNICATION AND FUNCTIONAL This is the primary color set for communication and functional framework across product and interfaces. The Blue family serves in the form of visual assets, action, links and other primary highlighters through communication in all emotional & functional uses throughout the product. The Inks will provide significant contrast to the primary, secondary and tertiary texts. NS2 (Cultured) & white is used mainly for background & space.

Communication & Accent

Scaler Blue #0041CA

Background & Space

True Blue #021028

Dodger Blue #E21032

Inks

Oxford Ink #021028

Indigo Dye #324766

Slate Ink #677993

Cultured

#F4F6F9

White

#FFFFFF

SECONDARY AND SERVICE COLORS The secondary color is Golden Poppy which serves as the accent color in branding & communication & acts as a notification and update color across functional aspects of the product. In service, not only does Apple Candy serve as the primary color for action in all emotional and functional communication, Apple Candy's scale also acts as a color of alert and error. Lime Green has the primary purpose of connecting in all respects, Success color.

Secondary

Action & Service

Branding & Notice

Action, Alert & Error

Golden Poppy

Apple Candy

#FEC601

Success

Lime Green

#E21032

#17CC10

The white text indicates it's legibility on a background color

Golden Poppy HEX CMYK RGB

Apple Candy HEX CMYK RGB

Lime Green HEX CMYK RGB

GP90

GP80

GP70

The oxford ink indicates it's legibility on a background color

GP60

GP50

GP40

GP30

GP20

GP10

#654F00

#987600

#CB9E00

#FEC601

#FECB1A

#FED74D

#FEE280

#FEEDB2

#FEF9E5

48, 56, 100, 38

37, 47, 100, 15

22, 36, 100, 1

0, 22, 100, 0

0, 19, 96, 0

1, 13, 81, 0

1, 8, 60, 0

1, 4, 36, 0

1, 1, 10, 0

101, 79, 0

152, 118, 0

203, 158, 0

254, 198, 1

254, 203, 26

254, 215, 77

254, 226, 128

254, 237, 178

254, 249, 229

AC90

AC80

AC70

AC60

AC50

AC40

AC30

AC20

AC10

#5A0614

#87091E

#B40C28

#E21032

#E42746

#EA576F

#F08798

#F6B7C1

#FCE7EA

37, 96, 79, 58

28, 100, 91, 33

20, 100, 93, 12

5, 100, 87, 0

4, 97, 71, 0

3, 81, 42, 0

1, 59, 23, 0

1, 34, 11, 0

0, 11, 3, 0

90, 6, 20

135, 9, 30

180, 12, 40

226, 16, 50

228, 39, 70

234, 87, 111

240, 135, 152

246, 183, 193

252, 231, 234

LG90

LG80

LG70

LG60

LG50

LG40

LG30

LG20

LG10

#095106

#0D7A09

#12A30C

#17CC10

#2ED127

#5CDB57

#8BE587

#B9EFB7

#E7F9E7

84, 41, 100, 43

87, 27, 100, 16

82, 8, 100, 1

72, 0, 100, 0

69, 0, 100, 0

60, 0, 89, 0

44, 0, 64, 0

27, 0, 37, 0

8, 0, 11, 0

9, 81, 6

13, 122, 9

18, 163, 12

23, 204, 16

46, 209, 39

92, 219, 87

139, 229, 135

185, 239, 183

231, 249, 231

THE NEUTRAL FAMILY Neutrals play a complex role across the functionality of the product, and are widely used in typography and communication components. The Dark-tones contrast used to discern the similarity between texts. The Mid-tones are used for iconography, tables and other data forms. They can be used in components for shadowing & depth development. The light tones that are used in the background to serve cleanliness and separator between the modules.

Dark-tones / Inks

Mid-tones

NS9

NS8

NS7

NS6

NS5

NS4

Oxford Ink

Indigo Dye

Slate Ink

Pewter Blue

Casper

Waikawa

#021028

#324766

#677993

Light-tones

Space

NS3

NS2

NS1

Solitude

Cultured

Alice Blue

#EAEFF4

#91A1B7

#F4F6F9

#F3F7FF

White

#FFFFFF

#BAC6D8

#D6DEE5

THE NEUTRAL FAMILY- SWATCH VALUES

The white text & the oxford ink indicates it's legibility on a background color

Dark Tones

NS9

Oxford Ink

NS8

Indigo Dye

NS7

HEX

#021028

#324766

#677993

CMYK

91, 81, 53, 70

87, 72, 38, 24

65, 48, 29, 4

RGB

2, 16, 40

50, 71, 102

103, 121, 147

Mid Tones

NS6

Pewter Blue

NS5

Casper

NS4

HEX

#91A1B7

#BAC6D8

#D6DEE5

CMYK

45, 31, 18, 0

26, 16, 7, 0

15, 8, 6, 0

RGB

145, 161, 183

186, 198, 216

214, 222, 229

Light Tones

NS3

Solitude

NS2

Cultured

NS1

HEX

#EAEFF4

#F4F6F9

#F3F7FF

CMYK

7, 3, 2, 0

3, 1, 1, 0

3, 1, 0, 0

RGB

234, 239, 244

244, 246, 249

243, 247, 255

Slate Ink

Waikawa

Alice Blue

Call To Action Button CTA, the call to action button is the most important component of a webpage.

The best CTA’s provide three key benefits :

Call-to - action (CTA) buttons are the buttons that are used on the website and the landing pages to guide users in their conversion to the goal. It is the part of the landing page that the user has to click to take the action that you want them to do.

There are two major steps for a company i.e to attract the customers to their page

Guidance

Information

Anxiety Relief

Instructing users what to do

Explaining what they’re gonna get

No doubt or perceived risk of taking action

and second, to convert them into potential buyers. If the visitors are visiting the page and not converting then the effort of designing such a webpage goes into vain.

Consumers go through a six-step process before clicking a CTA on an email or landing page: 1. Arrest attention 2. Build connection 3. Build problem 4. Build interest 5. Build suspense 6. Transfer momentum The best CTA’s feel uncomfortable and unobtrusive. Making rounded corners is a wide practice as studies have shown people are unfavorable to sharp edges. There is a common opinion that people subconsciously overlook sharp corners, as they may point to some sort of threat. And another important thing about form, if we want people to click, we should give them something that can be clicked on. To allocate button clickability, use shadows or other graphic techniques.

On our research, we gathered a few points which we kept in mind while redesigning the new CTA 1. Value proposition offered to the user 2. Persuasive text 3. Eye grabbing color 4. Enough white space around the CTA 5. Positioning the CTA (usually users see the page in F shape) 6. Visual Direction to grab the attention directly to the CTA 7. Clear indication what action to take in case of multiple CTA

Equal Visual Weight Submit

Cancel

Visual Distinction Submit

Cancel

Building the perfect CTA There are various CTAs present on the webpage

Web Color

Ideal CTA Color

Lot of Blue

Orange

PRIMARY CTA

Lot of white

Red

It’s the major CTA which drives a user to take a particular action i.e whatever the

Lot of black

Green

company wishes to sell primarily. It is meant to encourage the most desired action a user wants to take.

SECONDARY CTA A secondary CTA is a call-to - action that provides the secondary action the company

Since our theme is mostly around the hues of blues and white, Apple Candy is the true CTA. It's on the Red hue and have high contrast with the Scaler Blue. In color wheel Apple Candy and Scaler Blue forms Triadic along with a green hue and are evenly spaced on color wheel that creates a perfect contrast in each of these colors

ideally wants visitors, prospects, or leads to take, with an alternative conversion opportunity or action. The secondary CTA is featured less prominently than the primary CTA, and it can be a great way to engage and capture people who might not find the oer appealing in the primary CTA. There should be a clear distinction between a primary and a secondary CTA so that the user doesn't make any error and compel them to take the right action. In order to get more conversions, we need to have an aesthetically pleasing and prominent CTA button. It only becomes prominent if we use contrasting colors. If our webpage has a light background, use dark colors for the CTA button, and vice-versa. If our button color has low-contrast with our web page background, its visibility will be poor, and not even user-friendly. So, the game here is to make the CTA so visible that even if a visitor quickly scrolls the web page, s/he will notice it.

Triadic Formation

USE CASE 1

Color we pick for CTA button needs to be same color as anything that's clickable.

S:92

S:100

Apple Candy

Scaler Blue

Here, we are picking Apple Candy as primary CTA color and Scaler Blue as Secondary CTA color. Since, Scaler Blue have nearly the same intensity & saturation level as Apple Candy, the Scaler Blue shouldn't be used in solid form beside the Apple Candy. Instead, it should be used in line CTA form. All the other clickable items will be defined in Scaler Blue such as Hyperlinks, Clickable icons, etc.

Primary CTA

Apple Candy

#E21032

Secondary CTA

Scaler Blue

#0041CA

Hyperlinks & Clickable Icons

Scaler Blue

#0041CA

Next, we will be showing you the landing page example

Image shows nearly same saturation levels of Apple Candy & Scaler Blue.

Curriculum

Community

APPLY NOW

LOGIN

where we have used the CTA and Hyperlinks.

Image shows compact version of landing page menu bar with Primary & Secondary CTAs.

CTA DEFINITION 4px corner

Here, we have defined CTA styling by three main sizes which should be in harmony viz A, B & C. LOGIN

APPLY NOW TO GET HIRED

LOGIN

APPLY NOW TO GET HIRED

A = X = 18px

A = Font size B = Horizontal Padding C = Vertical Padding In order to create the perfect harmony and ideal size for the CTA, the value of C should be greater than that of A than B i.e., C > A > B. This condition lies only in the case of Source Sans as CTA font.

If Font Size A = X px value, then the horizontal padding B = X-2 px &

32px

32px

32px

LOGIN

C = (X-2)*2 = 32px

APPLY NOW TO GET HIRED

B = X-2 = 16px 16px

vertical padding C = (X-2)*2 px. Here, the character spacing will be 64. The Specifications for Upper Case CTA will be mentioned in CTA

Ideal CTA for website interface

Types The corner curve will be 4px in all sizes.

(X-2)*2

C = (X-2)*2

However, if the font size is less than or equal to 14px: Corner curve - 2 px

B = X-2

LOGIN

A=X

APPLY NOW TO GET HIRED B = X-2

Font - Source Sans Pro Semibold Character Spacing - 0 Padding defined from the X values

The above rules will be followed on all CTA profiles.

UpperCase CTA - C > A > B

TYPES OF CTA BUTTONS

Apple Candy

Scaler Blue

#E21032

#0041CA 2px Border

We have defined 5 types of CTA for interface: APPLY NOW TO GET HIRED

BECOME A MENTOR

• Primary CTA • Secondary CTA

Source Sans Pro Bold White

Character Spacing: 64

Source Sans Pro Bold Scaler Blue

#FFFFFF

Character Spacing: 64

#0041CA

• Discard CTA • Success CTA

Primary CTA

Secondary CTA

• Disabled CTA NS4

Natural Hierarchy : Sometimes we’ll have other buttons on our

Harlequin

#D6DEE5

#17CC10

web page that are not our main call-to-action conversion buttons. Those buttons should be less attention-grabbing than our main CTA button.

DISCARD Source Sans Pro Bold NS8

ACCEPT Character Spacing: 64

Source Sans Pro Bold NS0

#324766

Character Spacing: 64

#FFFFFF

Our main call-to-action button should always be the brightest & prominent.

Success CTA

Discard/Reject/Cancel CTA

All the types of CTAs and their respective specifications are shown in graphics.

Source Sans Pro Semibold NS6

APPLY NOW TO GET HIRED

NS4

Character Spacing: 64

#91A1B7

Disabled CTA

#D6DEE5

CTA HYPERLINKS AND ICONS Source Sans Pro SemiBold

Hyperlinks will be defined in Scaler Blue color. The Hue of

Font Size: 16px | Character Spacing: 24

Blue hyperlinks side-step problems of accessibility for those

Scaler Blue

#0041CA

From Tier 3 College to Google

who suffer from the most common forms of colour-blindness.

I have been privileged to have been guided by people like Anshuman, Abhimanyu and looking forward to use these

Even if users have problems seeing colour, the character

learnings while building a strong career ahead! Getting to learn System Design topics from people having worked at top

spacing & boldness will make the difference. Same as the

tech companies and algorithms from people who have been

hyperlinks the clickable icons will be defined in Scaler Blue

View archived video of the onboarding session

color.

at ICPC World Finals is an altogether different experience.

200+ success stories here.

View Video

1. Example of to-do in to-do section of mentee dashboard

2. Example derived from students stories section on landing page

Hyperlinks & clickable icons specifications are shown in graphics.

Days

Name of the problem

Topic

Score

Solved By

Day 296

B Closest points to Origin

Heaps and Maps

200

488

Status

Answered

1.5px border Scaler Blue

SOLVE

#0041CA

3. Example of All problems in course section of mentee dashboard

Hyperlink & Clickable Icon

CTA BUTTON STATES Normal State

Focused State

Pressed State

APPLY NOW

APPLY NOW

APPLY NOW

Solid: #E21032

Solid: #EA5971

Hyperlinks will be defined in Scaler Blue color. The Hue of Blue hyperlinks side-step problems of accessibility for those who suffer from the most CTA Button isn’t a one-state object. It’s multi-state. And providing a visual feedback to the users to indicate current button state should be a top

Solid: #C10D2A Outline: #81091C

priority task. Below are the states for CTA Button: BECOME A MENTOR

BECOME A MENTOR

BECOME A MENTOR

Outline: #0041CA

Outline: #7598E2

Outline & Text: #0041CA

Text: #0041CA

Text: #0041CA

Filling: #EBF0FA

ACCEPT

ACCEPT

ACCEPT

Solid: #17CC10

Solid: #5EDB59

Normal State: Where button should look like a button.

Focused State: A visual feedback when user hovers over the button.

Pressed State: A helpful motion to acknowledge the user.

Solid: #13AA0D Outline: #0F880A

Disabled State: An unusable button, but with possible action.common forms of colour-blindness. Even if users have problems seeing colour, the character spacing & boldness will make the difference. Same as the hyperlinks the clickable icons will be defined in Scaler Blue color.

DISCARD

DISCARD

Solid: #D6DEE5

Solid: #EAEFF4

Solid: #13AA0D

Text: #324766

Text: #324766

Outline: #0F880A

Hyperlinks & clickable icons specifications are shown in graphics.

DISCARD

Text: #324766

Disabled State APPLY NOW TO GET HIRED

Solid: #D6DEE5 Text: #91A1B7

CTA HYPERLINKS AND ICONS STATE Links should change style on mouse-over, emphasizing to users that they are clickable & users know which links they have clicked on by toning done to lighter hue, or red-shifting the colour.

Like CTA Button States, Hyperlinks and Clickable Icons have

Normal State

Focused State

Post-click State

View Video

View Video

View Video

Text: #0041CA

Text: #021028

Text: #0F8CFF

Text: #0041CA

Text: #021028

Text: #0F8CFF

following states: Normal State: Should look like normal hyperlink/icon in scaler blue.

Focused State: Hue changing feedback when user hovers.

Post - Click State: Acknowledgement by toning to different hue/color.

CTA ACCESSIBILTIY Button UX design is always about recognition and clarity. Our CTA buttons should always have a healthy white space surrounding them. White space helps call the users’ attention to your button and helps it stand out. Here are the examples

NS4

REVISIT CLASSROOM

GET STARTED

Fail

where CTA buttons have limited accessibility: CTA Buttons shown on NS4 background

NS0

REVISIT CLASSROOM

GET STARTED

Pass

CTA Buttons shown on NS0 background

NS9

REVISIT CLASSROOM

Pass

CTA Button shown on NS9 background

GET STARTED

Pass

CTA Buttons shown on NS1 background

Scaler Blue Fail

REVISIT CLASSROOM

CTA Buttons shown on Scaler Blue background

NS2

REVISIT CLASSROOM

GET STARTED

Pass

CTA Buttons shown on NS2 background

CTA Buttons shown on True Blue background

CTA Buttons shown on NS3 background

GET STARTED

Pass

REVISIT CLASSROOM

Dodger Blue Fail

CTA Buttons shown on Dodger Blue background

NS8

REVISIT CLASSROOM

CTA Buttons shown on NS8 background.

True Blue Fail

REVISIT CLASSROOM

NS3

REVISIT CLASSROOM

GET STARTED

Golden Poppy Pass

CTA Buttons shown on Golden Poppy background. Mostly, used in branding purpose.

NS1

REVISIT CLASSROOM

REVISIT CLASSROOM

Pass

CTA ON DARK BACKGROUNDS Since Scaler primary colors are the hues of blues, there should be a case where CTA will have a definition on blues. Other than that we will observe the Apple Candy CTA on dark/navy color Background to check the accessibility.

Accelerate Your Tech Career

Accelerate Your Tech Career

Scaler is a 6 month immersive online program that helps you develop your coding skills and gets you your dream job at no

Scaler is a 6 month immersive online program that helps you develop your coding skills and gets you your dream job at no

upfront cost.

upfront cost.

APPLY NOW

LOGIN

Accelerate Your Tech Career Scaler is a 6 month immersive online program that helps you develop your coding skills and gets you your dream job at no upfront cost.

APPLY NOW

LOGIN

APPLY NOW

LOGIN

WCAG 2.1 CONTRAST CHECK FOR CURRENT CTA

WCAG 2.1 CONTRAST CHECK FOR CURRENT CTA

RESULTS OF APPLE CANDY CTA V/S REGULAR CTA

2

Interface Design A B O U T US PAG E

SUCCESS STORIES

SUCCSS STORY REVIEW

About us Page BRIEF & PROBLEM

USER RESEARCH

scaler.com was a single page website and all the information was available on the

I started with the user research of who are the probable users who would visit the

same page without any external links. This way there was no segregation of what

website and what kind of information they would be seeking from us. I made of list

was the primary information and what was secondary. The page was too long to

which was:

scroll and hence the user might end up leaving the page in between without

• College students ( 1st - 4th yr) who are looking to upskill themselves

reaching the end. Also there was no information available about the background of

• Recent college graduates who don't have a high paying job and they want to upskill

the company if a user wanted to know more about it.

themselves • Parents who are looking for courses for their kids

OBJECTIVE

• Recruiters who are interested in hiring students for their own company • People who are looking to join the company as interns or full time employees

An additional section/ page about the company was required to provide the user with more information about the company background and provide a validation.

NEED Scaler was an academy first of its kind in India, but looking at the success model, many other companies have started the same work and there was a lot of defamation to pull down scaler. There was no such piece of information which would bring out trust in the users. This was also required for SEO purposes. When a user searches for scaler on google, there was only one site page that was shown.

With the addition of an extra page, scaler would have multiple results when searched on google hence increasing the reach.

USER GOALS After this I wrote down the possible questions a particular type of user would have in mind or the type of information they might be expecting from the page

Identity

Student

Principles

Best Practices

Parents

• Who all are behind the company?

• What is the motive of the founders to start a company like this?

• How can they be of help to me?

• Why are they doing this without any upfront cost?

• Are they strong enough to guide me or teach me ?

• Validation of the company's existence?

• What if I join and a few days later the academy is closed?

• How to ensure it’s not a scam?

• How to ensure it’s not a scam?

Recruiters • What was the need to start an academy like this when college already exists?

Others • Who all are behind the company?

• How authentic is the company?

• Why should we hire students from here?

• How financially strong is the company?

• Is it authentic?

• How is the work culture?

• What is so special about scaler students?

• What are the perks and benefits if I join this?

• Who is the team behind the company?

• Who’d be the team I'd be working with if I joined them?

• How to ensure it’s not a scam?

On the basis of user goals, I proceeded towards the information that should be available on the page in order to achieve all the user goals.

MISSION AND VISION OF THE COMPANY

WORK CULTURE

To clear the idea of what are the values and beliefs of the company and on what

To portray our office culture and how we work as a team and our employees are our

ideologies it runs

biggest asset

WHAT WE DO & WHY WE DO

PERKS AND BENEFITS

Why was the company started, what was the motive, what are the problems that we

Except for an outstanding salary, how do we take care of our employees through other

are solving by our product, what is the need of a parallel academy when there are

perks and benefits, why should you join us

colleges TESTIMONIALS FOUNDERS

We do not just say but implement it too and our employees speak for it

Who are our founders, What is their background, Where have they been working before this and their qualifications

THE TEAM Who all are behind the well functioning of our company, who would be your leads once

INVESTORS

you join us

To provide a validation of financial backing, to invoke trust of users as major investors believe in us and that is what sets us apart from the other existing brands

CAREERS what all jobs are available, what if no jobs are available and you still want to give it a

SCALER IN MEDIA

shot

To make the users believe that it’s not a scam, many media houses have recognised us and our work and it is for real

CONTACT US In case of any queries where do you reach out to us, where are our offices based?

Wireframes & High Fidelity Prototypes

WIREMFRAME 1 Problems: Since this is a secondary page of information when auser would come to this he might refrain from going through a lot of tabs on a same page.

Users are comfortable in scrolling through the page then switching hence there are chances that they wont reach to other sections like our team, our investors etc.

HIGH FIDELITY PROTOTYPE 1

WIREMFRAME 2 Problems: Reduced the number of tabs on the right side and made the page scrollable but now there’s a lot of white space in this design and the visual weight doesn’t look balanced as space on the left is more than space on the right

FINAL WEBPAGE (ABOUT US)

FINAL WEBPAGE

FINAL WEBPAGE

HERO IMAGE OPTIONS

MOBILE SCREEN WIREFRAMES - ABOUT US

HIGH FIDELITY PROTOTYPE - ABOUT US

LIFE AT SCALER WIREFRAME

LIFE AT SCALER HIGH FIDELITY PROTOTYPE

MOBILE SCREEN WIREFRAMES - LIFE AT SCALER

HIGH FIDELITY PROTOTYPE - LIFE AT SCALER

WIREFRAME- CONTACT US

HIGH FIDELITY PROTOTYPE- CONTACT US

WIREFRAME- CONTACT US (MOBILE)

HIGH FIDELITY PROTOTYPE- CONTACT US (MOBILE)

This was discarded as the card occupied more space and the new design was space efficient

Success Stories OBJECTIVE The objective was to create individual pages of the top success stories in order to help in getting better results in SEO

USER GOALS I started off with writing what a user would be expecting from this page once they land on it. Hence I came up with the following pointers • Name of the student • Company in which the student is placed • From which college the student is?

• Which scaler batch does the student belong to ?

• Links to student’s social profile for validation • Other platforms where student has shared his success story • View other success stories Since there are so many students sharing their success stories, it’s not possible to create individual pages for all of them, hence the best 10 were selected and it was decided to create separate pages for them.

EXISTING PAGES

Wireframes & High Fidelity Prototypes

SUCCESS STORY LANDING PAGE WIREFRAME

SUCCESS STORY LANDING PAGE HIGH FIDELITY

SUCCESS STORY MAIN PAGE WIREFRAME

SUCCESS STORY MAIN PAGE HIGH FIDELITY PROTOTYPE

SUCCESS STORY MAIN PAGE MOBILE WIREFRAME

SUCCESS STORY MAIN PAGE MOBILE HIGH FIDELITY

3

Experience Design REFRGRAPH BLOCKER

SAC DASHBOARD

LIVE CLASSROOMS

Refgraph Blocker BRIEF

KEY PERFORMANCE INDICATORS

To create a blocker when the ref graph page is opened to ensure the status of

Our main goal of adding the blocker was to collect data from students whether their

referrals of a mentee

referral has started or not. If not, then where exactly did they get stuck.

We needed to understand if we able to successfully collect data from the pop up.

PROBLEM • The referral process happened between the mentee and the referrer offline, so scaler wasn’t able to keep a track • Many times referral was initiated but there would be some issues at the later stages so it was important for scaler to know that stage so that relevant action could be taken • Since scaler didn’t have any record so it was not able to help out a mentee for other referrals

This can be analysed by getting • Total number of referral which were marked “referral started from mentor side” VS the total number of referrals marked “YES/NO” by mentees. It will help us understand how much data we were able to collect.

• How many mentees saw the pop up VS how many took action on it.

• Those who marked “NO” how many are stuck at what stage. (It will help us understand, where in the process the mentees are getting stuck the most)

Wireframes & High Fidelity Prototypes

WIREMFRAME 1 Problems: • Two step process to mark one company • Doesn’t shows the next process and what has been done • So many CTA buttons on a single screen

Hence this was rejected

WIREMFRAME 2 Problems: • Not in a list format • No process or success mark

Hence this was rejected

WIREMFRAME 3 • Show status by color after the action has been taken • Shows the user are the steps hence gives a better clarity how the process goes • Saves space as the inner options only pop up when the above main option is selected

This solved all the problems and provided a better experince hence this was selected finally

HIGH FIDELITY PROTOTYPE

SUCCESS RATE: Data collected before this design: 1194 Data collected after this design: 4544

Student Achiever Club Dashboard OBJECTIVE The objective was to create a dashboard for a newly launched program, i.e The

WHAT TO DISPLAY AND WHY? •

scaler achievers club, a campus ambassador program to promote scaler in their

Title and description of the task: For basic information and a better understanding of the task and what has to be done

respective campuses.

•

When was the task added

The campus ambassadors would be given tasks by the scaler community manager

•

Last date to submit the task: To aware the user of when to submit the task

to promote it on their campus. All the tasks would be listed on their dashboard. The

•

Rewards for completing the task: What would be the benefit of completing the task

following information was to be displayed on the dashboard

•

The number of fellow campus ambassadors who have completed the task: To invoke the urge and motivation to complete the task

•

Status of the task: To get a clear status of in what stage of evaluation is the task

•

Remark: What has been the remark/view after the evaluation of the task

•

Leaderboard: To highlight the top performers

•

Stats board: To give the stats of the user at a glance

Wireframes & High Fidelity Prototypes

Live Interactive classrooms OBJECTIVE

STRATEGY

Make Live classes more interactive so that the mentees are able to interact better

•

Coming up with ideas on how we can increase interaction and live engagement.

with the instructor and fellow students thereby increasing the overall live

•

Go through different online courses and see how live classes go on. Unacademy,

engagement.

Vedantu Wave, Lido Learning, •

NEED The classes take place on a zoom, where the instructor provides the classroom link

Finalise together 5 ideas and think about what is the best implementation around it. Collect reference.

•

Measure roughly how does each impacts Live class engagement

•

Present to instructors and tech team for inputs.

before the class, and the student must log in to attend the class from the zoom

PROCESS

desktop app. He should attend the class from the same registered ID otherwise there will be no counting of the attendance. Since zoom did not provide many

As we had to bring out ideas individually, I carried out my research in four different

interactive features, it was decided to switch to another agora platform, where we can add custom features for better interaction according to our needs and convenience. It could also be integrated into the Dashboard.

Live teaching experience • Why? Increase attendance and live engagement.

• Optimize for 2 way interaction. Mentees and Instructors are able to talk to each other. More interaction in terms of learning a topic.

• In-class quiz.

parts •

Being the mentee myself and what do I expect for a better interaction and experience

•

Contacting real mentees what are problems that they face while attending a lecture and what features they’d like to be added

•

Interacting with the instructors to know the real time problems the face while taking classes

•

Checking out other platforms who host online classes to know how they’re better from us

Observations and Inferences FOR INSTRUCTORS • It’s difficult for them to search a student and unmute them in case they want to ask any doubt • As students ask questions in chat, they tend to mix with chat and sometimes they

SOLUTIONS/NEW FEATURES •

In class quiz/polls + Leaderboard (for better interaction of students)

•

Interactive whiteboard

•

Upvoting/downvoting chat comments (the most upvoted chat comments would be

miss out a few questions

FOR STUDENTS

shown to the instructor on priority) •

Send questions to Instructor before the class starts

•

Quick responses or reactions on chat messages and comments

•

Hotspot ( creating a zone where student can click on the screen shared by the instructor to answer a question)

• They don’t have a notes section, to write their observations • If they want to bookmark a particular section for later to review it, they don't have an option for that rather they’ll have to go through the whole video again

•

Notes section (write, screenshots)

•

Bookmark a point in live lecture and recorded too ( can add tags too for important topics like interview questions etc)

• If an instructor draws something on their screen and student wishes to save it in notes they’ll have to take a screenshot but that cannot be integrated in notes

•

written set of notes of the lecture)

• Could prepare themselves better if the already know what is going to be discussed in the class • Their questions go unnoticed at times

•

Pre lecture material

•

Resource library ( where a mentee can store and organise all the notes, transcripts, links and other resources provided by the instructor)

• Not able to view the chat while reviewing the lecture so sometimes the context is lost

Generating transcripts ( using AI automatically convert speech to text to provide a

•

Unmuting a student (the request pops up on the instructor screen to accept or reject the request)

Selected features for Version 1 QUESTIONING MENTEE

PROJECT ZIP AS RESOURCE

Mentee could be questioned in the following ways:

Even if a code editor is added, when teaching full stack / backend classes it will not

leaderboard. This will motivate them to join every class and engage in it

be possible to run code, so instructors prefer to use local IDE and share the screen.

• Quizzes

In such cases, instructors should be able to upload the project zip to the class,

• Polls

which will be part of the lecture notes again.

• Fastest finger first - Integrated with Polls • Objective type questions - Polls • In class live leaderboard • Performance of mentees in live class polls and quizzes should contribute to their overall

MOST IMPORTANT QUERIES RESOLVED FIRST • An option for mentees to upvote/downvote comments. Question Queue with most upvoted comments will be visible to the instructor • Quick Action Button for mentees: Explain Again Button, Raise Hand,Go slower/faster (we will keep in mind that it does not become overwhelming for the instructor) • Few reactions like thumbs up, thumbs down, etc.

BETTER MOBILE EXPERIENCE Mentees should be able to attend and interact with live/archived classrooms from their mobiles without facing any issues. We should design the experience keeping "mobile first" approach

BOOKMARK AN IMPORTANT SECTION While attending live a class or watching an archived video, mentee should be able to bookmark important sections of the lecture

LIVE CLASS EXPERIENCE IN ARCHIVED LECTURES Feature to attend a recorded class in near-live manner (we would have recorded all the interactions like polls, question, etc here so we can replay them again with

4

Coders Bit P R E S E N ATAT I O N D E C K

WEBSITE DESIGN

Branding colors and Mascots

Presentation Deck and Brochure

CodersBit Website

WEBSITE WIREFRAMES

WEBSITE HIGH FIDELITY PROTOTYPE

WEBSITE HIGH FIDELITY PROTOTYPE

WEBSITE HIGH FIDELITY PROTOTYPE

TWO STEP REGISTRATION MODAL WIREFRAME

V1

V2

FINAL

TWO STEP REGISTRATION MODAL HIGH FIDELITY

5

Brand Material GOOGLE ADS

B R A N D CO L L AT E R A LS

SOCIAL MEDIA GRAPHICS

Web Ads

Brand Collaterals

VISITING CARDS

VISITING CARDS

VISITING CARDS

Rishabh Jaroli Marketing

+91-9998887655 rishabh@interviewbit.com

www.scaler.com

Rishabh Jaroli Marketing +91-9998887655 rishabh@interviewbit.com

VISITING CARDS

IDENTITY CARDS

PROGRAM CERTIFICATE

has successfully completed

ON ATI UC

TRAN SF

VIKASH KUMAR G TECH E MIN D OR

PR

TE

Specialization in DSA and Fullstack Engineering OG

RA M

C E RTIF

IC

A

Anshuman Singh Co Founder Scaler Academy by InterviewBit

https://www.scaler.com/cerificates/oam/9a4f24d23e4e Scaler Academy confirms the identity of this individual and their participation in the course

PROGRAM CERTIFICATE

POSTCARDS FOR WOMEN’S DAY

Social Media Graphics

SCALER 1ST ANNIVERSARY

6

Programs SCALER ACHIEVERS CLUB

WEBINARS

WORKSHOPS

CONTESTS

Scaler Achiever Club

LOGO AND COVER IMAGE

POSTER

INVITE FOR APPLICATIONS

Webinars

Workshops

Certificate of Participation This certificate is given to

NEHAL CHAURASIA for participating in the 2 day workshop titled

'Build your first website, all on your own' organised by Scaler Academy in June 2020.

Anshuman Singh Co Founder | Scaler Academy

Certificate of

Participation

This certificate is given to

VIMAL KUMAR MEENA from IIT BHU for attending the workshop 'Introduction to Machine Learning: Object Recognition and NLP with Tensorflow', organised by Scaler Edge in July 2020

ANSHUMAN SINGH Co-Founder | Scaler Academy

Contests

<iiit/>codes An inter IIIT coding contest

CERTIFICATE OF PARTICIPATION T H I S C E RT I F I C AT E I S G I V E N TO

PRIYANSU PULAK IIIT BHUBANESWAR

for participating in IIIT Codes, an Inter-IIIT coding contest organised by Scaler Academy in May 2020

ANSHUMAN SINGH Co Founder | Scaler Academy

Conclusion

Future Aspects My journey so far has been great and I’m Glad I’ll be working ahead with InterviewBit as a full time Product Designer. I’d be continuing working on the Design system Phase 2. Apart from that redesigning new components for the website and improving the visual experience for the users. The company has been doing great and is launching few new products in coming months

FOR EXPERIENCED PROFESSIONALS

FOR 1ST-2ND YEAR COLLEGE STUDENTS

NEW INTERFACE PREVIOUS INTERFACE

My Learnings It was a wonderful opportunity to work on such a varioety of projects. Though my

Every single person in the company had something I could learn. The zeal and the

role was that of Product Designer but I’m glad the organisation let me expand in

enthusiasm all of them had and the passion for their work would drive me to work

various other sections that helped me explore my skills better. Now I feel I’m a

harder each day. Various problems in the current system led me to try to find a

complete package as a Communication Design Student. In every project I learnt

simple solution for them and while doing that I just not learnt about that problem

something new and by the end I had a book of learnings. I learnt how important

but also covered various things while searching for the solution.

research is before starting a project as it helps to rule out mistakes at the later. It also

Once we encountered with this problem of creating ID cards for 150 people and

gives a direction and a flow to take the project further. During this, there were

hence it was such a time taking process to manually edit each of the I-card. Hence I

somtimes when I used to research a lot and that would skip the deadline and

tried to find a solution for that and finally found one. This not only helped to create

resulting in late submissions. Hence I realised that it was important to set deadlines

ID cards at that time but also helped us generating thousands of certificates in

for each process and monitor them well. Now, I have an idea before I start my

minutes.

research till what extent I have to go and is it even necessary or not. Somtimes just by talking to your teammates and peers solves the purpose as they might have

For the product side I learnt how important is it to prepare a flow before starting the

already wokred on it so it saves a lot of time. That’s where communication is very

project. Following the design process makes the whole thing so much smooth and

necessary and it enhances the performance.

easier. A lot of problems tend to get solvd if we go out and talk to the main users of the product. While designing the experiences we should not think it from our

Since we had to deal with various other deaprtments such as The tech team,

perspective and comfort but should step inthe shoes of the users and understand

Marketing & growth etc. it was very necessary to keep a balance between all of them

their problems and should design from their perspective.

and have a healthy connection with all of them. I learnt how everyone is connected

I also learnt no matter how beautiful is the design it’s not worth it if it doesnt create

to each other and dealy by one person can affect the overall plan of the company

and impact and hence to measure it before starting the project it was suggested to

and hence I realised the value of deadlines when a work is assigned.

list down key performance indicators for that and analayse them once the project goes live.

“

“

Getting 1% better each day 365

1.01 = 37.8 365 0.99 = 0.03

Bibliography https://medium.com/@MaxTraï¬&#x20AC;ic/ https://blog.hubspot.com/marketing/ https://uxplanet.org/ https://www.wordstream.com/blog/ https://www.omniclick.com https://www.ux.stackexchange.com https://www.ukietech.com

National Institute of Fashion Technology Ministry of Textiles, Government of India