Design portfolio by Sohaj Singh Brar

D D

2014

sign E port folio

Sohaj Singh Brar

ABOUT ME: I am an experience designer, user reacher, illustrator, front-end developer and 5th year under-graduate student of Chemical engineering at the IIT Roorkee, born and brought up in Chandigarh, India.

QUALITY OF IDEAS TECHNICAL KNOWLEDGE PROTOTYPING GRAPHIC DESIGN PRESENTATION LEVEL SKETCHES

Photoshop HTML/CSS TOOLS Indesign

Illustrator

AWARDS: 2013-14 2014 2012-13 2012-13

“

Best Illustrator - IITRoorkee First in Sketching - Srishti’14, IITRoorkee Fine Arts Section Secretary Chief Designer - SAAR IITRoorkee

2012 First in Art Mela Competition 2012 Best entry of Fine Arts’12 2012 Second in Sketching Exhibition

PHILOSOPHY LET THE BEAUTY OF WHAT YOU LOVE BE WHAT YOU DO

TABLE OF CONTENTS ABOUT ME SKILLS

PROJECTS INTERACTION Map Search Broker’s App GIA-Visual Delhi Metro app

1 2 8 12 15

ILLUSTRATIONS

Sketching Fine Arts IITR Commonfloor Illustrations

18 19 19

Freelance work

BRANDING AND ADVERTISING

Logos

SAAR- Campus ways Advertisement Illustrations

22 23

INTERACTION DESIGN

INFORMATION FLOWCHART FOR ENTERING MAP SEARCH User

Homepage (CommonďŹ&#x201A;oor.com)

Map Search

1. First time user

2. Repeat user

Guide the user Background map (BGM) India

Logged in (default cache available)

Last session search

Or BGM of location of user from his IP address

BGM last session

Not logged in

use IP

BGM of user IP location

Search City

Map BGM - Background map Welcome to Map Search QUICK GUIDE TO HELP YOU ON WITH YOUR SEARCH

SKIP AND START YOUR SEARCH

User coming from Home page, City not selected- BGM showing Level 1 (India) FOR NEW USER

2 INTERACTION

MAP SEARCH PROBLEM STATEMENT:

Ideate, conceptualize and prototype a map based search for buying/renting apartment in major cities of India. USER NEEDS:

• Requirement of visual search for apartments rather than list based search. • Search the nearby landmarks within a defined radius. • Attract users to the website keeping their requirements and interests attached. THINGS TO INTRODUCE:

INSPIRATIONS:

• Projects on Map • Landmark Based Search • User friendly map search interface • Responsive map • Map covering the whole viewport • Color of the map • Shortlisting • Sharing location search • Overlays

• http://www.padmapper.com/ • http://42floors.com/ • http://www.mapquest.in/ • http://housing.com/ • http://www.trulia.com/ • http://www.apartments.com/ • http://hotpads.com/ • http://www.zillow.com/

SEARCH YOUR CITY

BUY | RENT | PROJECT

BANGALORE

CHENNAI

MUMBAI

HYDERABAD

DELHI

PUNE

KOLKATA

Map search entrance page (after skiping the guide for new user)

ZOOM LEVEL DOCUMENTATION: Google zoom levels

CommonďŹ&#x201A;oor zoom levels

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

Kms

Not required

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

Lev 20 20 20 20 15 13 12 10 7 5 2.4 1.2 0.6 0.3 0.15 0.08 0.041

Both city and location selected

Leve

Not required

City selected and location not selected PROJECT ICONS

APARTMENT ICONS

APARTMENT CLUSTER ICONS

ON HOVER

DEFAULT

17 16

Listing level

11 10

Area level

Region level

City level

”

Commonﬂoor map scroll

vel 4 - Listing

16 15

Zooming out

14 Spliting

evel 3 - Area Spliting

el 2- Region Spliting

13 12 11 10

Clustering

The Region level cluster icons split further in smaller cluster icons

9 8 7

Clustering

3BHK

Clustering

evel 1 - India

Zooming in

3 2 1

Both city and location not selected

• Customized map color - saturated blue • Streets (color-white) are included after 11th zoom level. • All type of road style features except highway roads were removed from zoom level 1-8 • Many of the May type features like point of interests (poi), arterial roads and landscapes were simplified.

WIREFRAMING: |

Buy | Rent | Projects

Bangalore

Type

Bedrooms

Budget

Koramanagla

My profile

Koramanagla

rating

3.5

Market overview

more > Forum

more >

Price trends

more >

Expert speak

Rate and review

More details >

• User searching for locality (Koramangala) • Dropping on zoom Level -12 • List view and locality information box will be ﬂoating over the map.

Buy | Rent | Projects

Bangalore

Type

Bedrooms

Budget

My profile

Koramanagla

2 BHK apartment Koramangla, Second stage

3 BHK

Posted on 23rd May

View contact

2 BHK apartment

Rs 20L

save as favourities

More details

Details

Koramangla, Second stage Posted on 23rd May

Bedroom bathroom ac tv

Landmarks

Radius

• As soon as one clicks on the apartment from the list view or the apartment pointer, the details about the apartment comes on the right including the images, landmarks, area, other facilities , more details, view contact, save as favourities, etc.

Buy | Rent | Projects

Bangalore

Type

Bedrooms

Budget

My profile

2 BHK apartment Koramangla, Second stage

Posted on 23rd May

View contact

save as favourities

More details

Details Bedroom bathroom ac tv

Landmarks

Radius

List view

• List view will be minimized at this point as the user will concentrate on the selected apartment details (landmarks) only.

Buy | Rent | Projects

Bangalore

Type

Bedrooms

Budget

My profile

2 BHK apartment Koramangla, Second stage

3km, 15min

Posted on 23rd May

save as favourities

View contact

Send message More details >

Details Bedroom bathroom ac tv

Landmarks

Radius

• Clicking on a particular landmark (for e.g. schools), the map will show schools within a particular radius to the selected location (for e.g. Koramanagla) • On mouse hover, the distance and time to be taken to reach from the selected location pointer shall be shown.

OTHER MINUTE ADDITIONS:

Autosuggest list will appear while entering a location. Commonfloor projects will appear separately along with google autosuggest.

If the user tries to enter location before selecting the city, an error dialog box is introduced to guide the user to select the city first

GAMIFICATION CONCEPT: Custom made map using google map api

Easy to use filters

Collapsable filter bar providing more space for user to interact with the map

Personal profile to keep shortlists, items shared with friends,history etc.

Sort by 2 BHK apartment

30,000

Koramangala IInd stage Posted on 28 May

Owner

2 BHK apartment

30,000

Koramangala IInd stage Posted on 28 May

Owner

2 BHK apartment

30,000

Koramangala IInd stage Posted on 28 May

Owner

2 BHK apartment

30,000

Koramangala IInd stage Posted on 28 May

Owner

2 BHK apartment

30,000

m�p�

Koramangala IInd stage Posted on 28 May

Owner

2 BHK apartment

30,000

Koramangala IInd stage Posted on 28 May

Owner

Buy Click to open list view

3 results

Bedrooms: 0 - 6+ Beds

Rent

Search location...

Buy range: 0 - 10 L ` 0

` 10L

Projects

Apartment Type

Bangalore

more ﬁlters

At the bottom to make user feel that the map area is relatively more (like in strategy games - Age of Empires etc.)

More > Metro

Overlays

Directions

Landmarks

LOCATION FOCUSED:

The focus circle can be removed to make user comfortable with the map

The location search will be focused upto some radius which will be shown on the top of the dragger

Legend will be removed. The same info can be accessed in list view and in apartment window.

INTERACTION ON DELETING A LOCATION:

On backspacing the location text (e.g. Koramangala) (still the cursor is in the search location text box) no change will take place, but as soon as the user clicks anywhere outside the search location or even presses enter, city search (the selected one) will take place and the zoom level changes to Region Level.

INTERACTION ON MOVING OUT OF THE VIEWPORT:

Positioning of center of circle

As soon as the center of the circle is out of viewport, the circle will disappear but the pin pointer (searched location) will remain

Center out of viewport

When the pointer is out of viewport , the user can be brought back by clicking on “Go back to your location” with pointer and focussed circle.

Go back to “your location”

OTHER INTERACTIONS: a

Collapsable list view

Unplotted list

The apartment without lat-long info which is already shown in list view will be available separately as unplotted list.

List will be available till it is not manually minimized. Once that is done, on hover of minimized view, following interaction will happen. b

6 INTERACTION FINAL PRODUCT: • User friendly map search interface • Map covering the whole viewport

• Landmark Based Search

• Overlays

• Customized map • Responsive map

FINAL LIVE MAP SEARCH: available on http://www.commonfloor.com/apartments-for-rent/maps

• Sharing location search

maps Buy Search

Onclick - Search icon 1. For the new user,search location box will be present on the screen only 2. But for old users, it will disappear and 3BHKcan be viewed only by clicking on the search icon

Rent

Bangalore

Buy

Search location... 3BHK

RentRent

3BHK

Apply Filters List view

3BHK

Apply Filters Shortlist

Bedrooms :

` 0 - 50K

20K

3BHK

40K

3BHK

Bathrooms :

3BHK

1 + Baths

Metro

3BHK 3BHK

3BHK

Type :

3BHK

3BHK 4.5

1 - 7+ Beds

Rent Range :

3BHK

3BHK Individual House 3BHK Apartment

Row House

Villa

Plot

3BHK 3BHKFilters More 3BHK

My proﬁle

3BHK 3BHK

3BHK

3BHK 3BHK

3BHK

The Filters will be available alongwith the search and all3BHK the filters can be viewed onclick on Filter tab

3BHK

Filters 3BHK 3BHK

more ﬁlters

FEEDBACK HELP LOGIN

maps

POST YOUR REQUIREMENT

In this ideation process, map will be in full-screen view and navigation bar is kept at left in order to provide better visual experience to the users. All important information like SEARCH for location, List view of apartments, Shortlisted properties, Metro info, My profile, filters, feedback, Login tab etc. can be accessed all the time with better usability and visual exp.

Marathalli, Bangalore

3BHK 3BHK

Locality search: Searching the location (for example - Marathalli) will provide the info about that location in right pop up.

3BHK

Search 3BHK

2 of 15

3BHK

List view

About Marathalli: 5

3BHK

Shortlist

Phase 1 Phase 2 Metro

Phase 3

It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here',

3BHK 3BHK 3BHK

Phase 4 My proﬁle

Market Trend

3BHK

On click -Metro3BHK icon 1. The Metro overlay will appear 3BHK

3BHK

On hover - Metro icon 3BHK 1. All the Phases will appear and user can choose one particular icon and only that phase will appear on the map

Market Overview

3BHK 3BHK 3BHK

3BHK

Filters

FEEDBACK HELP LOGIN

Popular Projects >

Project

Asking price trend

3BHK

Nearby Services

3BHK

Schools

Restaurants

Night Clubs

ATMs

Hospitals

Night Clubs

Night Clubs More >

7 INTERACTION

MAP SEARCH

(CONCEPT-2) Shortlist this project

maps

Prestige Shantiniketan Apartments

458

Shortlisted

results

List view

3BHK

Sort by

3BHK

2 BHK apartment

30,000

Posted on 28 May

About : Price: Unit details:

3BHK

Builder: Possession Date: 3BHK

Owner

Locality: 36 Properties for SALE

3BHK

12 Properties for Rent

3BHK

Koramangala IInd stage

Shortlist

Sarjarpur Outer Ring Road, Ibbalur

3BHK LIST3BHK VIEW List view of the apartments searched can be viewed in List view icon where total results (mapped as well as unma3BHK 3BHK pped) will be shown alongwith the shortlisted items (apartments) in differ3BHK ent tab

Gallery: 3BHK

2 BHK apartment

30,000

3BHK

Koramangala IInd stage

Metro

Posted on 28 May

Owner

2 BHK apartment

30,000

Koramangala IInd stage

My proﬁle

Posted on 28 May

Owner

2 BHK apartment

30,000

Posted on 28 May

2 BHK apartment

30,000

2 of 15 3BHK 3BHK

3BHK

3BHK 3BHK

Posted on 28 May

3BHK

2 BHK apartment

Owner

30,000

Koramangala IInd stage Posted on 28 May

FEEDBACK HELP

Owner

3BHK

Amenities

3BHK 3BHK

Koramangala IInd stage

Filters

3BHK

Koramangala IInd stage Owner

3BHK

Play Area 3BHK

PROJECT SEARCH The project search will be introduced directly into map search which can be searched in the Search itself which can more search projects directly from commoPOST YOUR REQUIREMENT ﬁlters nfloor’s database. 3BHK

Specifications

Recreaction Faciliity

Swimming pool

Schools

Nearby Services Schools

Restaurants

Night Clubs

ATMs

Hospitals

Night Clubs

1. This design efficiently utilizes the screen area for user to explore the map. 2. Availability of more space due to the addition of filters within search bar itself. 3. List view window is made floating which will automatically collapse providing extra space for user while searching on the map. 4. All the features of concept 1 will also be introduced in concept-2 i.e. Focused search within a defined radius input, nearby area distance etc. 5. The proposed metro stations will be plotted (which are still not available on google) using lat-long information and will soon be introduced.

More >

TURBO AGENT

8 INTERACTION

‘TURBO AGENT’- Mobile Application PROBLEM STATEMENT:

Make a mobile app for Brokers/Dealers to manage their Properties/Clients/Teams creating an online network with other brokers. USER NEEDS:

1. To handle various client requirements for one property. 2. Management of various tasks assigned to team members. 3. Management of number of properties for a single client according to his requirements. 4. Communicate with other dealers for the requirement of a property or a client.

BROKER

PROPERTY MANAGEMENT

CLIENT MANAGEMENT

TEAM MANAGEMENT

Turbo Agent (ﬂowchart) Properties

Clients

List of Properties

Networks

List of Clients

Property available at Network

(Available with user)

Clients Dealers available at Network

property available, but not client

Prospects Contacted for property Client 1

Client 2

Client available, but not property

Available

Task can be added during “Add Client” Call

Message Pipeline for property

Property available, Client available, but does not like (Not done) Done

1. Requirement deﬁned 2. Property avaiable

Site visit

Pipeline for Client

Deal with owner

Property 1 1. Requirement deﬁned 2. Property avaiable

Property 2 Done

Site visit

Deal with owner

Not done

Tasks

Messages

Client

My Tasks

Team Members (TM)

Owner

Network (dealers)

List of Team Members

Team Tasks

Task with client e.g meeting at 9am.

Client 1

Call

Client 2

Reminder

1. 2.

Team Task

TM 1

TM 2

TM 3

Can be alloted to any team member from list

The earlier software for searching study materials in the library was no Search database of all books and journals. use. It didnâ&#x20AC;&#x2122;t have any GUI due to which user had to search manually

MEDIUM FIDELITY PROTOTYPE:

TURBO AGENT

ot convenient to y.

BENEFITS: • Easy to connect to other brokers/dealers • No need to use any other Task Management applications as it can handle your as well as the team’s tasks. • Flexible and easy to manage properties and clients at the same time. • Easy to handle team members and their tasks

• This is the medium fidelity prototype of the application. • The visual design of the application is still in process. • The final product will soon be in the market.

PERSONA:

ABHAY GUPTA • Dedicated to his studies. • One can always see him helping juniors in their projects. • There are always new books in his room on different discipline

almost every week.

Likes: Digital Electronics and Embedded Systems, C++, C Reading fiction, playing guitar, gyming, doing creative things.

GEO-REFERENCED MAPS OF MAHATMA GANDHI CENTRAL LIBRARY (MGCL):

Basement

SUGGESTIONS:

Ground Floor

Second Floor

• Make the UI as minimal as possible • What if the required book/document is not on the right rack or is misplaced? Atleast the user should be able to reach the rack at that floor even if tags on the documents are missing. • Develop a mobile application similar to the software for document search for the library.

12 INTERACTION

‘GIA’-VISUAL BOOK SEARCH ENGINE PROBLEM STATEMENT: Develop a visual book search engine - GIA (Geographical Information Access) for locating books in the Mahatma Gandhi Central Library, IITR building. The software has been operationalized in the library. USER NEEDS: 1. 2.

Graphical User Interface (GUI) based search. Search using title for the book or the author name.

Highlighting the location of the relevant rack on the corresponding floor. AERIAL VIEW SECOND FLOOR

FIRST FLOOR

FRONT

BASEMENT

GROUND FLOOR

USER RESEARCH: A survey was conducted in order to understand and analyze the user needs.

responses

68.76%

does not use the exsisted software

59.38%

could not even find the requisite book/document using existing search methods

92.90%

asked for the development of new software/application

72.50%

use other methods of searching the documents other than existing library software - WebOPEC

13 INTERACTION

BAD UI OF PREVIOUS: UI is quite complicated which makes it very difficult to understand

GLITCHES: Software searches just on the basis of the tag numbers provided on the books. In some cases, these tags are missing.

Missing tags

LIBRARY SIZE: Indiaâ&#x20AC;&#x2122;s second biggest library. Its collection has grown to more than 3,50,000 documents in all media. A visual aid is required to provide the view of different sections of the library in search engine

DOCUMENTATION:

Aerial view of geo referenced map of first floor of the library

Entrance

W S

The respective floor where the searched document can be found is automatically highlighted

The rack where the searched document can be found

Search here

14 INTERACTION PROTOTYPE:

The future work involves the development of mobile application of the similar software. PROTOTYPE INSTALLED IN LIBRARY:

WIREFRAMES:

Metro Raasta

• Tells the number of stations between the source and destination point. • Name of the stations • When to change the lane

Nearby Metro station Find way About

Find Way

Back

Source Enter Station Destination

Two nearby stations to your location Enter the starting point (station)

Enter Station

Enter the end point

• Shows the nearby metro stations to your location • Direction and time to be taken to the nearby station

Shows the directions, distance and time to be taken from your location to the nearby station

Back

+ -

Station 3 - Directions - Time to be taken Station 4 - Directions - Time to be taken

Default map interactions like zoom in/out, tap, hold to drop pin

Back

Find Way

Nearby Metro Station

2 November

Wedding Cake special - limited ...

Paul

31 October

Wedding Cake special - limited ...

Back

Find Way

Source Station 1 Destination Station 2 Go

Line 1: From Station 1 to Station X (Number of stations) Line 2: From Station X to Station 2 (Number of stations)

Station1 - source The list of stations between station1 and station 2 appears in a clustered form This division occures when the lane changes in between the source and destination station

Number and name of stations on line1

Line 1: From Station 1 to Station X (Number of stations) Metro 1 name Station a Station b

Scroll down

Station c Station d Station X Line 2: From Station X to Station 2 (Number of stations)

15 INTERACTION

‘METRO RAASTA’ - Mobile Application WHAT I DID:

Conceptualized and designed ‘Metro Raasta’ app for Batliboy corp which tells the nearby metro station to your location in Delhi and also tells the number of stations between starting and destination point giving the brief description where to change the lane (if required). ABOUT THE CAPITAL: • More than 20 million people reside in Delhi NCR. • Daily ridership is around 2 million.

PERSONA:

SIDDHARTH BATHLA Siddarth Bathla is a final year student at IIT Roorkee, Uttarakhand, India. Likes: taking part in coding quests, travelling, to be punctual. Dislikes: traffic jams, standing in queue

STORYBOARDING:

TASK ANAYLSIS: Start

Travels by train to enter Delhi NCR

First timeTravels by friendâ&#x20AC;&#x2122;s car

Yes

Private vehicle

Second timeTravels by Metro

Which station to board on?

2hours delay (relatively) due to traffic jam

Infeasible

+15-30 mins These complicacies can be reduced

Where to change the lane?

Whatâ&#x20AC;&#x2122;s the destination station name?

Stop FINAL PRODUCT:

FINAL PRODUCT:

• Easy to understand and operate • User friendly interface • Operable even without internet connection • Information provided is useful in everyday life by the people of Delhi • Already more than 2000+ user installs.

ILLUSTRATIONS

ANXIOUSNESS Pictured an aged man The feeling of apprehension, fear of reality of life has been shown. The reflection through his glasses represent his future, the future which is no more bright.

WORK IN PROGRESS

18 ILLUSTRATIONS

SKETCHING ACHING LONLINESS OF LIFE The dimness in the eye, dullness of expressions and wrinkles on the face show the cruelty she faced in her whole life depicting the mercilessness of the world hence blocking the sight of her only working eye.

WORK IN PROGRESS

FINE ARTS TEAM

FINE ARTS SECTION - IITROORKEE

SECTION ILLUSTRATIONS

EXHIBITION HALL

19 ILLUSTRATIONS

CONCEPTUAL

DIGITAL

ILLUSTRATIONS FOR UX TEAM - COMMONFLOOR

WORK IN PROGRESS

FREELANCED WORK ABSTRACT

CHARCOAL

PAINTING

PORTRAIT

20 ILLUSTRATIONS

CARBON PENCIL

CHARCOAL DIGITAL

STIPLING

MIXED MEDIA

DIGITAL

BRANDING AND ADVERTISING

LOGOS

22 BRANDING AND ADVERTISING

SAAR-Campus Ways Map of IITRoorkee Campus , showcasing important landmarks, designed as a project work for the branding of SAAR.

SAAR is a first of its kind social network for the Roorkee Community, which apart from connecting people also provides crowd-funding to projects and covers latest news involving the community among a host of other features. I have been serving in the top level management of SAAR and am currently involved in user interface designing, sketching and adding new features.

The upcoming cover sliders for commonfloor.com

MTNL 3G Ad

Ad for the launch of MTNL’s 3G “Jadoo” depicting the speed with which user can download and buffer easily. Caricature made on WACOM INTUOS-4 tablet.

23 BRANDING AND ADVERTISING

Apparel advertisment for silk products

SBI redeem points ad This ad was published under the firm Adfactors advertising during my training period. This was published to aware users to redeem their points which they get while swiping the credit card.

Thank you Sohaj Singh Brar Undergraduate Bachelor of Chemical Indian Institute of Technology Roorkee Roorkee, India 247667 +91 9557020932 sohajbrar.iitr@gmail.com