0%
hamburger_icon
Hi, I'm Jribh
Senior Interaction Designer
at
D.E. Shaw and Co.
Contact Me Icon
I love creating interactive experiences that give people the oomph.
Scroll for more
Jribh
UI/UX
Work Experience
Senior Interaction Designer
D.E. Shaw & Co.Divider2022 - Present
UX Internship
TATA DigitalDivider2021
M.Des, Interaction Design
IDC, IIT BombayDivider2020 - 2022
Bachelor of Architecture
SPA DelhiDivider2014 - 2019
Download Resume Icon
9Business Units
26Projects
Created and maintained the Design System Library, including key components like Navbar and Grid.
Delivered products critical to the firm’s business and infra, with multiple design-from-scratch projects.
Interdisciplinary collaboration across teams like Infra, Systems and Trading BUs.
Reach out to know morearrow-icon
TATA NeuSuper-App
Design and concepualization of the TATA Neu super-app and various features within.
Followed each step of the design process ranging from research to prototyping.
Jump to projectsarrow-icon
Master'sIndustrial Design Centre
Wide range of projects covering research, graphic design, coding, tangible interactions and XR.
Excelled across fields with a GPA of 9.42
Jump to projectsarrow-icon
Bachelor'sSchool of Planning and Architecture
Built a design foundation learning concepts of composition, graphic design and architecture.
Worked and interned in Portugal, Ladakh and Delhi to gain practical experience over the years.
See Architecture Portfolioarrow-icon
Work Ex.
Skills and Technologies
UX Design
Information ArchitectureDividerUser ResearchDividerUser FlowsDividerWireframingDividerPrototypingDividerDesign Systems
iconiconiconicon
Visual Design
IllustrationsDivider3D ModellingDividerLayouting and CompositionsDividerMotion GraphicsDividerVideo Editing
iconiconiconiconiconiconicon
Front End Dev
HTMLDividerCSSDividerJavascriptDividerthree.jsDividerCreative Coding
iconiconiconiconicon
Skills
Work and Projects
Visually Understanding Space & Time
An online guide with interactive visualisations to understand all there is behind the Special and General Theories of Relativity.
TATA Omni
A super-app for TATA Digital, offering products and services from different TATA subsidiaries under a single umbrella.
Indian Knowledge Systems for Design Education
Resources for teaching “Design based on Classical Indian Knowledge Systems” to CBSE Class XII students.
Remote Touch
A physical device that simulates the movement of a single finger sliding across the skin- remotely.
Visualizing Emotions in Song Lyrics
Creating Data Art using emotions extracted from lyrics of different songs in the form of abstract three dimensional shapes.
Create ‘n’ Share
A digital socio-educational space for school students that allows protected interactions and features like ‘note-sharing’.
Bonfire
An intervention that can be incorporated during breaks of online conferences, where people can interact using virtual paper planes.
Guardian
A mobile platform enabling parents to manage the performance of their children in online classes.
YouTube Coach
A search engine + video compiler under YouTube that provides compilations of procedural instructional videos.
GenoCorp
A futuristic website belonging to a fictional corporation that enables parents to edit the genes of their children. Designed as part of a Design Fiction project.
Also check out...
Artworks
Architecture Portfolio
My portfolio consisting of works specific to the domain of architecture.
Let's connect.
Full Name
Email Address
Message
Download Resume Icon
Back to top Chevron
Visually Understanding Space and Time
Go to website link pipe November 2021
Introduction
The project aims to visually and interactively explain the behaviour of Space and Time (as covered in the Theory of Relativity by Albert Einstein) to a general audience.
The product is an interactive online article licensed under the Creative Commons License.
Audience and Aim
The product is targeted mainly for people who have finished high school education, which would include:
student-icon Students
book-icon Avid readers of general science
pen-icon Teachers and professionals
The product aims to encourage learning and exploring ideas from a new perspective.
What does the project do?
checkmark-icon Ignites interest in people
checkmark-icon Aims to be inspiring and insightful
checkmark-icon Provides a single resource to understand most of relativity
What does the project NOT do?
cross-icon Not a curriculum project
cross-icon Standalone product; doesn’t improve instructional design of any other material
cross-icon Not quick and easy to engage with
Why Relativity?
arrow-icon Efforts to visualize and explain relativity to the general public have relatively been less
arrow-icon Theory of Relativity turns classical physics and centuries of assumed notions upside down
arrow-icon It is sufficiently complex, and yet quite famous among non-scientific circles
Literature Review
Similar resources aiming to explain the Theory of Relativity
Photon Cart
A non-interactive YouTube video that visualizes non-simultaneity of special relativity
photon-cart
A Slower Speed of Light
A game developed by MIT Game Labs that shows effects of special relativity if light moved much slower
photon-cart
Stretched Sheet
Shows spacetime as a fabric that is distorted by the mass on it. Struggles to explain what is pulling the mass down, as well as the gradient in time
photon-cart
3D Visualization
Shows all space dimensions and time dilation, but doesn’t explain how time dilation causes gravity
photon-cart
As seen, these visualizations are good for explaining individual phenomenon, but nothing ties them together to explain the whole picture.
The Product
The interactive web article, licensed under a Creative Commons License, walks us through different 2D and 3D visualizations that can be tinkered with to get a good understanding of the Special and General Theories of Relativity, and can be easily understood by anyone with a high school education and sufficient curiosity.
Feedback from Experts
What are embedding diagrams?
In the web article above, you’ll encounter a concept called embedding diagrams. These were introduced by L. Epstein in 1985 as a concept for the general masses, but no scientific explanation.
Dr. Rickard Johnson, an Astrophysicist in Chalmers University, Sweden built on these embedding diagrams, and developed the Dual and Absolute schemes for visualizing concepts of relativity.
embedding
I got feedback from Dr. Rickard on:
arrow-icon Different types of embeddings and when to use them
arrow-icon How a black hole is formed in terms of embeddings, and how a black hole can be represented as a dual scheme embedding
I also contacted Bartosz Ciechanowski, author of excellent interactive explanatory articles online (see his work here) for tips on:
arrow-icon How to avoid fast scrolling on the banner visualization
arrow-icon Clarity on light propagation visualization. Bartosz mentioned that using sine waves here would be better
arrow-icon Rotation of the 3D model in the Geodesic visualization
Usability Test
I conducted an Information Retention Test via Google Forms.
5 Participants
9 Questions
6.4/9 Average Score
Feedback
The product got a score of 9.2 on the Likert Scale on how insightful they found the article to be.
arrow-icon Users found embedding diagrams a bit tough to grasp in one go
arrow-icon Some issues with page layout on different screen sizes were pointed out
Reflections and Future Scope
The product got a score of 9.2 on the Likert Scale on how insightful they found the article to be.
arrow-icon Would’ve liked a more coherent UI across the interactive visualizations; current ones might be a bit scientific and bland
arrow-icon Can have a better bounding story. The current story of two friends can be made more engaging
arrow-icon Can have some more relatable examples, like the merry go round, so that people can understand the topics better
A detailed project report with references can be accessed from the link below:
previous Previous Project next Next Project
Omni: A Super App for TATA Digital
June 2021
banner
Introduction
Designed a part of an internship project at TATA Digital, Omni (now called TATA Neu) is a super-app that offers products and services from different TATA subsidiaries under a single umbrella. This spans across multiple product categories and services offered by companies like 1mg, Qmin, TATA AIG, Croma and many more.
intro-brands
Research
The goal of research was to understand what qualifies as a super app, how super apps work, why they are needed, and what makes a good and usable super app.
question-icon
What and Why?
What makes a super app succeed/fail? (competitor analysis) What would make a user download a super app? (user goal setting)
image-icon
UI & Aesthetics
Constituent apps have different GUIs; how can it handle the jumps in between? Make it a cohesive experience, or embrace diversity?
chart-icon
UX and Usability
Making something modular & scalable for additional apps in the future How to maximise engagement on a regular basis?
sun-icon
Mental Wellbeing
How to not become a source of addiction, negativity or depression? How to be inspiring, positive and optimistic while being engaging?
User Sample Selection
Identifying characteristics of potential customers
arrow-icon
People with limited capacity phones who can not install many apps
arrow-icon
Loyal TATA customers familiar with most of their services
arrow-icon
People wanting a common account across different apps
arrow-icon
People preferring a smartphone for purchasing goods and services
arrow-icon
People moving to new homes, who’d benefit from bundled services
arrow-icon
Recent adopters of digital services due to the COVID-19 pandemic
Research Process and Methodologies
Analysis & Research Research papers analyzing/critiquing existing super apps like WeChat and MyJio
arrow
Heuristic Evaluation of existing apps Competitor analysis of different apps in the market
arrow
Understanding Users Online forms to understand user patterns at a high level
arrow
User Interviews Understand goals users would have from super apps, and their existing knowledge
Competitor Analysis
4 major competitors; WeChat, Amazon, PayTM and myJio were analyzed based on:
competitors
arrow-icon How did it start and where is it going?
arrow-icon What do they have to offer?
arrow-icon How is the brand depicted?
arrow-icon Information architecture and features
arrow-icon User flow and UI
arrow-icon Overall impression and opportunities for improvement
Some key insights gathered were:
arrow-icon Coherent UI is important even across different brands
arrow-icon There’s a thin line between presentation and clutter when information is a lot
Primary Research
Survey
14 Females
4 Males
18-55 Age Group
Some key insights from Google Forms survey:
arrow-icon
All participants felt they have enough phone storage available
arrow-icon
Qmin and TATA Capital had lowest usage rates, while TATA Sky, BigBasket and Westside had the highest number of frequent users
arrow-icon
WhatsApp was the most used app , followed by YouTube and Instagram
arrow-icon
Majority of time is spent either connecting with others, or stress busting on social media/games
arrow-icon
Top used apps were loved for ease of use, nice aesthetics and ease of availability of content
Interviews
3 Females
6 Males
22-55 Age Group
screenshot
Some key insights from interviews:
arrow-icon
Convenience: People crave convenient and speedy experiences
arrow-icon
Caution: People are sceptical and cautious while spending money and prefer details upfront
arrow-icon
Choice: A wider collection of items is always preferred
arrow-icon
Trust: Reviews, especially from known oes, contribute heavily to buying choices
arrow-icon
Connection: People show maximum preference for private text messaging apps for digitally connecting with others
arrow-icon
Personalization: Unique experiences are preferred, with only relevant notifications
arrow-icon
Simplicity: Cluttered UI is never preferred while performing a task
arrow-icon
Awareness: People are not aware of super apps, or even of all functions of the ones they use
Personas and Scenarios
Personas
persona
Harish Bali, 21
Pragmatic shopper
BTech Student
Practical dot Self-aware dot Sceptical
Shops online extensively. Prefers P2P connections more than social media. Mostly texts friends.
Motivations:
Price
chart
Comfort
chart
Convenience
chart
Personalization
chart
Variety
chart
Goals:
  • Be able to check stuff before buying
  • Platform with fresh personalised content
Frustrations:
  • Minimum cart limit and delivery fee
  • Non-civil discussions on social media
Westside dot Croma dot Starbucks
persona
Balaji Prakash, 49
Sceptical customer
Project Manager
Busy dot Hardworking dot Stingy
Buys daily needs from nearby shop. Regularly purchases medicines for wife, and sometimes dinner, online.
Motivations:
Price
chart
Comfort
chart
Convenience
chart
Speed
chart
Brand loyalty
chart
Goals:
  • Buy affordable and good quality daily use items
  • Spend lesser time on menial tasks
Frustrations:
  • Time spent in visiting the market
  • Getting faulty/bad quality stuff online
Amazon dot Apollo dot 1mg
persona
Swarna Mehta, 62
Brand loyal
Retired Professor
Curious dot Fashionista dot Independent
Regularly buys gifts for grandchildren. Likes to exercise, read news articles and buy new knick-knacks in free time.
Motivations:
Price
chart
Comfort
chart
Speed
chart
Quality
chart
Brand Loyalty
chart
Goals:
  • Have variety of options to choose from
  • Get best quality products
Frustrations:
  • Too many brands; whom to trust?
  • Have to search a lot for good and high quality content
Croma dot Bigbasket dot Myntra
Scenarios
A glimpse into a day in the lives of the personas above
scenario scenario scenario
Customer Journey Map
Based on research, some “How might we” problem statements were derived. They were categorized into 5 themes, with personalisation being the main theme, and security and digital well-being being guiding principles.
Spending/Security Personalised experience with user trust.
Convenience Ease of use with quicker checkout times
Social A healthy and non-toxic social environment
Personalisation A relevant and catered experience
Engagement A productive, exciting and delightful user experience
Information Architecture
ia-icon
Home
Top Deals
Posts from Explore
Make Payments
ia-icon
Profile
My Account
Badge Status
My Chats
ia-icon
Finance
Recent Payments
My Details
Make New Payment
ia-icon
Explore
Posts & Content
User Reviews
Well-being articles
ia-icon
All Brands
Brand categories
Products & Services
Card sorting was done with 3 people to further improve the IA.
Wireframing
wireframes
arrow-icon Each brand would have its own homepage, but the design language across brands would be consistent and templatized
arrow-icon There’d be 2 carts: brand specific and consolidated
arrow-icon Search is vital. It is kept flexible yet simple
arrow-icon Explore section would have themes going on depending on seasons, trends, etc., in turn determining article content and product discounts
arrow-icon Option for P2P chats alongside payment chats for engagement
arrow-icon Upfront visibility of product and service bundles from across brands
High Fidelity Mockups
Originally designed in light mode
arrow-icon Glassmorphic UI minimizes clashes with different product colors, while being aesthetic and unobtrusive
arrow-icon Color palette of reddish orange enforces dynamism and vibrancy
arrow-icon Subtle use of abstract shapes which act as binders for different UI elements
mockups
Project Takeaways
arrow-icon Experienced how design gets influenced by business decisions
arrow-icon Learned to balance aesthetics and usability in context of a shopping app
arrow-icon Gained technical knowledge of applications like Figma and After Effects
A detailed project report with references can be accessed from the link below:
previous Previous Project next Next Project
Using Ancient Indian Knowledge Systems to Teach Principles of Design to CBSE Class XII Students
May 2022
banner
Introduction
Done as part of the Design Thinking Curriculum under the National Education Policy 2020, the project aims to design workbooks and exposure material for teaching Design based on ancient Indian Knowledge Systems for CBSE Class XII students. I explore the principles of arts and crafts of ancient India, extract content that can have modern relevance and applications in design, and present them to students in an interesting pedagogical manner.
Audience and Aim
The product is meant for class 12 students in CBSE schools, who opt for design as their subject. Design is done keeping in mind implementation within the next 5-10 years.
What does the project do?
checkmark-icon Discuss notions of representation and extract relevant design theories
checkmark-icon Applications of these theories today
checkmark-icon Speculative thought
What does the project NOT do?
cross-icon Dwell deep into metaphysical meanings
cross-icon Religious and spiritual origins behind the techniques and practices
cross-icon Providing an absolute view
Outcomes
For students
Interactive resources (online and offline)
Workbooks
Exposure content
For teachers
Lesson plan
Evaluation guidelines (Matrix)
Methodology
Major Research Areas
student-icon Explore innovative and effective ways of teaching, like interactive workbooks
book-icon Explore effective instructional design techniques
pen-icon Learn fundamentals of relevant Indian Knowledge Systems
Evaluation strategy
arrow-icon Participatory evaluation to understand effective design of material and exercises
arrow-icon Expert reviews and feedback on course structure and content
Curriculum Positioning
Where does the course sit in the DT Curriculum?
curriculum
Research
What are Indian Knowledge Systems?
iks
Since the topic is vast, it is important to categorize/classify Indian Knowledge Systems:
arrow-icon
On the basis of time: Historical (further: ancient/medieval/modern) or Contemporary
arrow-icon
Discipline based, like architecture, sculpture, fine arts
arrow-icon Based on geographical locations and local communities
arrow-icon
Classification within design education, like composition, colour, etc
arrow-icon
Based on different categories of ancient texts and scriptures (like Sastras)
Some challenges up front:
arrow-icon Choosing the right classification and literature
arrow-icon Giving equal importance to all influences over history, and extracting relevant principles
Literature Review
Broad Literature Review
Literature review was focussed around the following 2 verticals:
workbook-icon
Types of workbooks
Interactive workbooks could be digital, physical or hybrids Can incorporate physical artefacts, interactive devices and perhaps whole experiences
iks-icon
Indian Knowledge Systems
Modern: Grassroot level innovations documented by NGOs like Honey Bee Ancient: Rich design history spanning Classical, Medieval (Islamic) and Modern (British and post) periods
Areas of focus in Classical Knowledge systems:
arrow-icon Grids and Ratios in Indian arts and architecture
arrow-icon Patterns, fractals and symbols
arrow-icon Anthropometry and body mappings
arrow-icon Basic governing principles and speculative thought behind these designs- Understanding layers of abstraction
Focussed Literature Review
iks
The Square and the Circle of the Indian Arts
- Kapila Vatsyayan
Visual design principles in the 4 sastras: Natyasastra, Vastusastra, Silpasastra and Sangitasastra Storytelling and abstraction behind the principles
The works of prof. Dimple Bahl
Prof. in NIFT Delhi
Importance of grid as a freely flowing design tool Ratios and proportions in ancient India
The works of Prof. Kirti Trivedi
Classical Indian Design process Talamana system: Grids and hierarchies Parametrics and fractals
The works of Alice Boner
Detailed circular grids for understanding compositions
Choosing the subtopics
icon
Basics of Classical Knowledge Systems
Symbolism, abstraction and storytelling
icon
Anthropometry and the Human Body
Body measurements and mappings
icon
Form and
Architecture
Grids, ratios and symbols
icon
2 Dimensional Compositions
Theories and layers of abstraction
Reasons for choosing these topics:
arrow-icon Their capability to enable students to extract design principles relevant today
arrow-icon Not too overwhelming for a limited duration of study
The Products
Lesson Plan
Structure
The lesson plan roughly follows the structure of the Classical Design Process identified by Prof. Kirti Trivedi.
iks
Class 12 ~30 students
arrow
18 hours 12 hrs (at school) + 6 hrs (at home)
arrow
6 sessions 2 hrs each
arrow
6 x 3 classes 40 mins each
Why this structure?
arrow-icon Equating structure with the process itself would cover a wide range of topics
arrow-icon Case studies from different locations time periods and faiths could be provided
A Quick View
Day 1
Concretizing the abstract
Introduction Communicating the abstract Metaphorizing the abstract
Day 2
Concretizing the abstract
Mapping to nature and the human body Visual hierarchies
Day 3
Giving form to the abstract
Types of grids Grids in architecture and motifs
Day 4
Giving form to the abstract
Site visit Documentation
Day 5
Giving form to the abstract
Human body movements Abstraction of human body
Day 6
Enhancing the form
Form ornamentation Fractals and parametrics Reflections
Student Workbooks
Contain exercises and activities for each subtopic. A look at some of the exercises:
Segregate images and artefacts as abstract and realistic, and give a reason for segregation
icon
Write a 5 line story using the words: Sunrise, Perseverance, Colours, Fear, Determination, Elaborate.
Communicate the story in five frames using abstract elements.
(Would give meaning to the elements based on the story)
Join the midpoints of these shapes and continue the process to get smaller and smaller shapes.
icon
Experiment with ratios like 1:3, 1:4, etc.
Click pictures of yourself in 5 poses. Abstract the poses, label them and draw them on this grid:
icon
Take 5 leaves and arrange them based on a visual hierarchy, for example:
icon
Place them on the Talamana Grid based on this hierarchy.
Corner
Not central
Left
Before
Corner
Not central
Top
Higher
Centre
Main
Bottom
Lower
Corner
Not central
Right
After
Corner
Not central
Exposure Material
A consolidated reference resource for teachers and students.
exposure
Interactive Content
Digital Mannequin
A digital resource to understand human body movements. Consists of an interactive human figure which helps understand:
arrow-icon Human body proportions, constraints and anthropometry according to the grid
arrow-icon How different poses convey different emotions
screenshot
Temple Fractals
A website with an interactive 3D model of a temple that helps understand:
arrow-icon Different levels of parametrization
arrow-icon Scaled self-similar replication to create fractals
arrow-icon Faceting of a square plan
screenshots
3D Printed Temple
Under Atal Innovation Mission, Atal Tinkering Labs will be set up in schools, which will give students access to 3D printers. This 3D printed model enables learning form enhancement through scaled self-similar replication (i.e. fractals).
3d-print
Course Homepage
A centralized place to access all resources related to the course.
Evaluation
The following experts were contacted for feedback:
arrow-icon Panel of CBSE DT Curriculum; Prof. Amit Ray, Prof. Prajakta Kulkarni, Prof. Rupa Agarwal and Prof. Rupa Chakravarty
arrow-icon Prof. Prasad Bokil, IDC, IIT Bombay: His work includes study and research on visual communication and semiotics
arrow-icon Presentation on ‘Grids’ by a panel of experts working on an interactive program to teach the role of grids in Indian history
arrow-icon Class XII Humanities teacher of a CBSE school for evaluating lesson plan, exposure content and exercises.
I got the following insights from the experts:
arrow-icon Ancient knowledge could be classical or traditional, this project focuses on Classical
arrow-icon Nothing to be presented as black and white, instead case studies should be discussed more
arrow-icon Student exercises should have constraints to make them relevant to the course
arrow-icon Exposure content subtopics would need elaborate visuals aid for school students
arrow-icon Some exercises could be made more challenging
arrow-icon Important to add group discussion and brainstorming sessions
Evaluating Workbooks
Some exercises from the lesson plan were done by students of CBSE Class XII. Some learnings from the evaluation:
arrow-icon Need to word the exercises better to encourage students to take more risk
arrow-icon Needed clearer language to minimize difference between students
arrow-icon Needed to lock the medium for a level playing field
workbooks
Evaluation Matrix
To enable fair evaluation, DT Curriculum proposes grade based assessment. Grades are awarded based on rubrics. An example of an assessment rubric for a given exercise:
Segregate images and artefacts as abstract and realistic, and give a reason for segregation:
1-2 (Beginning) Less than half of the images are labelled correctly. need to assign meanings to abstract images.
3-4 (Developing) More than half the images are labelled correctly. The visual descriptions need improvement, and effort needs to be made to understand the essence of the abstraction.
5-6 (Promising) Most images are labelled correctly. All abstract images have been assigned visual descriptions. Need to move on to understanding the essence of the abstraction
7-8 (Proficient) Most images are labelled correctly. All abstract images have been assigned relatable meanings. Has described the essence of most images rather than simple descriptions
9-10 (Excellent) All images are labelled correctly. All descriptions explain the essence of the images, rather than plainly describing them.
Evaluating Interactive Content
Was tested in person with class XII students of KV School, IIT Bombay.
arrow-icon Interactive mannequin: Some students found it difficult to understand what to do, leading to addition of hints
arrow-icon Fractals in temples: A written description was added, UI was improved and a 3D gimbal icon was added for affordance
arrow-icon For the 3D printed model, sliding joints were created such that the pieces stay in place while not being too tight
Discussion
arrow-icon Since Indian history spans multiple diverse cultures, it might get challenging to take balanced inspirations
arrow-icon Most artistic principles and their metaphysical meanings are deeply entwined, and it becomes difficult and limiting to sideline the ‘religious’ origins
arrow-icon Teachers are the main users of the products. Diversity of teachers and schools, and the recruitment process can create initial implementation problems (Have tried to solve some with evaluation matrix)
arrow-icon Large scale testing of workbooks would give normalised and better results
arrow-icon Some more interactive content could be added in the future
A detailed project report with references can be accessed from the link below:
previous Previous Project next Next Project
Remote Touch: Tangible Computing to Share Touches
IndiaHCI Paper link pipe April 2021
banner
Introduction
As physical distances between people increase every passing day, ways to connect people remotely satisfy the visual and auditory sensories, but fall short on a crucial front- the intimate feeling of touch.
This project proposes and presents ‘Remote Touch’, a device capable of remotely sending and receiving personalised and intimate touch patterns, and more. The project was also published in India HCI conference 2021.
Research: Exploring Tangible Interactions
Brainstorming sessions to find lesser explored areas in the realm of tangible interactions.
brainstorming
Explorations
Some directions were explored in the initial phases, mainly focussing on touch and taste.
explorations
Simulating touch
Moving a ball in XY plane
explorations
Feeling weight in VR
Using gloves filled with water
explorations
Store and transfer taste
Store combinations of taste fluids
The Proposal
Remote Touch: A device that simulates your partner’s finger moving across your palm.
proposal
State of the Art
Researching the explorations already done in the field over time.
state-of-art
Product Placement
Where does the novelty lie?
The product combines freedom of movement offered by 2 axis CNC technology with the ability to capture, transfer and express touches; providing an experience that is:
Instant
Intimate
Natural
Precise
...while being open to multiple other use cases.
Usage Scenario
Make a situation interesting
Touch-ting
Introducing touch-ting: texting, but with touch.
touchting
Other Use Cases
Remote touch can also be used for some other use cases, like drawing, sand art, or simple installations.
Designing the Device
The design process consisted of figuring out the hardware, electronics and the software involved in touch-ting.
Hardware
Physical model, 3D and the form
Electronics
Arduino and stepper motors
Software
Getting input and establishing a remote connection
Hardware Backend
The hardware consists of 2 stepper motors moving a central ‘head’ using a system of pulleys. The head is mounded with a neodymium magnet.
hardware
The pulley system is based on the Core XY principle similar to a standard drafting table, where rotating both motors in the same direction produces horizontal motion, while rotating both motors in opposite directions produces vertical motion.
hardware
hardware hardware
Hardware Frontend
The device can be covered by either a soft surface suitable for feeling touches, or a hard acrylic sheet that can be used for other use cases mentioned above. For getting the feeling of touch, we chose tattoo practice skin, since it feels the closest to actual human skin.
frontend
Software and Electronics
Functional Mapping
software
Circuit Diagram
hardware
Remote Connection
hardware
Limitations and Future Scope
arrow-icon The magnet head can be moved in the Z axis with an actuator, increasing personalization by communicating pressure
arrow-icon Can make the output surface touch sensitive, negating the need to use the phone separately
arrow-icon A visual cue could be given to the sender regarding the receiver’s hand position, increasing engagement
arrow-icon A custom PCB with motors designed specifically for this product will remove some problems like lag from Arduino
A detailed project report with references can be accessed from the link below:
previous Previous Project next Next Project
Creating Data Art From Emotional Aspects of Song Lyrics
March 2022
banner
Introduction
This project explores different types of data art, and goes on to propose a type of data art that creatively visualizes various emotions contained in lyrics of different songs.
Explorations
What is Data Art?
Data art, like art itself, is difficult to clearly define. One of the ways could be to identify the intent of the creator; if they intended their product to actually be art.
Data art can also have some major overlaps with data visualization. Some ways in which both can be compared:
explorations Data Visualization
v/s
explorations Data Art
arrow-icon
Data visualisation seems to sacrifice aesthetics for insights,whereas data art seems to do the opposite
arrow-icon
Data art might not be good data visualisation, but it might promote what’s called “disinterested analysis”: provoking a non-expert into thought by using strong connected emotions
arrow-icon
Both data visualisation and data art consist of two things: objects and features. An example of objects can be cities, with their features being their weather attributes
arrow-icon
Overly focussing on usability can snatch away the aspect of beauty, spontaneity and emotion from data art
arrow-icon
Data art is allowed to commit ‘sins of data visualisation’- unclear presentation of information and blurred readability of data just for the sake of aesthetics
arrow-icon
Data visualisations provide quantitative insights, whereas data art may provide more qualitative insights open to interpretation
Classification of Data Art
Data art can be classified based on form, temporality and generators.
Classification based on Form
classification
Physical
Can be hand or machine made, or 3D printed
Can use traditional or contemporary materials
classification
Digital
Exhibited by products purely in digital space
Can be 2 or 3 dimensional
Classification based on Temporality
classification
Static
Unmoving in space and time
Abstract forms which are aesthetically pleasing- waves, liquids, fractals, etc.
classification
Dynamic & Interactive
Respond to user movement and inputs
New datapoints are calculated in real-time
classification
Animated
Change over time based on predefined values
Not dependent on real-time factors or inputs
Classification based on Generators
classification
Generative
Made using mathematical rules defined algorithmically
Complex algorithms might become computationally taxing
classification
Data Driven
Using huge datasets gathered from the real world
Creativity lies in converting flavourless data into art
The Proposal
I propose a method to generate digital 3D models using lyrical emotions of different songs, and present data art created using this method.
Music as a dataset is readily available, and is consumed by the public in massive volumes. It is relatable and appealing. The data art I present, instead of focussing on music’s quantitative factors like pitch and amplitude, focusses on the actual emotion behind what its lyrics say, which more often than not, is completely different from the song’s beats and tempo.
Literature Review of Existing Visualizations
Most visualizations are static, considering the entire song at once. Some of them are dynamic shapes that changes in real time.
song
Off the StaffNicholas Rougeux
Presents classical scores as static art pieces
Hardly gives any qualitative insights, but aesthetically pleasing
song
Segmented DiscsJames Marriot
Visualizes technical aspects of songs as segmented discs
Only understood in relation to other visualizations; not standalone
song
Visualizing Song LyricsJieun Oh
Data viz for lyrics, melody, harmony and rythm
Focus on usability above aesthetics
The aim of this project is to not focus on accuracy as much as the emotions in the songs; its mood and meaning. The result should visually capture the artist’s interpretation of the essence of the song based on the data provided to the algorithm, resulting in a different form for each musical piece.
The Product
I present data art as a ‘growing’ 3D model that develops based on the underlying emotions of a song. The process of generating this piece is as follows:
Choosing a Song
For more engaging pieces, it’s good to choose songs that are ‘emotional rollercosters’. Also, heavily lyrical songs are preferred, with minimal repetitions. Following 3 songs are considered:
song
play-icon
Eastside Benny Blanco, Halsey, Khalid
Sad core, Hopeful façade
song
play-icon
Spacebound Eminem
Angry and arousing, Heavily lyrical
song
play-icon
How Far I’ll Go Auli’i Cravalho
Light and positive, Hopeful
Assigning Emotions to Song Lyrics
Song lyrics, once laid out line by line, have 2 inputs: quantitative and qualitative. Quantitative input is time; how long it took for the singer to say that line. Qualitative input is the emotional variable assigned to that line. This project uses an arousal-valence dimensional model called the Russel’s Circumplex Model of Affect, which places different emotions on a scatter plot matrix based on their positivity and arousal values.
grid
Converting Emotions to Inputs
Based on emotions assigned to different lyrics, the total time each emotion appears is noted. Based on the emotions’ location in the matrix, zones are assigned as seen below. Both arousal and valence are divided into 8 zones each, giving a total of 16 combinations. This gives three numerical values; the positivity zone (from-4 to +4), the arousal zone (from -4 to +4) and the running time (in seconds).
grid
Generating a 3D Model from the Inputs
Using three.js, different emotions are visualised as randomly growing lines emanating from a common origin, in 3D space. For each emotion, the drawing algorithm takes as in put the positivity zone, arousal zone and the running time.
icon
Positivity Zone
Direction of growth, with positive emotions upwards, neutral sideways, and negative downwards
Positive emotions are white, negative ones are black
icon
Arousal Zone
Controls jitter of growth
Highly arousing emotions have more jitter; low arousal emotions have a smoother growth
icon
Time
More time leads to a longer growth strand for a particular emotion
Comparing Art Created by the 3 Songs
Data from lyrics of three songs; Space Bound, How Far I’ll Go and Eastside is taken to create three different art pieces.
song
play-icon
Eastside Benny, Halsey, Khalid
Positive façade with a deeply negative core
No positive emotions pointing straight upwards
song
play-icon
Spacebound Eminem
Mostly depressing and angry lyrics
Absence of strong positivity; downward growth is straight down
High jitter; high arousal
song
play-icon
How Far I’ll Go Auli’i Cravalho
Happy, positive yet serious
Many highly arousing and strongly positive lyrics
No deeply negative emotions
Conclusions and Future Work
arrow-icon The product is a subjective manifestation of the artist’s interpretation of a song’s emotions
arrow-icon An aesthetic piece that promotes disinterested analysis, providing a gist of the song, and qualitative insights open to interpretation
arrow-icon Future work is to refine the algorithm and automating the process of emotion assignment
A detailed project report with references can be accessed from the link below:
previous Previous Project next Next Project
Create ‘n’ Share: A Creative Assessment Platform
November 2020
banner
Introduction
Create ‘n’ Share is a platform where students can share their creative understanding of a subtopic within a subject, with their whole class. They are assessed on the basis of their work within the app.
The platform serves as a socio-educational space that provides a protected interaction space for students, with the content being their own creative output.
Problem Statement
Creative assessment is an important part of Formative Assessment, something which makes up 40% of the final grade weightage in CBSE schools. Although simple in physical classrooms, it’s becomes complicated in the remote schooling model. The goal of this project is to introduce a system where it is easier to assess students’ creativity and conceptual understanding when classes are held remotely.
Design process
Early Ideations
Various ideas emerged during the divergence stage, falling under these basic categories:
icon
Peer-peer reviews
Letting students design questions for their classmates to increase healthy competition and learning
icon
Presentation & Portfolio
Assessing presentations given by student groups which can happen once a month to increase teamwork and collaboration
icon
School social media
A product similar to LinkedIn but within the school/class that allows sharing of creative works and ideas
icon
Online knowledge archive
A digital knowledge base for everyone to contribute to, which will be verified timely
Persona & Scenario
persona
Abhishek Malik
Class XI
Inquisitive dot Studious dot Artsy
Scenario 1
Had English class today, and was taught “The Ailing Planet”
arrow
Made a nice diagram about the concept he really wants to share with others
arrow
Uploads it to the platform and selects an appropriate subtopic
Scenario 2
Goes to Chemistry timeline for his class
arrow
Explores various cards uploaded by his classmates on different subtopics
arrow
Saves any post he likes, or asks questions by commenting
Information Architecture
IA
Wireframes
Wireframes were made keeping the basic idea of dividing subjects into different subtopics. Focus was kept on Class 6-12 students.
wireframes
Feedback
To get an idea of what the actual content on the platform could look like, school students were asked to make some creative cards on the topic from their English class, “The Ailing Planet”.
feedback-sketches
Prototype
The Dashboard
prototype
The student home page puts a ‘content first’ approach, where a student can look at their classmates’ work. This is the home of the socio-educational space.
Content Creation & Student Interaction
Enabling students to create all kinds of content has been the primary goal. Students can upload multiple cards in a single post, having the option to draw, type, colour and upload photos or videos.
The platform also enables a supervised interaction between students, leading to discussions between them and the teacher.
prototype
Student Profile
The profile page shows cards uploaded by that student, sorted by subtopics. The profile provides a personalised approach, showing the student’s top traits and the ability to change avatars.
prototype
Teachers’ Portal
The teachers can add classes, students and subtopics, along with various rubrics they wish to assess the students on. Student cards are assessed using interactive rubric sliders, and feedback can be left for the students to see.
prototype
Key Features
arrow-icon Students can express their creativity and share it with their class
arrow-icon Assessment is made easy using built in rubrics
arrow-icon Work can be shared amongst classmates, and protected interaction amongst students can be enabled
Usability Report
User
English Teacher, Classes 11-12
Time taken to make a new class
1 min 57 sec in first attempt, 45 sec thereafter
Insights
arrow-icon It was noted where the user got stuck, which led to changing of some button positions and colours for increased affordance. The create
arrow-icon Added some intimations to the home screen to better mark some items
arrow-icon On ‘Create Card’ screen, the artboard was labelled better since the user, without any digital drawing experience, got stuck
Conclusions and Future Work
arrow-icon A consolidated report with final grades for each student can be added, that can be shown to the teacher after each semester
arrow-icon Option for students to contact each other directly
arrow-icon An admin portal for adding classes and subjects such that teachers just focus on assessment
previous Previous Project next Next Project
Bonfire: Relax, Play and interact
October 2020
banner
Introduction
The project proposes Bonfire, a platform that lets you relax, play and interact at a virtual bonfire. Bonfire is an independent website integrated with the video conferencing software. It is the result of an exploration that started out in search of a ‘cool’, ‘unexpected’ and ‘interactive’ thing the attendees could do during the online HCI Conference 2020.
User group
Users would be the HCI 2020 conference attendees including presenters, volunteers, participants, students and professors.
user-group
Design process
Scenario
A typical scenario of an online conference attendee during a break looks like this:
scenario
What is Cool?
Brainstorming sessions helped zero down on what the ‘coo’ thing might be.
what-is-cool
Features
icon
Write the message
Write messages on the paper plane
Launch the plane and watch it fly
icon
Read the message
Tap on any plane to read the message
Close it and the plane flies away
icon
Fiddle with the fire and keep it burning
Silently be a part of the conversation
Prototype
The project proposes Bonfire, a platform that let’s you relax, play and interact at a virtual bonfire. Bonfire is an independent website integrated with the video conferencing software.
prototype
Feature 1: Write and fly your messages
feature
arrow-icon Word limit: 32 characters
arrow-icon Timer to the next presentation
arrow-icon Plane flies for 30 seconds and disappears, leaving no record of the message
arrow-icon Phone vibrates and makes a “swoosh” sound when the plane is flown
arrow-icon Option to mute the ambient sound
Feature 2: Tap and read messages
feature
arrow-icon One can tap the message as many times as they want within 30 seconds of release
arrow-icon One can not reply to the message
arrow-icon The sender can see how many times their paper plane was opened
Feature 3: Shake and don’t let the flame die
feature
arrow-icon For silent watchers
arrow-icon The gesture is equivalent to waving in the air
arrow-icon The flame glows and the planes start moving faster for a few seconds
previous Previous Project next Next Project
Guardian: A Platform to Manage School-goers
October 2020
presentation presentation presentation presentation presentation presentation presentation presentation presentation presentation presentation presentation presentation presentation presentation presentation
previous Previous Project next Next Project
Coach: Search and Compile Tutorials from YouTube Videos
February 2021
banner
Introduction
The project introduces Coach, a website that acts under the service of YouTube, oriented towards providing users with procedural instructional videos. Coach is a search engine + video compiler that, based on a search query for a particular instructional ‘how-to’, provides a compilation with steps from different YouTube videos based on relevance and quality.
Problem Statement
YouTube has billions of unstructured instructional videos in the wild. Many a times a certain video might have a better step, but a subsequent step might be better in some other video.
The goal here is to introduce a system that can extract the most relevant steps from instructional videos on YouTube categorized based on a certain topic, and compile these steps to get a final instructional sequence.
introduction
Research
Fundamentals of Instructional Design
How do people learn using videos?
arrow-icon Videos allow for micro-learning: knowledge provided in small bits; improving memory retention
arrow-icon Multi-platform support and ability to watch on phones provides learning on the go
arrow-icon Videos boost viewer learning by providing relatable narratives in a visual format
arrow-icon People are 75% more likely to watch a video than to read written documents or web articles, according to Forrester Research
Procedural Knowledge
Procedural knowledge is knowing how to perform a specific task to reach a specific goal by performing specific steps.
illustration
Some ways of teaching it effectively are:
arrow-icon Using clear descriptions of the sequence of actions
arrow-icon Providing the opportunity to learners to construct on their prior knowledge
arrow-icon Providing a conceptual elaboration of the declarative knowledge base in the form of concepts, processes and principles
arrow-icon Complex procedures should be chunked into 7-9 segments, to avoid cognitive overload
The Product
Product Positioning
YouTube Coach targets procedural videos on YouTube that provide tutorials to the viewer to accomplish a certain task or reach a certain goal by following a set of clearly defined steps.
man
The tutorials can be for relatively simple and small tasks like:
arrow-icon How to change a bike tire?
arrow-icon How to make a strawberry milkshake?
arrow-icon How to delete an Instagram account?
Or they can be for something complex like:
arrow-icon How to apply for a driving license
arrow-icon How to assemble a water cooled PC
arrow-icon How to apply for a US visa
High Fidelity Prototypes
mocks mocks mocks mocks
Scenarios and User Journeys
Persona
persona
Arun Jain
Class XII
Consumes Information dot Passive
Scenario
Arun wants to make a milkshake, but can’t find the perfect tutorial.
Arun searches for “How to make milkshake” on YouTube Coach
arrow
He is shown search results of various instructional compilations sorted by relevance
arrow
He clicks open the first result, “How to make a Strawberry Milkshake”
arrow
He is taken to the video player page consisting of the compilation with different steps from different videos
arrow
He gives the compilation a 5 star rating as it was helpful, and leaves a comment
Persona
persona
Vimala Sharma
CS Student
Active Contributor dot Consumer
Scenario
Vimala wants to assemble a water cooled PC. She finds a tutorial, and wants to suggest some edits.
Vimala searches YouTube coach for “How to assemble a PC”
arrow
YouTube Coach shows her search results. She clicks open the third result based on their preference
arrow
Taken to the video player page which consists of the compilation, with steps from different videos
arrow
She realises the compiled video is not helpful, and wants to contribute. She clicks on “Suggest Changes”
arrow
An editor opens, where she changes the video sequence and edits some keywords in the steps
arrow
She is taken to YouTube Creator’s page where she can upload the video and check “Suitable for YouTube Coach”
arrow
She wants to add her own video for processor coolant installation; she clicks on Add Video button
arrow
She submits the suggested changes, and her suggestion is submitted for review
Back-end Algorithms
Compiling the Tutorial
Taking the best steps from relevant YouTube videos and stitching them together to make a compilation is done by the Parent Algorithm. The Parent Algorithm uses 4 children algorithms for various specialized tasks. The output is a collection of steps from all YouTube videos, ranked according to confidence scores based on their quality of instruction.
Algorithm A1 For videos with vocal instructions algorithm A1 is used to generate written transcript from audio.
arrow
Algorithm B1 Used to generate written transcript from visual activities based on actions happening in the video.
arrow
Algorithm C Divides the transcript into individual steps and assigns confidence scores to sort the best steps.
arrow
Algorithm D Visual detectors match transcript steps with video screenshots to score the video based on visual relevance.
A detailed look at the algorithms:
algorithms
Comment Refinement
Comments made by the users are continuously analysed by the algorithm. Comments with constructive feedback are used to improve the compiled tutorial.
algorithm
Processing User Feedback
Passive Feedback
Selecting the next video from the suggestions for a certain step (Gives the algorithm an idea about the generalised behavioral patterns of users to determine better videos)
Active Feedback
arrow-icon Editor allowing for people to manually submit improved versions of an algorithmically suggested compilation
arrow-icon Star rating system to determine which compilations are working out and which are not
arrow-icon Comments by users
Conclusions & Future Scope
As the algorithm recommendations get better and coaches give more and more submissions and feedback, YouTube Coach would see a huge increase in its potential of being a good tutorial website. Some future implementations could be:
arrow-icon An insider program similar to YouTube Creator insider, acting as a social media for the best coaches
arrow-icon Can include videos with regional languages
arrow-icon Coach improvement programs where YouTube Coaches can formally enroll in, guiding them to give qualitatively better compilation suggestions
previous Previous Project next Next Project
GenoCorp: Baby Gene Editing Portal
March 2021
banner
Introduction
The project starts with a question, what if you could use character creation screens as seen in video games, for your own actual babies?
The project explores CRISPR, an emerging technology allowing making edits to human and animal genomes. However CRISPR has its limits; it can sometimes make large and unwanted changes to the genome, where improving one ability comes with a trade-off for other abilities.
Very similar to a video game character creation screen...
introduction
The Setting
As CRISPR starts becoming popular, by 2055 it has reached peak popularity with relatively less public awareness. However, by 2100 there is enough awareness about the subject to massively decrease its popularity.
The diegetic prototype is positioned in 2035, when CRISPR is gaining popularity with relatively lesser awareness.
graph
A Brief History of Gene Editing
Our progress in understanding and modifying genomes over time
timeline
Prototype
The scenario is presented through the eyes of GenoCorp, a global leader in fetus gene editing.
mocks mocks
Conclusions & Limitations
arrow-icon It is not necessary that the technology has to fail. Instead, addressing some limitations may indeed make it lucrative
arrow-icon Websites in 2035 may use holograms instead of screens. To replicate that, an interactive AR prototype would have been more engaging
previous Previous Project next Next Project
Architecture Portfolio
2014-2019
presentation presentation presentation presentation presentation presentation presentation presentation presentation presentation presentation presentation presentation presentation presentation