An NID & SAC (Student Activity Council) Initiative
MyPlace
Studio 3
A housing interface for the NID community
Guide Profile Prof. Rupesh Vyas
Senior Faculty, Communication Design Head of Information Technology
Areas of Interest ~ Interaction Design, Interface Design, Information Design, Data Visualization, Public Information Systems, Generative art and Sciences Student Project | Anupriya Arvind PGDPD Graphic Design ‘11 Guide | Prof. Rupesh Vyas
Headers | Ubuntu Bold | 16 pt. Body text |Ubuntu regular | 9 pt. | leading 14 pt..
“
I believe in the ubiquitiveness of design. Design should not shout. The most appropriate design is something that you may not even notice.
“
Type setting |
Rupesh Vyas, when asked his thoughts on design ~
Studio 3 // Anupriya Arvind // PGDPD - Graphic Design // 2014
Studio Three is the third project that forms
MyPlace
the PG - Graphic Design curriculum. It expects
About Studio 3...
the student to have a holistic understanding
~ Looking at Systems ~
their experiences in this final concluding
of his/her learning in two years and apply project at NID. We were given a project brief of looking at an overview of system design and understanding
THINK TANK...
and comprehending an how any system
Systems design is the process of defining the
functions and operates.
architecture, components, modules, interfaces, and
It also dealt with problem finding and reshaping specific aspects of a system in our capacity as a graphic designer.
data for a system to satisfy specified requirements. Systems design could be seen as the application of systems theory to product development. There is some overlap with the disciplines of systems analysis, systems architecture and systems engineering.
“
Information technology and business are
“
becoming inextricably interwoven. I don’t think anybody can talk meaningfully about one without the talking about the other. Bill Gates ~
Studio 3 // Anupriya Arvind // PGDPD - Graphic Design // 2014
MyPlace
Since, 2011 The National Institute
and negotiating with owners,
with basic info on other facilities
of Design has discontinued in-
scouting and hunting for suitable
was planned to be developed as
The Project...
campus housing facilities for Post
places, having to shift places every
a student led activity seeking
Graduate Students citing paucity
few months because of prices
help and support from the
~ The What and Why? ~
of space in NID hostels, increase
and other issues began to take a
institute, which would aim to solve
in student numbers and budget
toll on everyone. The other issue
accommodation and other issues
constraints as major reasons.
was locating other basic facilities
that a new entrant and other ex-
in the vicinity like pharmacies,
students at NID would face.
Also, the fact that Post Graduates come with a certain advantage of age, experience and have ‘seen the world’, they would be able to manage without housing facilities, was a valid reason for the institute for the above decision. Having said so, the accommodation did pose to be (and is still) a big problem. The entire rigmarole of looking for accommodation, talking
A SYSTEM FOR THE SYSTEM...
“
In today’s age of technology awareness, an interface is not just looked upon as a website or something that people who have computers use. It has moved beyond
“
that looking at solving bigger issues like gaps in interpretation, comprehension and hierarchy of information systems. Me, when asked “Why an interface?” ~
laundry, tailors and all the other macro and micro needs that arise in a students life which needed to be identified alongside the hunt for a ‘home’. This was a potential problem that was hampering the students’ general attitude towards their work, which should be the focus. Hence a Housing guide along
Building an interactive platform for housing solutions. Formalizing and standardizing the process of reporting and finding accommodation. Quick map-up of basic everyday facilities in the neighborhood. A system with authentic and reliable information and guidance, that can be used and updated by students on a regular basis. A system that could be a step towards solving more complex housing needs e.g. city, state etc.
Studio 3 // Anupriya Arvind // PGDPD - Graphic Design // 2014
Beginning a project needs some
MyPlace
backup knowldege and homework
Before We Begin...
... that implies lots of reading and understanding of various apsects
~ Understanding of Systems, Interaction Design, HCI ~
that make up the foundation of
Select Reading List
the project. In this case it was Interaction Design and Human Behavior, so in a way it was not just getting the technical terms right and what famous people in UX/UI (User experience/User Interface) have said and done but also developing and exptrapolating my own theories of Human-Computer interaction and Behavioral Change in communication. It is quite a task to interpret and form your own anologies of data unless there is in-depth understanding of the subject. After many fruitful discussions with
Don’t make me think ~ Steve Krug
my guide, I referred to some books and many online journals and articles. Here is a select reading list of the same.
The Invisible Computer ~ Donald A. Norman Designing for Interaction ~ Dan Saffer
Also read, 10 Heuristic Evaluations
by Don and Jakob Nielsen
Designing Interactions ~ Bill Moggridge
Studio 3 // Anupriya Arvind // PGDPD - Graphic Design // 2014
User Interface as Systems Design
User Requirement
Security
~ Interpretation of a paper written by Harold Thimbleby, Ann Blandford, Paul Cairns, Paul Curzon & Matt Jones
Usability User Interface
Development & Backend Environment
Agile Methodology
Many goals cannot be achieved by
change subsystems (for instance,
simple systems. Most interesting
to make them more efficient)
systems involve people interacting
without detriment to the overall
with each other and often with
system behaviour, provided the
complex computer systems, and
interfaces are maintained. In
all within some bigger system
fortuitous cases, of course, one
that is intended to achieve goals
may improve systems by changing
such as “staying in business, while
interfaces, but in practice it
adhering to regulatory and legal
has been found that carefully
requirements.�
managing the separation of
It is well known that interacting subsystems can exhibit complex
Compliance
behaviour that no subsystem alone may be able to exhibit. To avoid such undesirable problems or complications arising in new systems it is crucial that the interfaces between subsystems are well-defined, understood and simple.
FRAMEWORK OF USER INTERFACES
The model above is a representation of how User
An interface specifies how
Interface is connected with other measureable
subsystems interact with each
and non measureable elements that in turn
other, and a good interface
support each other meanwhile also developing
deliberately hides details that
the framework of the User Interface.
are irrelevant. Once interfaces are well-defined, it is possible to
concerns of different subsystems through well-defined interfaces is crucial to successful design. To reason clearly about a subsystem without having to know everything about all other subsystems: because their details are hidden, their details are irrelevant. The value of good interfaces between subsystems has been known for a long time. However this knowledge has not been extended to user interface design; for example, a comprehensive textbook on software engineering
MyPlace
A design is a model without any implementation-
(Sommerville, 2001) includes
computer systems, there are
specific or technology-specific details. A model is
a thorough discussion of interface
usually many parallel interfaces
a design with those details. Or
design but the chapter on user
(in the systems sense). There
interface design does not take a
is a great deal of interest in
systems approach, being entirely
designing systems so that users’
conventional user-centred design.
awareness of interaction (and likely
Modeling” is describing something you know. A good model makes correct assertions.“Designing” is manipulating space for things you don’t know. A good design e.g., lets you change things easily.
“
“
Studio 3 // Anupriya Arvind // PGDPD - Graphic Design // 2014
Typically the interface between the human and the technical
Alistair Cockburn ~
system—the user interface—is deeply entangled with the internal
consequences) does not lead to panic or other extreme actions outside the specification the primary interfaces.
details of the system. This is
Technology is changing, and ideas
Influenced by :
exactly the wrong way to do it.
about the best ways of designing
Ideally based on :
User Interaction
User interfaces are often designed
user interfaces are also changing.
User Task
User’s task
to control as many features of
For many tasks, GUIs (Graphic User
User’s previous knowledge
User’s previous knowledge
the system as possible, so this
Interfaces) are easier to use than
and experience
and experience
entanglement is inevitable. Indeed
command lines, and for a while
there is a line of thought within
they have been the best way of
HCI - that one central role for the
interacting with general purpose
user interface is to communicate
PCs. We have excellent visual
the underlying system model
computing skills, and GUIs exploit
to the user. Interfaces are also
these skills (e.g., recognising
deeply entangled with the social,
overlapping windows to raise the
perceptual and cognitive details
level of complexity that is easy to
of the human: hence the lively
interact with.
SYSTEM IMAGE
debates about design, colour, screen layout, culture, and so forth. These issues have a significant impact on the success of the combined human-system.
DESIGN MODEL
USER’S MODEL
However, the recognised strengths of GUIs do not mean they are best in general. Indeed, because GUIs are so good, they can give the surface impression of providing
It is a truism that there are no
good solutions while actually
easy design solutions, and one
forcing the interaction to an
often has to build prototypes
inappropriate level. But that is just
and iterate design to identify
one aspect of the entire spectrum
feasible improvements. In human
of User Interfaces.
Studio 3 // Anupriya Arvind // PGDPD - Graphic Design // 2014
Analysis
01
Research & Information Collection
Execution
02
Brain Storming | Brain Sorting
03
User Profiling
04
Persona & Scenario Building
05
Case Studies
06
Understanding Task Flows
The Structure ~ Project Timeline and Contents ~
MyPlace
Finishing
07
Understanding Grids
09 08
Wire frames & Schematics
Color Palette
10
Logotype & Type Selection
11
Iconography
12
User Interface Design
13
The Road Ahead...
I have changed my house 5 times in one year. It’s a different story everytime... sometimes the
“
“
Studio 3 // Anupriya Arvind // PGDPD - Graphic Design // 2014
landlord suddenly has a problem with my late hours, sometimes the rent suddenly increases. I am always staying with someone on a temporary basis as I don’t know how to look for a place or who to ask! Riya (name changed on request), NID student ~
01
Information Collection ~ Research & Data Collection ~
The current way of informing about
Rent agreements which are
available accommodations is by
important for today’s tenant and
way of NID email or word-of-mouth.
landlord are not even mentioned
Students depend on the authenticity
or given importance which creates
of their seniors’ word and advice
problems for students when they
from people already staying in and
have to apply for passports and visas.
around the college.
SOURCES OF INFORMATION
and unsurity makes students shift
lesser in use, are housing websites
continuously from place to place all the time and settle for over priced houses without having enough
The information for this project
expectations and the NID
or social media and networking
was collected by creating a data
email are the main sources
platforms, like Twitter and Facebook.
bank of the current areas where
of my information collection.
students reside and marking them as zones.
However for new entrants or outsiders coming to NID for exchange programs, looking for and posting about accommodation is a big
Data was also extracted from an initiation sheet was given to students by the college authorities
problem as they are new to the community and do not know people around them to ask for help.
with a list of landlords and their contact information.
Brokers often take advantage of this situation and demand for sky
Conversations over chai
rocketing prices for non-worthy
gate, discussions and one
houses and do not show all renting
to one interaction with the
options that may lie within a
NID community, speaking to
student’s budget.
landlords and getting know their
Unawareness, miscommunication
Other information sources. Though
They also ask for hefty commissions and unnecessary taxes.
options or authenticated data to make an informed decision.
Studio 3 // Anupriya Arvind // PGDPD - Graphic Design // 2014
Cluster
03
Paldi Cluster Cluster
02
Hero Honda Showroom Cluster Cluster
01
Locational Mapping
Samay Apartments Cluster
~ Where do people stay? ~
MyPlace
Unidentified Clusters
Cluster
07 Sattva Cluster
Cluster
06 Shantivan Cluster
Cluster
05 Vishwakunj Cluster
Cluster
04
Pushkar Cluster
02
“
Brainstorming & Brainmapping
Segregating the target group into segments is better so that the design solution can be focussed
“
Studio 3 // Anupriya Arvind // PGDPD - Graphic Design // 2014
towards the core target group more. Also, it helps in a better understanding of the user profile and scenario building.
~ The birth of an idea ~ @ An NID workshop
Creatively, brain storming is a process which helps gathering all ideas collectively to one space. The ideas could be linear or lateral. It helps in cohesive understanding of any given situation Because of the specific nature of this project, I looked at the
KEYWORDS Formalise | Authenticate | Reliable | Problem solving | Adaptable | Easy mapping | Template | Organizing Standardize | Scalable | Holistic | Surrounding systems
problem statement in a more structured approach making
- Systematic way of looking for
uni directional links while brain
reliable information.
storming or mapping.
This was followed by a generation
The ideation involved looked
of keywords encapsulating all
at a step - by - step iteration of
aspects of looking at the solution
the process that would need to
to the problem.
be followed with clear, outlined objectives and points of reference.
Brain mapping is the process of aligning and connecting all the key
The three main objectives were ~
ideas brought out during the brain
- Formalizing and standardizing
storming phase.
the process of reporting and finding accommodation.
The next step was identifying the target group and categorising
- Looking at basic facilities in
them keeping in mind the priority
the neighborhood.
of the design solution.
The Brain storming sheet
Studio 3 // Anupriya Arvind // PGDPD - Graphic Design // 2014
User Profiling ~ Identifying target groups and categories ~
Target audience is primarily NID
The target audiences have been
students living outside campus;
segregated through percentages,
students in their diploma semester;
in two tiers - TIER I & TIER II. This is
exchange students; students
on the basis of need and frequency
coming to NID for short duration
of that need.
projects or special courses.
03 MyPlace
30% Guest faculty (for spl. courses or workshops) Exchange students (during exchange programmes, Open elective course from other NID centres)
70%
PG students - New entrants, Seniors, Dip. Project Students - Post Graduate and Undergrads & Ex-NIDians (in town for projects)
TIER 2 (secondary target group)
TIER 1 (primary target group)
Studio 3 // Anupriya Arvind // PGDPD - Graphic Design // 2014
THE NEWCOMER Guided by parental influence, strict, conservative, finicky, careful, doesn’t
04
Scenario Building ~ Classifying the target groups based on situations and needs ~
want to cut corners, budget is not a big issue, looking for permanency, security, all amenities needed, do not want brokers, want all the rules clearly
MyPlace
laid out, prefer close to college.
THE DESPERADO Immediate need, will settle for whatever is available, frantic, helpless, urgent, temporary basis, limited budget.
THE LONER Personal space is of primary importance, no interference, a private person, needs freedom, independence,
THE NID LOVER Wants a place close to NID, budget and sharing are not an issue, location is primary.
Studio 3 // Anupriya Arvind // PGDPD - Graphic Design // 2014
Case Studies ~ Looking at existing platforms for housing ~
05
Rent.com It is an interface allowing easy navigation of renting homes across the world. The interface is quite functional and easy to access, keeping in mind the priority of the user. The only drawbacks of the interface is complexity of shifting through various tabs and a slight visual clutter of the interface.
www.rent.com | interface and app
AirBnB Airbnb has changed the vacation
this interface as the homeowner
rental game by allowing
may or may not get to meet the
homeowners (or pseudo-
person who is renting his/her room
homeowners) to rent their room,
or space. It allows hosts to make
their house, their apartment,
their own terms while subletting
or even their boat, to guests at
their place without any generic
a surprisingly low cost. Popular
conditions in place so absence of
though it is, the Airbnb interface
any standardization for the user
and app is not without controversy,
becomes a problem. The interface
especially considering the legality
begins with a simple navigation
of subletting apartments not
system yet overdone pictures take
owned by the site’s hosts, as well
away the importance of the data on
as liability issues when a guest
the site map.
ransacks a host’s space. Also
www.airbnb.com | interface and app
security becomes an issue with
Studio 3 // Anupriya Arvind // PGDPD - Graphic Design // 2014
05
Case Studies ~ Looking at existing platforms for housing ~
Naked Apartments One of the best interfaces I’ve seen
group. Another issue is that it
so far. It’s extremely user friendly
includes brokers (which maybe vital
and easy to navigate and simple to
for their target group) but for an
look at. The interface is clean and
interface for students, it would
functional, includes social media
complicate matters esp. when the
really well, however it is specific
site owner is vouching for certain
to New York so has a niche target
agents /brokers.
Naked Apartments | interface
My New Place The name may bear a resemblance
that, My New Place does have an
to the name of my interface
engaging and communicative tone
however, in terms of information
of voice throughout their interface.
design it has more in common
The website is clean and functional
with AirBnB. The horizontal frame
with minimal elements and has less
work of photographs with a tab
of loop holes in terms of security
of the basic facilities available is
as compared to AirBnB.
similar to what AirBnB does. The only difference being that after the first screen AirBnB asks for a login but My New Place lets you skim throughout the site without a login. Again, the only problem with this interface is giving photographs more importance than the information on the site. Having said
My New Place | interface
Studio 3 // Anupriya Arvind // PGDPD - Graphic Design // 2014
Case Studies ~ Looking at existing platforms for housing ~
05
PadMapper PadMapper is a blend of using google maps as an interface along with locating housing across America. Though the idea is unique and novel of combining two applications together, the problem
PadMapper | interface
is users understanding locations in terms of grids, reference points and maps. Realtor.com Realtor has a very plain and
www.move.com, www.sulekha.
simple site plan. It’s basic in
com, www.magicbricks.com, www.
nature in terms of functionality
hostel.com, www.streeteasy.
and navigation. It also includes
com, Facebook page of Flats and
important information like
Flatmates, Ahmedabad Chapter,
property settlements, purchases,
www.housingco.in etc. All these
rents, home values etc so it’s a
interfaces have similar pluses
more detailed and commercial
and minuses as mentioned and
approach towards house hunting,
analyzed in the previous examples
purchasing and renting. Since it has
that I studied.
a varied target market it looks at all possible target groups looking for homes. Other than these specific websites, I also looked at
www.realtor.com | interface
other similar interfaces like
Studio 3 // Anupriya Arvind // PGDPD - Graphic Design // 2014
MyPlace
The Feedback...
POINTS OF OBSERVATION...
~ Learning by doing ~
examples that I had studied,
mapping and reference points
the target audience that I had identified or targeted.
needed a map to locate where I am I would carry an actual one. And how is a map going to help me decide whether I want a house or not? I could just as easily ask
“
?
the address of a place from a localite or an autowallah. I really feel digital maps just occupy unnecessary space on a virtual screen. They should be optional. Yadvi Agarwal, PG textile design student, NID ~
Other than specific location points provided on the maps, reference points of places of convenience around them have not been
The interactive spaces of the
mapped. Also their location with
platforms of some of them
respect to the original point have
provided functions to either look
not been mapped.
or post but not both.
“
What are the Information gaps?
coordinates w.r.t virtual space
larger than what was needed for
location finder. What I don’t understand is that if I
Where are blocks in information flow?
In the various platforms and I found that their scope was
All these websites and apps today have a map or a
What and where are the breakdowns?
Mentioning rules and regulations
Many of them are hardcore
(without brokerage fees) esp. for
virtual map interfaces which
people who are new to the housing
created problems for people who
sector have not been identified in
have a tough time figuring with
many places.
Studio 3 // Anupriya Arvind // PGDPD - Graphic Design // 2014
Understanding Task Flows ~ Structuring the navigation of the interface ~
06
Understanding of task flows includes card sorting and detailing out the site plan of the interface, step by step. It also includes understanding two basic points ~ Looking at the various ways in which a person would enter into the virtual space. Also looking at the step by step order in which people look upon data based on their needs. The various approaches have been charted out on paper. After having gone through three approaches with my guide, there were certain factors pointed out in each method that were incorporated to make the final site plan. The essence of this plan was to make the navigation effective yet simple. Thus the interface was divided into three major segments ~ Need a place, Give up my place and Know about a place. More details in the charts mapped out.
Studio 3 // Anupriya Arvind // PGDPD - Graphic Design // 2014
07
Understanding Grids ~ Setting a layout to structure elements ~
There’s a lot of theory with regards
filtering out websites that may
to grid systems, however it can be
be time wasters. The user wants
best explained as “a structured and
signal, not noise.
simple way to layout elements”. When creating a website one of the most important things to get right is the layout, the UI – user interface as you would call it, is something that is crucial to conveying the information and point of your website. There are many kinds of website layout designs. However the main point of a website is to convey understanding to the user. One of the critical requirements of an informative website is that it gives the user confidence that their time is being well spent. If the user feels that the website is haphazard
So why use grids? If a website is designed with a structured layout, then that feeling of structure comes through to the user in their first impression.
960 px
It implies that thought has been given to how the website is to deliver its information to the user and therefore gives the user confidence in the website. Grids are utilized as a structural foundation for a website, it can enhance the overall look and feel by allowing you to create a stronger layout for your elements.
then they will lose confidence that
I set a document size as 1280 x
they will be able to quickly find the
900 pixels because it will allow my
information they need or that the
interface to scale between mobile
website will be able to perform
resolutions to a maximum of 1140
the function they want. This initial
pixels easily. The interface also has
‘feel’ for the website is used by
a scroll down system and a balance
users as a screening device, quickly
of static and dynamic elements.
33px
Attempt 1 ~ 12 column grid | 960 px
73px
Studio 3 // Anupriya Arvind // PGDPD - Graphic Design // 2014
Understanding Grids ~ Setting a layout to structure elements ~
07
1280 px
Attempt 2 ~ 12 column grid | 1280 X 800 px
1280 px
800 px
800 px
90 px
17px
Attempt 3 ~ 12 column grid | 1280 X 800 px 83px
Elastic Gutters
41px
Studio 3 // Anupriya Arvind // PGDPD - Graphic Design // 2014
07
Understanding Grids ~ Setting a layout to structure elements ~ 1280 px
45 px
54 px
Final grid ~ 1280 X 900 px
This particular grid structure was chosen as it has a 45 pixel gutter along with a resolution which can be scalable and support responsive design. It is also scrollable dividing the interface into two halves of 450 pixels.
900 px
column distribution for layout
column distribution for layout
Studio 3 // Anupriya Arvind // PGDPD - Graphic Design // 2014
08
Wireframes & Schematics ~ Creating the skeleton of the interface ~
Wireframing is an important step
interface. For example, wireframes
in any screen design process. It
can contain various states of
primarily allows you to define
button or menu behaviors.
the information hierarchy of your design, making it easier for you to plan the layout according to how you want your user to process the information.
it allows the designer to plan the layout and interaction of an interface without being distracted by colors, typeface choices or even
It’s like an architectural blueprint;
copy. I like to explain to my clients
you need to see it in two-
that if a user cannot figure out
dimensional black and white
where to go on a black and white
diagrams before you understand
wireframe, it doesn’t matter what
how to build the actual house.
colors you eventually use. A button
Similarly for a screen design, you
has to be obvious even if it’s not
can’t start building pixel layers in
shiny or brightly colored.
photoshop, or writing blocks of code, without knowing where the information is going to go. At a deeper level, a wireframe is also very useful in determining how the user interacts with the
Fitting the grid in the interface
Wireframing is important because
Like the foundation of a building, it has to be fundamentally strong before you decide whether to give it an expensive coat of paint.
Studio 3 // Anupriya Arvind // PGDPD - Graphic Design // 2014
Wireframes
www.myplace.in
www.myplace.in
www.myplace.in
Logo
Logo
Welcome to MyPlace!
Welcome to MyPlace!
08
~ Creating the skeleton of the interface ~
Logo Login
Welcome to MyPlace! [ NID User ID ]
Need a place!
Give up my place!
[ Password ]
Need a place!
Know about a place!
Give up my place! Sign up
Login via
Login via
www.myplace.in
www.myplace.in
www.myplace.in
Logo
Logo Home
MyPlace
Know about a place!
f
About
NewsFeed
Home
Contact us
About
Contact us
NewsFeed
Available soon
Home Hey!
Similar searches
Hey!
Sort by Rent
About
NewsFeed
Home
Contact us
About
What’s Trending...
Sort by Availibility No, thanks!
I’m interested
Sort by Amenities
LATEST...
Tag for later
Details
My home, my heaven...
Similar searches
No, I’m looking for...
> 6 months
Must have’s of renting
Post a question...
Available soon
No. of rooms
Hey!
Contact I’m interested
Taken. Sorry!
Submit
www.myplace.in
www.myplace.in
Logo Home
Logo Post pictures
Welcome to MyPlace!
About
Details
Know about a place!
Contact us
!
No. of rooms Price range
Give up my place!
NewsFeed
Similar searches
Hey!
My place is awesome because...
Contact
Submit
www.myplace.in
www.myplace.in
Logo Home
Logo Post pictures
Welcome to MyPlace!
About
Details
!
No. of rooms Price range
Need a place!
Give up my place!
Know about a place!
NewsFeed
Similar searches
Hey!
I came to know about this from... NID community
Outside NID
Details Contact
From whom? How do you know him/her? Submit
Comments
*
Conditions apply
Similar searches
Details
Give up my place! Price range < 2 months
Need a place!
Contact us
NewsFeed
Similar searches
Details
Sort by Location
Taken. Sorry!
www.myplace.in
Logo
Logo
Contact us
No, thanks!
Tag for later
Studio 3 // Anupriya Arvind // PGDPD - Graphic Design // 2014
09
C ~ 86 | M ~ 61 | Y ~ 60 | K ~ 47
C~1|M~0|Y~0|K~0
R ~ 63 | G ~ 63 | B ~ 63
R ~ 251 | G ~ 255 | B ~ 255
Color pallette ~ Using color to create information hierarchy ~
The color palette chosen for the interface was subtle and neutral
C ~ 29 | M ~ 11 | Y ~ 0 | K ~ 0
keeping in mind that since it is a house renting interface, it would have many photographs. So only
R ~ 172 | G ~ 206 | B ~ 251
those colors were chosen which would give a supportive feel and look and not dominate over the pictures or data, visually. Hence varying tones and shades of grey were chosen with a supporting white and a light sky blue as an accent color.
C ~ 57 | M ~ 50 | Y ~ 48 | K ~ 16
C ~ 7 | M ~ 0 | Y ~ 0 | K ~ 30
R ~ 110 | G ~ 108 | B ~ 109
R ~ 188 | G ~ 189 | B ~ 192
basic shapes to create ideas of
“
direction, homeliness and an abstract imagery of a cursor indicating that it is a web based solution. The identity can be broken down into various elements, as shown below.
You think you need a logo, but what you really
“
The identity is very simple using
Studio 3 // Anupriya Arvind // PGDPD - Graphic Design // 2014
need is a new font. One that sets the standard
for both professional design, and embracing the values of Ubuntu in the way it’s produced.
Logotype and Type Selection ~ Looking at the image and identity of the interface ~
10
Marcus and Ivanka from Dalton Maag & Canonical Design ~
Since the interface is all about
Logotype
MyPlace
having a personal interaction, a Humanist typeface seemed the best option. The reason for choosing Ubuntu is
Identity
that it has the correct type weight for a web based application and yet does not looking too formal or too casual. It gives a feeling
Logo
of representing data with the accurate blend of seriousness and playfulness. The “Ubuntu” typeface was developed by Dalton Maag for the Ubuntu Linux OS. It was made fully public in late 2010 where it has enjoyed huge popularity, not only on the Ubuntu OS itself, but also via the Google Web Fonts
The elements of the Identity
directory. It is slowly on becoming one of the most popular web fonts. Keeping the essence of a very student friendly feel to the interface, the name “MyPlace” was
MyPlace
given as it is often used in common lingo in today’s urban youth.
Studio 3 // Anupriya Arvind // PGDPD - Graphic Design // 2014
11 MyPlace
Iconography
?
~ Abstraction of form to communicate key ideas ~ Compilation of icons created that have been used throughout the interface and in this document.
!
Studio 3 // Anupriya Arvind // PGDPD - Graphic Design // 2014
12
The User Interface ~ What the final interface looks like ~ www.myplace.in
Welcome to
Special Features
The home page
MyPlace
Your new home is just a click away!
Skip Intro... Skip Intro...
The homepage has a custom video which talks about what the website is all about, how do you use it and why would you need it.
Special Features Opening Page
www.myplace.in
www.myplace.in
Know about a place! Give up my place! Need a place!
@MyPlace ... YAY! My house is awesome! #loveyoumyplace
Know about a place! Give up my place!
@MyPlace ... thankyou for helping find my new home!
Need a place!
Social media updates: A banner space is alloted in the opening page @MyPlace ... thankyou for helping find my new home!
for users who have availed the site to tag it through various social media platforms and write about it as and when they use it or find it helpful.
Need a place!
Need a place!
Hover v/s Click: As and when the user chooses one of the options on the opening page, placing the cursor on the button (hover) changes the color from blue to grey and on clicking it a blue boundary box appears on the button as well.
Special Features Security Page
Login
www.myplace.in
[ NID Email ID ] [ Password ] Twitter ID
Don’t have an NID ID? Login via ...
Email ID Phone number
Sign in | Sign up
Login [ NID Email ID ] [ Password ]
Login
Give up my place! Don’t have an NID ID? Login via ...
Know about a place!
[ NID Email ID ]
Give up my place! Need a place!
Sign in | Sign up
The search is finally over! I have a new place. :D @myplace
[ Password ]
Don’t have an NID ID? Login via ...
Twitter ID Email ID Phone number
An authentication email has been sent to your Email ID. Click here.
Security Feature: When the user chooses one of the options on the opening page, a security pop-up appears with login details which he/she needs to fill. Incase of an NID user, an NID email and password provided by the college suffices and incase of an outside user, any social media platform can be used. An authentication email is sent to the user on their email and the user is logged in to use the website. This just ensures authentication, trust, reliability and prevents spam/ghost users from misusing the site.
Special Features Additional Features
Where am I? Distance from NID
Map Yourself.
Services
Where am I? Distance from NID
The Map: The site is scrollable so the bottom half of the site has a map
Map Yourself.
Services
which helps the user to help locate the house on the map, its distance from college and other facilities like pharmacy, grocers, hospitals, vegetable markets, laundry services etc around the house chosen.
Discover | Seek | Aspire | Choose Discover | Seek | Aspire | Choose
MyPlace
Home
About Us
MyPlace Popular Searches
Contact Us
The Ad banner: This banner changes every few minutes which has other helpful information on house hunting, renting guidelines, what to look for while looking for a house, what to do and what not to do while taking up a house etc.
MyPlace
Home
About Us
MyPlace Popular Searches
Contact Us
Blog
Advertise Us
@ Copyright MyPlace 2014 | Privacy Policy | Terms & Conditions Made @ National Institute of Design
The home banner: The about us button, contact info and blog features on this panel along with the copyright info of the platform. It is supported by other social media buttons through which more information can be obtained and looked up about the site.
@ Copyright MyPlace 2014 | Privacy Policy | Terms & Conditions Made @ National Institute of Design
Blog
Advertise Us
Special Features www.myplace.in
Need a place Page
MyPlace Dashboard
Give up my place!
Know about a place!
Once the user chooses an option on the opening page (for e.g. Need A Place) the screen splits into photographs of places
Available
Available
Available Soon
either available/taken/available soon. These options are tagged by different representations of these three options on the photos of the houses. The page also has an option of the houses
Available
being arranged on basis of the time duration
> 6 months
for the which user needs the house. For e.g. the default option on screen for segragation of options is time - more than six months and less than two months. The
< 2 months Taken. Sorry!
photos automatically arrange themselves based on time.
The search is finally over! I have a new place. :D @myplace
Special Features www.myplace.in
Need a place Page
MyPlace Dashboard
Give up my place!
Know about a place!
If the cursor hovers over any of the time options, a pop up appears with four other options of re-arranging the options based
Available
Available
Sort by Rent
Available Soon
Sort by Location
Sort by Rent
Sort by Availibility Sort by Amenities
Available
on the userâ&#x20AC;&#x2122;s need.
Sort by Location
> 6 months
Sort by Availabil< 2 months Taken. Sorry!
The search is finally over! I have a new place. :D @myplace
Sort by Amenities The options are sorting by Rent, Location, availability and amenities. On choosing any of these options the screen resets into photos of houses based on these options.
Special Features www.myplace.in
Choosing a House MyPlace
Hey!
Similar searches
A two BHK house available on rent, on a shared basis. Attached bathroom and balcony. Girls ONLY. Price on request and negotiable.
Iâ&#x20AC;&#x2122;m interested!
No, thanks!
Dashboard
Give up my place!
Available
Tag for later. Hey!
Similar searches
On choosing any one of the options on the Need A Place A two BHK house available on rent, on a shared basis. Attached bathroom and balcony. Girls ONLY. Price on request and negotiable.
page, zooms into the photograph of the house with a pop up on details of the house in two lines along with social media tabs, a features tab and a similar seraches tab. Iâ&#x20AC;&#x2122;m interested!
No, thanks!
Tag for later.
MyPlace ... The best house hunting site for students
The features option: On clicking the features button, icons of the amenities that the house comes with appears on the screen to let the user know what facilities are available.
Know about a place!
Special Features Choosing an option
www.myplace.in
Similar searches
Hey!
MyPlace Dashboard
Give up my place!
Know about a place!
A two BHK house available on rent, on a shared basis. Attached bathroom and balcony. Girls ONLY. Price on request and negotiable.
Similar searches
Hey!
A two BHK house available on rent, on a shared basis. Attached bathroom and balcony. Girls ONLY. Price on request and negotiable.
Details...
Price
Rs. 2500 per month
Distance
1.5 km from NID
Specify
Single or sharing, Veg, non-drinkers, non-smokers,
Post a question...
I’m interested!
No, thanks!
Tag for later.
On clicking any one of the optionson the pop up (for e.g. I’m Interested) the zoom in picture of the houses plits into three parts, with more photographs of the house.
Contact
The rest of the options freeze with a grey mask keeping the user Submit
After a long search, I’ve finally moved in. Thankyou MyPlace!
focussed on the house he/she has selected.
Special Features Choosing an option
Similar searches
Hey!
www.myplace.in MyPlace Dashboard
Give up my place!
Similar searches
Hey!
A two BHK house available on rent, on a shared basis. Attached bathroom and balcony. Girls ONLY. Price on request and negotiable.
Details...
A two BHK house available on rent, on a shared basis. Attached bathroom and balcony. Girls ONLY. Price on request and negotiable.
Know about a place!
Price
Rs. 2500 per month
Distance
1.5 km from NID
Specify
Single or sharing, Veg, non-drinkers, non-smokers,
Details...
Price
Rs. 2500 per month
Distance
1.5 km from NID
Specify
Single or sharing, Veg, non-drinkers, non-smokers,
Post a question...
Post a question...
Contact
Contact Submit
After a long search, Iâ&#x20AC;&#x2122;ve finally moved in. Thankyou MyPlace!
Submit
The initial pop up extended into a detailed panel of the house with features like Rent range, Distance from college and sepcific restrictions of the house. The user can post a question or contact the person who has posted the requirement through various contact options.
Special Features Choosing an option
Similar searches
Hey!
A two BHK house available on rent, on a shared basis. Attached bathroom and balcony. Girls ONLY. Price on request and negotiable.
Details...
Price
Rs. 2500 per month
Distance
1.5 km from NID
Specify
Single or sharing, Veg, non-drinkers, non-smokers,
Post a question...
Contact
Submit
The Live Chat Feature: While looking up a house, if the person who has posted that option is online, a green button appears in the chat option appears and the user can interact with that person to discuss about the post.
Special Features Choosing an option
www.myplace.in
Hey!
Similar searches
MyPlace Dashboard
Give up my place!
Know about a place!
A two BHK house available on rent, on a shared basis. Attached bathroom and balcony. Girls ONLY. Price on request and negotiable.
Available
Similar searches
No, I’m looking for...
I’m interested!
No, thanks!
Tag for later.
No. of rooms Single
Room type Price range
Give up my place! Specify
Sharing
< 2000 p.m.
No, I’m looking for... No. of rooms Single
2000 - 5000 p.m. < 5000 p.m.
Submit
@MyPlace ... YAY! My house is awesome! #loveyoumyplace
Room type Price range
Specify
Sharing
< 2000 p.m. 2000 - 5000 p.m. < 5000 p.m.
Submit
Incase of choosing the No Thanks option, the platform opens another pop up to help the user to specify his/her need. The other pop up has details which the user pick from like choosing between a PG, a flat or a house with the number of rooms, single/sharing and price range.
Special Features Choosing an option
www.myplace.in MyPlace Dashboard
Taken. Sorry!
Available
Know about a place!
A two BHK house available on rent, on a shared basis. Attached bathroom and balcony. Girls ONLY. Price on request and negotiable.
Available Soon
My place has a superb, top of the class kitchen for all you food lovers! It is a single room, affordable with an attached bathroom. However, it is semi-furnished. Available for both Walking girls and guys. Hurry up!
Similar searches
Hey!
Similar searches
Hey!
Available
Give up my place!
Iâ&#x20AC;&#x2122;m interested!
No, thanks!
Tag for later.
Available
Distance from NID Iâ&#x20AC;&#x2122;m interested!
No, thanks!
Tag for later.
Incase the user is not sure of whether he/she wants to take up that place or look for other options, the option can be tagged to be viewed later for consideration. The screen then
Within 5 km Radius of NID
sets back to the previous setting and that option is tagged with an icon of a price tag.
The search is finally over! I have a new place. :D @myplace
Special Features Giving up my place Page
Similar searches
Hey!
www.myplace.in MyPlace Dashboard
Give up my place!
Choose... Similar searches
Hey! Choose... Upload...
Details... Map MyPlace...
Price
Rs. 2500 per month
Details... Map MyPlace...
Distance Specify
1.5 km from NID Single or sharing, Veg, non-drinkers, non-smokers,
MyPlace is awesome because...
Price
Rs. 2500 per month
Distance
1.5 km from NID
Specify
Single or sharing, Veg, non-drinkers, non-smokers,
MyPlace is awesome because... Upload...
Upload... Contact...
Submit
Contact...
MyPlace ... making looking for homes so much easier #homesweethome
Submit
Instead of going back to the opening page, other major options from that page appear on the panel above and the user can choose an option from there directly. On choosing the Giving Up My Place option, a similar panel as Need a Place appears with minor changes. The user can post based on various options provided along with a one liner on why should anyone take up his/her place.
Know about a place!
Special Features Giving up my place Page
www.myplace.in MyPlace Dashboard
Give up my place!
Upload... Similar searches
Hey! Choose... Upload...
Details... Map MyPlace...
The user can also post pics of his/her house with the snap and upload option along with other details that need to be filled. Users can click pics of their homes and post that along
Price
Rs. 2500 per month
Distance
1.5 km from NID
Specify
Single or sharing, Veg, non-drinkers, non-smokers,
MyPlace is awesome because...
with other details. Upload...
Upload... Contact...
Submit
MyPlace ... making looking for homes so much easier #homesweethome
Know about a place!
Special Features Know about a place option
www.myplace.in
The third feature in the opening page is Know
MyPlace Dashboard
Give up my place!
Know about a place!
about a place. The user chooses this option when he/she is a third party person or has come to know about a place from someone else.
Available
Available
Available
The screen splits into a pictures of places available but are from outside the NID community i.e. brokers, friends or known accquaintances of NIDians. Taken. Sorry! Available Available
Available Soon
MyPlace ... The best house hunting site for students
Special Features Giving up my place Page
Similar searches
Hey!
www.myplace.in MyPlace Dashboard
A two BHK house available on rent, on a shared basis. Attached bathroom and balcony. Girls ONLY. Price on request and negotiable.
Details...
Rs. 2500 per month
Distance
1.5 km from NID
Specify
Similar searches
Hey!
A two BHK house available on rent, on a shared basis. Attached bathroom and balcony. Girls ONLY. Price on request and negotiable.
Upload... Price
Give up my place!
Details...
Single or sharing, Veg, non-drinkers, non-smokers,
Price
Rs. 2500 per month
Distance
1.5 km from NID
Specify
Single or sharing, Veg, non-drinkers, non-smokers,
I came to know about this from...
I came to know about this from... NID community
Outside NID
Outside NID
NID community
Upload...
!
Upload... Contact
Details...
From whom? Contact details ...
Contact Submit
How do you know him/her?
Comments MyPlace ... The best house hunting site for students
*
Submit
Since this is a third party option an additional security feature is added while posting a place through this option. This feature is the Outside NID or NID community feature so that the user can choose either option depending from where the source is - either an NID alumni or someone known to NID user or a broker or owner of a house.
Conditions apply
Know about a place!
Special Features Giving up my place Page
www.myplace.in MyPlace
!
Dashboard
From whom? Contact details ...
Similar searches
Hey!
A two BHK house available on rent, on a shared basis. Attached bathroom and balcony. Girls ONLY. Price on request and negotiable.
Upload...
How do you know him/her?
Details...
Comments
*
Give up my place!
Details...
Price
Rs. 2500 per month
Distance
1.5 km from NID
Specify
Single or sharing, Veg, non-drinkers, non-smokers,
I came to know about this from... Conditions apply
Outside NID
NID community
Upload...
!
Upload... Contact
When the user chooses the Outside NID option, another pop
Contact details ...
up appears which adds one more layer of security with the user filling in details of the source. This security features is accompanied by an icon of a house with an exclamation mark. This icon appears whenever the picture of that house comes on screen, it is tagged with the icon so that the user looking at that house an a viable option knows that the post is from a third party person.
Details...
From whom?
Submit
How do you know him/her?
Comments MyPlace ... The best house hunting site for students
*
Conditions apply
Know about a place!
Special Features The Dashboard
www.myplace.in MyPlace Dashboard
Give up my place!
Know about a place!
My Profile... Name
My Profile... Available
Available
Available
Upload...
Name
Upload...
Address
Taken. Sorry!
!
Available
About me...
Available Soon
Address
New Posts
My Tags
Compare tags
About me...
New Posts
My Tags
Compare tags
The Dashboard opens up into a pop up which displays the userâ&#x20AC;&#x2122;s profile like Name, address and a photograph. It appears when a user wants to see who another user is. It also has tags Available
liek new posts, compare tags and my tags along with social media options of the user.
I have a roof over my head. MyPlace, you rock!
Studio 3 // Anupriya Arvind // PGDPD - Graphic Design // 2014
MyPlace
The Road Ahead ~ Acknowledgements and Conclusion ~
READING LIST... Bibliography
Webliography
www.hostel.com
The Invisible Computer ~
www.goldengridsystem.com
www.realtor.com
Donald A. Norman
www.webnuts.com
www.urbanedge.com
Don’t Make Me Think ~
www.nakedapartments.com
www.iconfinder.com
www.mynewplace.com
www.dubberly.com
This is one of the most challenging
understanding of how interfaces
Steve Krug
projects that I have worked on so
work but also his patient handling
Designing for Interaction ~
www.streeteasy.com
www.responsivedesign.ca
far. The fact that I was dealing with
and keen insights at the right
Dan Saffer
www.padmapper.com
www.designmodo.com
not just a UX/UI project but with
time have been one of the major
10 Heuristic Evaluations ~
www.magicbricks.com
www.dcs.gla.ac.uk.in
analysis of live data and converting
drivers in making this project reach
Don and Jakob Nielsen
www.sulekha.com
www.iainstitute.org
it into a systematic information
the stage where I feel confident
www.facebook.com
www.nid.edu
enough to pursue information
www.markshuttleworth.com
google maps
design as a strong career option.
www.rent.com
google images
design approach was quite a task. Creating design solutions in
www.airbnb.com
isolation may not be that difficult
A big thank you to all my peers
a feat to achieve but creating
from the NID community, who
something new for your peers
gave me valuable time and critical
by way of personal interviews,
insights. A special mention to Jyoti
ideation workshops and live
Mann and Abhisek Behera. I hope
feedback takes design thinking
that this project reaches a phase
to a completely new level.
soon that it can actually help and give back to the NID community.
Rupesh Vyas, my guide for this project has not only supported
My family, friends and everyone
and given me my space to work
who has in any way been associated
on the project, gauge my own
with this project, thank you.
“
The challenge to create something new for your peers and to see it actually happen is something many of us dream of. With this last
“
and final project, I hope that I can give back to the NID community, who has always been a major driving force in my life.
Me, thoughts at the end of the project ~
www.housing.co.in