Rotate your phone for a better experience/view

hackr.io
Hackr.io is a collection of user-submitted tutorials and
courses on programming and design organized by
topics and technologies.

W ork we did Tools we used

responsive
Adobe Xd
Website

Ove v ew r i
Technologies are evolving faster than ever ,and new
f rameworks become obsolete before developers &
des gne si r can fully immerse themselves in them. It is
challenging to find good online resources for
le arning skills. Going through a huge collection of links
and evaluating each course in detail might involve
w asting many hours (and possibly some money). 

To address this, Hackr.io was founded as the first linking

webs te, i connecting users to all the courses and web
tut orials available on various educational platforms.

The opportunity

How might we come up with an aggregation platform to

solve the users' hassle of finding courses/tutorials
from various websites?

Design Research

Design process to ensure that decisions were backed by

user research and feedback

Empathize Define Ideate Design

Research to B rainstorm and onstruct

C

understand the users, Amalgamation of all generate a wide wireframes and

their environments, the research to define range of ideas for visual designs along
and their the problem areas. the problems with the interactions

requirements. identified. involved.

Qualitative research was conducted in order to

understand the problem and empathize with the users
T he jobs of developers and designers require them to constantly update and learn new skills. Technologies are evolving at a breakneck pace,
and new frameworks are rendered obsolete before developers and designers can fully immerse themselves in them.However, finding good
online resources for learning these skills is difficult. When you search for a simple term like "Python tutorial" on any search engine, what usually
comes up is not the best tutorial, but rather the most SEO optimized tutorial. Typically, this is where the problem begins.Learners must trawl
through numerous links and assess each course thoroughly. This could mean wasting a lot of time (and maybe some money too).

Problems faced by a developer

01 Tons of online tutorials and courses on development & design are available on the web.

02 Ty pically, a Google or YouTube search would return only the best SEO-optimized tutorials.

03 P eople may end up wasting money on courses that are irrelevant to them.

04 P eople end up spending several hours testing each link and then eliminating the bad ones.

05 T here is a risk of learning half-baked concepts and develop bad fundamentals on selecting a bad course.

06 T here is a huge necessity for constantly learning and keeping oneself up to date.

How Hackr can solve these problems

It's an online world; from groceries to education, the internet has an impact on every aspect of our lives. We anticipate that formal degrees will
become obsolete in a few years.The aforementioned issues were identified, and a service was developed that became the first linking website,
providing users with all major courses and web tutorials available on various educational platforms. Hackr aimed to solve the problems in the
ways listed below.

A list of tuto
rials is mit Upvote the best
available onli r s c a n s u b
Use ost
divided into
ne,
i a l s , w h ich are tutorials, and the m Tutorials are interacti
ve,
tut o r e at
based on th
topics
w e d b y the voted tutorials will b and conversational a
nd
e rev i e
interests of t r t e a m b efore the top of the list, have gaming elemen
ts
hac k t is
users.
he
g p u b li s hed. resulting in a list tha to keep users movin
g
be i n
not SEO optimized. forward.

The objectives were clarified to keep everyone on

the same page

Redefine how content can be

discovered and consumed on the

01
website to increase engagement and

dwell time.

To become a community (and possibly a

To become more social through
marketplace) where people can find,
notifications, comments, and
rate, up vote, and review the best places 02
gamification. All of this will help to
06 to learn anything they want, regardless
increase user engagement and retention.
of content provider Content, both free

and paid, would be listed and ranked.

The goal is to bring all of the best

Develop the Hackr brand elements to
courses available, along with their
05 create a distinct and consistent visual 03
prices, and handpick the best
language.
among them.

To be the platform where people begin their

online education, regardless of what they are

04 attempting to learn. The goal is to become

the go-to platform for finding the best

learning resources.

Website analysis was performed to identify speci c fi

issues that needed to be addressed

01URL Check 0 2 Eff ectiveness

P eople can type the website address out (or link to it) in various ways: Are the landing pages converting? : Yes

Is the website easy to use? Yes

http://hackr.io

However, only the first link is Average monthly time spent on site : 2 minutes
http://www.hackr.co.io
accessible in a browser. The
Top performing keywords by rank :

https://hackr.co.io others are 301 redirected to

Learn Golang on 3rd rank & Learn PHP on 4.6th rank
https://www.hackr.co.io the canonical version.

3
0 Technical SEO & Performance 0 4Pages that generate the
Loading time : Site speed is around 4-6 seconds most traffic
Average time spent on page : 1.38 seconds
Social sharing : 100 Python C++ React Native Node JS

Angular PHP React Unity

0 5 ontent &
C U ser Experience 0 6Website Traffic comes from
Page that convert the most users : Python
Wikipedia Quora Emails Direct
Page with the highest bounce rate: C++ Page with 59%
Pages that are ranking best : Python on 11.8th rank and C++

with 9.4th rank on SERP Page Organic Search Result

Pages that are ranking worst : Information security page

and Ethical hacking page with 67th position on SERP Page.

*All the statistics date to 2019

45% 24819
2500
P age Views Monthly
A erage Bounce
v

Rate erall Ov

P ages With Traffic

20906
63% Uni ue age Views
q P
24100
Monthly

13263
Indexed Website
A erage Bounce
v
P ages
Rate Monthly

S essions Monthly

The target audience was identified to strategize the

design process

70% 30% 10%

Newbies e i tered Users

R g s Bu ine
s ss Us ers
According to Google Analytics, Hackr.io is People who are already familiar with Businessmen who are running businesses

mostly visited by newbies who have no idea programming software visit Hackr.io to of their own or working in companies, come

about programming and want to learn keep up with new software and coding to Hackr.io to understand what new is

coding for the first time in their lives from skills to expand their knowledge. As going on in the market and to learn a little

the top tutorials available on the platform. technology advances, these people feel the bit of coding so that they can work even

need to be updated and start from scratch. more efficiently in their jobs.

User personas were created to empathize with

the end users

Pain Points
T here are numerous online tutorials to choose
from
Jai Mehra, 24 Results from SEO optimization are not always
the best
High risk of learning half-baked concepts
from unreliable sources
Testing multiple links for the content required

is time-consuming
There is a high likelihood of wasting money on

courses that are irrelevant.

Goals
“ ai studied computer science and is now a budding software
J
Find meaningful courses as per the needs
developer. Because the field of technology is so volatile, one
Find a consolidated list of tutorials from
must keep their skills up to date. Jai is enthusiastic about his various platforms to save time and energy

work and wishes to advance. There are numerous courses Improve work efficiency to advance the
available on the internet, making it difficult for him to choose the career
best one. Furthermore, SEO-optimized results can be deceptive Stop spending money on courses that provide

at times. He wants to avoid the hassle of testing multiple links no value.

until he finds useful one

Personality

O bservant

E xtrovert

Tech savy

DESIGN SYSTEM

Typography and colors used

Proxima Nova
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll

Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww
#007AFF #001C3B #7B7B7B
Xx Yy Zz

0123456789

#51BB35 #E32F2F #000000

Regular Medium Semibold B old

As of March 13, Hackr.io was rated number one on ProductHunt and number one on Reddit by April 6. ProductHunt listed Hackr

amongst the top 50 -

all time most popular products on their website. With the huge amount of tra ffi
c coming in, Hackr has been able

to gather feedback about what its users would like to see on the website.

*All the statistics date to 2019

75+ 35K+ 12L+ 40L+

i nups

S g ers

Us Monthly Vi its
s S essions

Across India Across India Acro Globe

ss Acro G o
ss l b e

Ui Screens

Navigation bar for easier access to information

01 Before
The search box should be placed on the top right corner of the page only as an icon

(expands as a search bar on click) because most of the time users tend to look for

the search box in the upper right corner. It gives immediate access to the browser

scrollbar.

Difficult to know where is the tutorials

bookmarked/saved/ added.

02 Wireframe s
The Badge tally and reputation
points are not understandable by

its current state of design.

Moreover, we can consider these

points to be shown only on the

profile page and not on the header.

03 Design

T he divided navigation is designed for clearly defined levels of information. Icons were added to each
topic to make it more visually appealing and engaging. The header element alignments were
improved to achieve a better optical balance and architecture.

Clear onboarding flow for better con ersion v

and retention
Since the onboarding flow is critical for user retention and engagement on the site, multiple iterations of the form were prepared

during the exploration stage. The flow allows the user to select their interests in stage one to receive a personalized feed in their

dashboard. The experience is defined from the beginning itself.

Wireframe s Iterations

L o in
g

or ot Pa
F g ssw ord

S g i nup

O nboarding

Iterations

F inal Designs

L o in
g

S gi nup

O nboarding Modal

This modal appears in the onboarding flow after the

user has signed up using the form. The user is asked

to select their interests here. As the user begins to

select topics from a specific category (for example,

programming), the options automatically re-arrange

to include only programming topics, making it easier

for the user to associate with them.

Contact us form to optimize the experience and

generate leads

Before

The user interface for the contact form had to be better than it is

now. There was a need to implement a contact form with all

specific fields for easier data access (for the Hackr team) to draw

attention to feedback. However, emails remain the primary means

of communication. To maintain visual consistency, the UI for this

form had to be in sync with the onboarding forms.

Wireframe s

Final

Listing pagefor boosting engagement and

enhancing experience
T he UI of this page is completely broken. This page is the only page on Hackr.io on which maximum number of users land for the first time on
the site through external links. Therefore, it acts like a landing page (not in reference to the homepage) for us which has to be perfectly designed
for better user experience and engagement.

Before Wireframe

F inal

Profile Completeness Widget to keep track of users

T he profile completion widget was introduced on Hackr.io because the majority of registered users on the platform were using the site with
incomplete profiles, making it difficult to track their activities. The goal is to obtain the user's data so that we can target them with
personalized content in the future, send them relevant emailers, and improve user engagement with the platform.

When a non-registered guest user reaches the bottom of the page, he or she can be certain that they are very
interested in what Hackr.io has to offer. The primary goal of this signup trigger is to increase the conversion
rate of guest users to registered users. As a result, user retention on the platform increases.

Details page for brief information of every tutorial

Before

The UI of this page is completely

distorted. This page is the only page on

Hackr.io on which maximum number of

users land for the first time on the site

through external links. Therefore, it acts

like a landing page (not in reference to

the homepage) for us which has to be

perfectly designed for better user

experience and engagement.

Wireframe s

F inal

Advertising page for marketing and achieving

specific goals

Wireframe

Final

Hackrthon event landing page

A hackrthon is a gathering of programmers who come together to collaborate and code on a project that lasts several days, usually 48 hours.

This page was created for these participants to provide them with all relevant event information, to market the event, to drive registrations, and,

most importantly, to increase conversion rates and user engagement on Hackr.io's main site.

Triggers to reach the Hackrthon page

UI for triggers on the main site allowing Hackr.io users to be redirected to the Hackrthon webpage on the y. he goal was to increase the
, fl T

number of signed up users while also encouraging them to register for this event. It was a great learning experience to work on a dark-
-

themed UI and with grids.

In the side panel

In between the listing

H ello bar

Em ailers for efficient communication with the users

Notable Press Mentions from the past

Top 50 #1 #1 F eatured F eatured

P roduct Hunt eddit

R H acker News Y ourstory Lifehacker

Programming

Technology solutions crafted for Design studio specialised in

i hly skilled developers and

H g

a sleek and scalable experience. UI/UX and branding. designers on contract

Contact U s Follow us on

[email protected] sq uareboat.com