TechTinder | Shaan15

TechTinder: Find Your Guru

Overview

TechTinder is a personalized, informal question answering and doubt-clearing platform with a tinder-like interface that aims to foster connectedness in the student community. Not only does it enable a collaborative model of knowledge sharing but it also attempts to bridge the gap between people who are at a learning stage in a topic and the users who have gained prowess in it.

Role

Researcher

Interaction Designer

Developer

Team Members

Shaan Chopra

Abhinav Khattar

Saksham Suri

Shreyans Mongia

Vedant Nanda

Duration

4 months

Motivation & Contribution

TechTinder is a semester-long project done for our Designing Human-Centred Systems class (CSE501) at IIIT-Delhi. The idea behind TechTinder was motivated by a platform called Backpack - a learning management system used at IIIT Delhi for sharing course material and resolving queries for each course. However, the discussion section of Backpack is public (among the students registered in the course) and there is always a fear of embarrassment which results in a meager usage of this feature. After talking to IIITD alums and current students, we proposed the idea of TechTinder. For the project, we followed the various steps of the design process: contextual inquiry, ideation, prototyping, designing, building, and testing, and did multiple iterations to perfect the design and interactions.

Key Features

Choose a topic and ask a doubt relevant to it:
- Select a topic to study.
- Write a brief description of the desired question
- Send study requests to other users with prowess on that topic.
Be a teacher and solve queries:
- Swipe to the right to accept or left to reject study requests.
- If the study request is accepted, the two users can chat, share notes and learn!
Chat and rate:
- Chat with the teacher/student after the study request is accepted.
- End chat once doubt cleared and rate the other user as a student or teacher!

Our Design Process

Contextual inquiry

Conducted on IIIT-Delhi Campus
population:
- Age range: 19- 29 yrs
- Bachelors, masters, doctoral students and research assistants
- 5 female, 5 male

ideation

Performed affinity diagramming to identify different user needs and expectations from learning management applications

prototyping & Developing

3 levels of low-fidelity prototypes
2 levels of high-fidelity and native prototypes
Task analysis and user testing performed for each prototype

evaluation

Followed an iterative design process
Task analysis and user testing at each level of prototyping
Performed GOMS-based evaluation

Video description can be found here

Part 1: Contextual Inquiry

Study Environment

Place of study
Time of study
Study in group vs alone
Preferred person or group of people to study with
Other preferred environmental factors for studying

Doubt solving practices

Procedure you take to clarify your doubts
What do you do?
Who do you go to?
Preferred environment (time, place, group vs individual, etc) for clearning doubts
Preferred mode/ platform for clearing doubts
Challenges faced during doubt clearing
Expectations from teacher/ doubt-clearer/ study mate

teaching practices

Procedure you take to clarify other's doubts
Would you teach/ clear doubts for someone in need?
Preferences in terms of whom you would want to help
Preferred environment (time, places, group vs individual, etc) for teaching
Preferred mode/ platform for teaching/ solving doubts
Challenges faced during teaching/ solving doubts

expectations from application

Current experience with backpack
Expectation/ preference of features from application to facilitate doubt-clearing among peers
Would you use the application for both clearing your own doubts and helping others?
Ideas on how to incentivize teaching? Gamification ideas?

Part 2: Ideation

AFFINITY DIAGRAMMING

KEY INSIGHTS

People have different studying and teaching patterns depending on schedule, hosteller vs day-scholar, and nature of work.
People prefer different kinds of environments to work; “silent places” are preferred due to ease of concentration.
Different doubt clearing practices among different users:
- Try themselves
- Search online
- Asking friends or classmates for help
- Ask professors, TAs or experts
- Use backpack discussions
Different ways and modes of conversation for doubt clearing:
- Asking face-to-face
- Emailing
- Calling
Different nature of doubts depending on if asked via message vs call vs in-person.
Different parameters affect teaching preferences:
- Knowledge about topic
- Time
- Place
- Sleep schedule - varies heavily between hostellers and day scholars
- Business at that moment
- Person asking doubt
Backpack discussions are not a preferred mode for clearing doubts
- Fear of being judged on a public platform where everyone can see the question asked
- Prefer courses with “ask questions anonymously” option
- Use backpack just for logistics, not for doubt clarification
- TAs and professors are not active on the platform.
- Asking a doubt on backpack felt “formal” with many people including the professors viewing it
Expectations from platform
- More informal
- A personal and private way to clear doubts
- Provisional anonymity
- Gamify studying and teaching process using rating and Tinder-like swipe interface

Part 3: Prototyping & Developing

LOW-FIDELITY PROTOTYPES

Iteration 1

Iteration 2

Iteration 3

DESIGN PATTERNS

HIGH-FIDELITY PROTOTYPE

Post multiple iterations of low-fidelity prototypes and task analysis, we created the high-fidelity prototype using Proto.io and got the users to test the interface and actually get a feel of the interactions.

NORMAN'S GULFS & FITTS' LAW

We also identified Norman's gulfs and possible usage of Fitts’ law in our interface before going onto build the native prototype.

Screens that use Fitts' law:

Login Screen: The buttons are at the center, easily reachable.
Ask: The “Find a mate” button easily reachable from the bottom navigation bar. Even the search bar
All the tabs are in one navigation bar.
Profile button leads to a second list to navigate between specific parts of the profile. Don’t have to scroll down entire profile page.
Rating page: thumbs occupying full screen and easily reachable.

Screens that should use Fitts' law:

Current and Archive chats should be like floating buttons so that do not have to scroll up all the way when the number of conversations is a lot.

Screens where Gulf of Evaluation can happen and fixes:

In the “Ask” screen, the button says “Find a Mate” but the next screen is the question description screen.
- Fix: Either the button should say “ask a question” and then followed by “Ask a mate” on the question description screen or after “Find a Mate” should lead to the swipe screens.

Screens where Gulf of Execution can happen and fixes:

The tinder swipe interface can be non-intuitive to non-tinder users.
- Fix: A prompt or help which guides the user when he/she first uses the interface.
The user might try to click the button which has the name of the course/topic.

NATIVE PROTOTYPE

Finally, we created the application using the Ionic development framework!

Part 4: Evaluation

TASK ANALYSIS

We conducted task analysis after every iteration of prototyping and improved the prototype based on the user feedback.

Easy

Login/Signup into the app using Facebook/Google+
Select a topic to ask a doubt.
Write a doubt to ask from people
Logout of the app

medium

View your profile and add a topic of expertise
Start to ask a doubt but discard the draft before actually asking it
Send a message on the chat

hard

Select all the people you want to ask your doubt from. (Hard)
Reject a person you don’t want to send your doubt to. (Hard)
Reject a study request someone else sent to you. (Hard)
Accept a study request someone else sent to you

GOMS - EXPERT INSPECTION

We conducted GOMS analysis to get an idea about the performance and bottlenecks in the design when evaluated by an expert.

GOAL

Choose a topic to study
Find mates to send study requests to

INPUT

Sign in
Ask a doubt
Choose a topic & add description
Find mates
Send study requests

output

Performed in roughly 30 seconds by an expert.
Bottlenecks:
- Figuring out what to write in a doubt and why there were two screens for the same task.
- Right/left swipe took some time even for the expert.

USER TESTING

We finally gave the application to users for testing and incorporated important feedback in terms of UI improvement. The app is currently in a beta testing phase. We plan to roll it out as soon as minor UI and backend fixes are made so that we can ensure integrity of the system. We would also like to do a stress test for the application so we can ensure sufficient usage load.

Download the application here.

Other Design Elements

THE LOGO

Before finalizing our logo, we make multiple iterations of the same as can be seen in the designs. The final logo uses a modified version of the letter ‘c’ in TechTinder to make it look like a combination of “nerdy” glasses with the Tinder fire.

THE COLOR SCHEME

We initially started with a light blue theme as it symbolizes trust and stability, then moved onto a magenta and dark-pinkish color as it is an energetic color such as orange, but slightly subtle; it also has a mild sense of urgency associated with it (similar to red) and can encourage impulsiveness. Hence this color scheme felt like a good mix of subtle enthusiasm, romance, and interaction and aligned with the track of our application. But from user feedback, we came to know that the users wanted a more “gender-neutral” color and finally we settled upon a dark orangish shade.

Project Presentations

BUILDING BETTER INTERFACES (BBI) 2018!

The course presentations were held on April 16th, 2018 at CDX@IIIT-Delhi.

FOR NEWS COVERAGE

Our work was covered by an Indian news channel!

Our Team

Video Description

see video here!