Portfolio - Adit Gupta July 2019

You might also like

Download as pdf or txt
Download as pdf or txt
You are on page 1of 63

Adit Gupta

Portfolio
https://aditgupta.design
The journey so far

01
Started my journey as a freelance
2009 - 2010
developer and designer. Became author
Adit Gupta

on Smashing Magazine and Open

The journey Source For You.

Joined Sourcebits as Technology


Evangelist. Worked with the design 2010 - 2011
team on client apps. Wrote NLP and
image classification programs. Python
lead.

Joined Verchaska as Lead Interaction


2011- 2012 Designer. Managed a team of four
designers from IDC, Mumbai

3
Founded Function Space - A social
2012 - 2015 learning network for science. The startup
was VC funded.

Joined PayPal as Senior Designer/


2016 - Present
Design Lead for Insights
Adit Gupta

The journey Became a Google Developer Expert in


Product Design. Mentoring startups
2018 - Present
through the Launchpad program.

4
Sketch-the-data

02
Sketch-the-data
A design facilitation exercise for building
data comprehension and visualisation of
data through team collaboration.
Adit Gupta

Timeline : 2016 - Present

Role : Founder/ Designer/ Developer

Timeline : 2018 - Present

Role : Creator/Design Facilitator


6
What problem are we solving?

We faced multiple issues with communication and understanding of data among product, design, data and
engineering teams. This needed to be resolved for building better products.
Adit Gupta

Sketch-the-data was pivotal in resolving these problems and led the way for faster product
development.

7
Why?
Integration Insights

To understand data clearly To align teams on data To understand any bottlenecks

Thanks to Dan Brown’s workshop!


8
9
Integration Insights
Data questions
What do we aim to learn from the data?

How was the data collected?

Do we need to clean the data? Is there any data


missing?
Integration Insights

What’s the latency and frequency?

Is it quantitative or qualitative data? Is it nominal,


ordinal, interval or ratio?

What are the observations (rows) and variables


(columns)?

What do we want to show?

10
Building the data story
DATA COLLECTION

API call data is collected across several tables and stored in a


PayPal storage system.

LATENCY AND FREQUENCY

Latency is 3-4 hours with a frequency of 30 minutes. Data is


available for 10 days

TYPE

Qualitative data - Nominal over interval

VARIABLES

Time, URL, Status, Account Number, API Request type, API


Response Type, Debug ID, Error code and description
A DETAILED TIME SERIES VIEW FOR DEVELOPERS

Line graph for showing API error and success rate over time

AN AGGREGATED VIEW FOR MERCHANTS


Integration Insights

A donut chart for showing aggregated success/failure calls

API ERROR TABLE

All API erros listed in table view for developers

13
14
Integration Insights
Function Space

03
Function Space
A social learning network for science that
provides a complete ecosystem (articles,
video lectures, problem-solving,
discussions, and networking) for
participants from academia to corporate
research.
Adit Gupta

Web
iOS

Timeline : 2012 - 2015

Role : Founder/ Designer/ Developer

Designed and developed the platform.


Led a team of 52 members.
Raised funds from an institutional VC.

16
What problem are we solving?

There’s no single platform for students and professionals to discuss, learn, and network in the field of higher
science and computation. We are providing solution for a market worth $1.9 Billion in e-learning for STEM
(Science, Technology, Engineering and Mathematics)
Adit Gupta

f(x)
Function Space aims to provide a complete learning environment to gain and share knowledge via
discussions, problem solving, video lectures, interactive visualizations and a networking platform for
peers to connect with each other.

17
Version 1- Minimum
Viable Product
I designed and developed the product from
scratch. It was built upon the Laravel
Framework
Adit Gupta

The features included discussions, learning


material, articles, math challenges, ability to
follow peers and message them.

This was based on secondary research and


personal needs.

18
Features and design
decisions
Sidebar navigation for scaling functionality.
Task-based organisation scheme.
Adit Gupta

- Discussions
- Groups - similar to subreddits
- Learn - videos and articles
- Peer feed - Content by friends
- Challenges - math and physics problems,
- Labs - experimental features like
computational engine
- Stats - User ranks
- Messages - Peer to peer messaging

19
Personas
Adit Gupta

20
The content was not personalized Content discoverability
Issues in Users from high school students till Taxonomy, navigation and search

the first professionals were not get relevant issues resulting in higher bounce rates.
content due to lack of personalization.
version
Adit Gupta

Lack of engagement Feature issues

22% of users were not engaging with We didn’t had appropriate tools to let

discussions that had more than 50 users express their opinions with

comments. scientific rigor.

Low returning users


No real-time notifications
We didn’t had real-time notifications on The platform lacked the stickiness to
keep users engaged on the platform.
the platform. It’s an important feature for
social networks.

21
The experience hierarchy*

Meaningful
Users were not getting relevant content

Pleasurable
Adit Gupta

The platform lacked modern social


Convenient
networking features
The platform had discoverability issues

Usable
The platform had no usability issues Functional
The platform was functional and stable

*Based on PSSUQ survey and user interviews. 2 post grads and 3 doctorates from IUCAA. 3
22 undergrads from IISc. 2 professionals from a data science company.
Our approach
Our focus was on the first three tiers of the hierarchy.

A meaningful product should be of personal significance to each user whereas a pleasurable experience comprises of friendly
language, aesthetics, arousing curiosity, creating flow and leveraging game mechanics.

Our users mentioned Stackoverflow, Spotify, Reddit for personalised experience. They especially loved the tagging feature
on Stackoverflow. Facebook was the recommended platform for messaging.
Adit Gupta

Wikipedia was frequently mentioned as the platform for deep-diving into a subject.

The Hook Model was kept as the basis for user experience on the platform. The model has been described in the book
Hooked authored by Nir Eyal. It’s based on the study of psychology and cognitive biases that can lead to a good user
experience.

23
The hook model
Adit Gupta

24
How me measured?
Adit Gupta

25
Wireframes and Interaction diagrams
Adit Gupta

26 Onboarding flow
Wireframes and Interaction diagrams
Adit Gupta

27 The real-time feed


Wireframes and Interaction diagrams
Adit Gupta

28 Interaction diagram
Version 2 - Color scheme
Adit Gupta

29
Version 2 - Typography
Adit Gupta

30
Version 2
Adit Gupta

The new landing page


31
Version 2

Onboarding and personalisation


Users can select their subjects and level
of rigour.
Adit Gupta

32
Adit Gupta

Video Walkthrough
https://vimeo.com/248329670

33
Version 2

Real-time feed and Quarter Topic


Central location comprising of
everything on Function Space based on
users preferences— Peer activities,
Discussions, News, Books, Articles and
Challenges. A real-time feed meant
Adit Gupta

reduction in cognitive load thereby


making the whole experience more
pleasurable. (second tier of the
pyramid)

Quarter Topic
Sharing 4 interesting science topics in a
day with users to keep them engaged
on the platform. (Acting as a trigger)

34
Version 2

Powerful search engine


We built a new search engine from the
ground up that had auto-suggest, auto-
complete, and most importantly, auto-
categorization of content.
Adit Gupta

35
Version 2

Enhanced learning section


We included lots of new content with
proper taxonomy and labelings.
Adit Gupta

36
Version 2

A new look for the profile page


We improved our profile page in terms
of UI and content.
Adit Gupta

37
Vector discussions
Online discussions are “scalar” in nature. They have magnitude in terms of number of comments but don’t give you a sense of where the
discussion is going unless you analyse all the comments in a particular discussion. That’s precisely what we decided to do at Function Space.
We used natural language processing to analyse all the comments and auto-tagged the comments based on subject matter. The max entropy
classifier in NLTK was used to categorise the comments with pre-defined tags.

All the comments were visualised in a time-series graph based on tags. This gave a true picture of where a discussion was heading based on
subject matter. So, we had magnitude as well as direction thereby leading to “vector” discussions.
Adit Gupta

38
Version 2

Visual equation editor


Adit Gupta

39
Equation caller
Writing equations was a critical function on the platform. So, we decided to provide enough flexibility with this feature so that users with
different skills can easily write equations in discussions.

Advanced users could always use LateX for equations. For intermediate users, we introduced a visual equation editor to make equations
without the hassle of remembering LaTeX syntax. And for beginners, we made a custom equation caller, so you just had to start typing the name
of the equation and the system automatically wrote the needed LaTeX for it. The equation database was crowdsourced. So, users had the ability
to add equations to the database.

Adit Gupta

40
New features and Personalization of content Real-time feed
We introduced onboarding to let users The content was provided in a real-time
enhancements select their preferred subjects and level feed that gave a better experience
of rigor.
Adit Gupta

Better Taxonomy Real-time notifications

All the content on the platform was These led to better interactions with

properly categorized and labeled peers

Vector discussions Better tools


We used Natural Language Processing We provided a range of equation and
to auto-categories comments for easy diagram editors.
comprehension

41
Function Space iOS app
Function Space was launched on iOS to
provide instant access to discussions,
articles and science news that are
available on the web platform. The app
was released after getting regular
feedback from our user base to provide
“on-the-go” access to content along with
easy sharing options.
Adit Gupta

42
Function Space iOS app - Screens
Adit Gupta

43
Results Better engagement Better satisfaction
The average duration on the platform Our overall satisfaction scores also
increased by 9 minutes and the bounce increased by 3 points. 
rate decreased by 15%.
Adit Gupta

Better discoverability Improved knowledge base

Smart search led to more search We were now also able to gauge

queries with reduced clicks to find the content requirements for a particular

relevant content. topic by analysing search queries and


tag clicks. 

44
UX Assist

04
UX Assist
UX Assist is an iOS app that provides
workflows for designers driven by UX
activities. It’s the first app of its kind that
has grouped UX activities into 12 unique
workflows based on the kind of product
you’re working on, namely, an optimum
viable product, minimum viable product,
Adit Gupta

client-based product and a data-driven


product.

iOS
Timeline : 2016 - Present

Role : Founder/ Designer/ Developer

Designed and developed the app.


App store – UX Assist app | Website – UX Assist

46
What problem are we solving?

There’s no single tool available that can assist in the design process by providing suggestions and guidelines
for various UX activities.
Adit Gupta

The app gives you activity based recommendations for each product type and assists you in making
your own workflow according to your business and product requirements. Moreover, you get access to
over 100 UX cards with bite-sized information about each activity.

47
Secondary Research
Adit Gupta

I started digging into reports, papers, articles, and conference videos to understand how designers work and the design
processes they follow for their products. A report by NN/g revealed that 75% of designers perform 16+ UX activities while 50%
perform 25+ UX activities. All these activities are related to user research, information architecture, interaction design, visual
design, and testing. Another survey conducted by Leah Buleyindicated that partial implementation and lack of understanding of
UX design process accounted for 49% of problems that prevent companies from having a greater impact of UX on their
products.

48
Primary research findings
Conducted interviews with 10 designers across the globe

Design processes are tough to follow due to various constraints but can be very rewarding when done effectively.

Design processes vary according to product type, nature of business and time, resource and budget constraints

Adit Gupta

49
Optimum Viable Product
Synthesis of You need an OVP when you’re dealing

primary and with a well-established market that has


multiple competitors.
secondary Minimum Viable Product

research You build an MVP when you’re working


on an innovative product with limited
Adit Gupta

time, customer data, money and people


Based on my research, I
resources.
decided to distribute
various UX activities into Client-based Product
four product types — It’s suitable for design agencies dealing
Optimum Viable Product, with clients for designing digital
Minimum Viable Product, products.
Client-based product and
Data-driven Product
Data-driven product.
If you have a product with an
established customer base, you should
go for a data-driven product to further
50
enhance it.
App flow
Adit Gupta

51
Screens
Adit Gupta

Product type Workflow UX Cards


52
Results Financial success Critical success
The app made it into top 50 paid The app has been mentioned on Swiss
productivity apps for more than 25 Miss, UX Blog and form.de.
countries.
Adit Gupta

Community success
The app was featured on Product Hunt
front page

53
Kitchen Sense

05
Kitchen Sense
Kitchen Sense is a smart kitchen device
that tracks the volume of your grocery
items and auto-populates a list of items as
the volume decreases beyond a specified
threshold. The user can then order the
items from a local vendor with one-click
Adit Gupta

payment.

IoT
iOS
Timeline : 2016
Role : Designer/ Developer
Designed and developed the prototype.

55
What problem are we solving?

The need to check the quantity of grocery items in your kitchen is a necessary but a tedious and time-
consuming chore. We automate it with Kitchen Sense.
Adit Gupta

Kitchen Sense is an IoT device that can be placed beneath any jar containing a grocery item, like, salt,
sugar, pulses, etc.

56
How it works
Kitchen Sense is an IoT device that can be
placed beneath any jar containing a grocery
item, like, salt, sugar, pulses, etc

The device has a flexi-force sensor that


monitors the weight of the item and sends
the data in the background to the companion
app.
Adit Gupta

As the weight of an item goes down below a


specified threshold, the device will notify the
companion app and a grocery list will be
populated for you. This list can then be
shared with a local grocery store and
everything will be delivered at your home in
no time!

57
The prototype
I followed a “hardware-first” approach for this
project. The idea was to first understand the
feasibility of the project with a prototype
using Arduino Yùn and a Flexi-force sensor.

The sensor is piezoresistive. The harder you


press, the lower the sensor’s resistance.
Pressing hard, the resistance changes from
infinite to ~300k. A utensil filled with lentils
Adit Gupta

was placed on the sensor. As the level of


lentils goes down, the resistance goes up. 

When the resistance crosses a threshold


value, Arduino Yùn sends a mail to a linked
account informing about the low level of
lentils in the utensil. Temboo API was used
to send mail to a linked account. (The
production unit will send a notification to the
companion app instead of a mail.) The
prototype was successfully tested in 2
homes.

58
The device
12 cm in diameter, weighs less than 100
grams, adhesive strip, rechargeable battery,
one recharge lasts 2 months

Powered by ATMega32U QFN, nrf8001 BLE


Adit Gupta

59
The companion app flow
Adit Gupta

Add device Device connected Select item Select quantity

60
The companion app flow
Adit Gupta

Calibrate - I Calibrate - II Status of your grocery items A grocery item gets


added to shopping list as
it runs low
61
The companion app flow
Adit Gupta

Shopping list Checkout Order placed Track order

62
Results The project won second place at
Sequoia Hackathon 2016
Adit Gupta

63

You might also like