I am a user experience designer and researcher currently pursuing masters in Human-Computer Interaction from the Georgia Institute of Technology, Atlanta. I work at the intersection of technology, society, and design and yearn to do my bit as a designer to make a world of difference.
Providing health care assistance to people in tier 2-3 cities in India using an online application.
EXPLORATIONS
GRAPHIC DESIGN
CALENDAR DESIGN
PRODUCT MODELLING
TUI FOR LEARNING
PHOTOGRAPHY
VIDEOGRAPHY
PUBLICATIONS
Gupta S., Upadhyay P. (2019) Social Sustainability of Online Instant Messaging Platform—WhatsApp. In: Chakrabarti A. (eds) Research into Design for a Connected World. Smart Innovation, Systems and Technologies, vol 134. Springer, Singapore Link to paper
LEARN A LITTLE ABOUT ME
Hey!
I am a first year Masters student studying Human-Computer Interaction at the Georgia Institute of Technology. I believe that a designer holds in herself a power to mould the world.
‘Curiosity’ is what drives me. I raise questions and then strive to find their answers. “Unanswered and undiscovered questions” fuel my curiosity. While I am keen to explore all the dimensions of the multi-faceted world of design, I am passionate about Human-Computer Interaction Design and Sustainability.
I wish to pursue a research based career along the intersection of Design, Technology and Society; and yearn to do my bit as a designer to make a world of difference.
I am an Indian Classical Dancer and feel blissful when my heart resonates with the music. I am blessed to be a part of a musical family and greatly enjoy our Karaoke nights. I play Badminton and have played at competitive level in school and in college. I am also an avid traveler and a photography enthusiast. I love visiting new places, making new friends and capturing the world through my lens.
My philosophy is to always make a choice in favor of ‘happiness’ whatever life throws at us.
As part of this project, I designed an interactive interface comprising a table top and a wall-sized display showing content on 100 top scientists of University of Paris, Saclay . I was mentored by two brilliant researchers in the field of HCI- Prof. Michel Beaudouin-Lafon (head of Human-Centered Computing group at Laboratoire de Recherche en Informatique, Universite Paris-Sud) and Prof. Wendy Mackay (Principal Research Scientist, INRIA Saclay).
Duration
Methods
Deliverables
10 weeks
Aug. 2017 - Dec. 2017
Literature Review, Video Brainstorming, Wireframing, Video Prototyping, Expert Evaluation
A medium fidelity prototype of the interface of the Kiosk and a video prototype of the interactions.
PROJECT AIM AND SUMMARY
The research internship took place in the context of a project at LRI in collaboration with Inria-Saclay for the Learning Center of Université Paris-Saclay. The project aims to create a large wall-sized installation comprising the the photographic portraits of over 100 researchers of Université Paris-Saclay by Didier Goupy, a renowned photographer, along with a rich network of information about the researchers, that will eventually be a permanent exhibit at the Learning Center. The goal of my internship project was to apply the methods and tools developed in the Human-Centered Computing group, LRI to create an interactive installation using tablets/table top kiosks with touch displays for user-friendly navigation to access the installation. I was part of an international group of research interns.
Interface of all the wall display
DESIGN PROCESS
CONSTRAINTS AND CONSIDERATIONS
INSPIRATIONS
A good example I found was at The Cleveland Museum of Art. They have set up a display that helps the visitors know more about the artworks etc. and plan their tours accordingly. I found this project similar to ours in the context of the wide and varied audience present and the motivation to help a person know more about a subject.
Below is an installation I explored with an intention to give a more engaging look as compared to a traditional hyper-linked interface. I also explored ideas around the orientation of the portraits (in a manner that they are random but the relation amongst them is still marked)
The table top below helped me look into ideas around a bigger Kiosk with which multiple people can interact simultaneously instead of many smaller ones. This may also encourage interaction amongst the audience.
VIDEO BRAINSTORMING
I conducted a Video Brainstorming Session (A new technique that I got familiar with) with the members of my group. We divided ourselves into three groups and participated in the session.
Goal for the session
To come up with interesting ideas for visual and interaction design of an interface that shall be used by a wide variety of audience to know more about the presented researchers on the wall display in a public setting.
Dimensions where we could be creative
All the groups came up with videos that gave me a great number of ideas to work upon in all the four dimensions mentioned above.
I worked to explore the design space and the various dimensions of the system based on the ideas discussed in the video brainstorming sessions. I also organized another brainstorming session (traditional) to explore some specific dimensions of the system.
WIREFRAMING AND PROTOTYPING
Based on the brainstorming sessions, ideas were developed and prototyped. We decided to go with multiple tabletop kiosks with touch interface for use by interested audience to access the content presented on wall sized display.
I proposed using a Kinect to carry out the interactions between the wall and the tabletop interfaces and designed a video prototype using Kinect for gesture recognition.
VIDEO PROTOTYPE ( Interaction between the wall and the device )
The Interaction between the wall and the device was video prototyped with the help of a lab mate. The following uses Kinect for gesture recognition.
Few Interesting Points
Concerns:
1. When a user points towards the screen and if simultaneously the display of the Kiosk changes, and if the Kiosk catches the attention of the user, it might affect the direction of pointing by the user. We will have to set the speed of change etc. such that the pointing of the user doesn't get affected by the change in the display of the Kiosk nearby.
After many discussions, it was agreed that due to multiple constraints, it would be uncertain whether or not Kinect would work well in the public environment. Hence I designed a system that works perfectly when operated without a Kinect and is independent in its working. The use of Kinect was left as a future add-on if required.
Wireframing Iterations
Next, I moved on to what interactions shall happen on the tabletop interface. Multiple iterations were made in order to come up with the ideal interface that best fits the needs.
PROTOTYPE
MY EXPERIENCE
This project offered me a good exposure to international research in the field of HCI under two amazing mentors. I could not have utilized my summer in a more productive manner. I was part of an international group of researchers from China, Indonesia, Argentina, France, America, Switzerland, London etc. and I learned a lot from this cross-cultural exposure including life lessons that shall really help in my professional and personal life. I was also lucky to get a chance to participate in the ERC Creative workshop conducted during my internship that offered exposure to various techniques used in the LRI.
I look forward to future collaborations with my two mentors and more exposure to international research.
PS: Like everyone else, I too fell in love with the city of Paris.
Plateau of Infinite Research
As part of this project, I designed an interactive interface comprising a table top and a wall-sized display showing content on 100 top scientists of University of Paris, Saclay. I was mentored by two brilliant researchers in the field of HCI- Prof. Michel Beaudouin-Lafon (head of Human-Centered Computing group at Laboratoire de Recherche en Informatique, Universite Paris-Sud) and Prof. Wendy Mackay (Principal Research Scientist, INRIA Saclay)
PROJECT AIM AND SUMMARY
The research internship took place in the context of a project at LRI in collaboration with Inria-Saclay for the Learning Center of Université Paris-Saclay. The project aims to create a large wall-sized installation comprising the the photographic portraits of over 100 researchers of Université Paris-Saclay by Didier Goupy, a renowned photographer, along with a rich network of information about the researchers, that will eventually be a permanent exhibit at the Learning Center. The goal of my internship project was to apply the methods and tools developed in the Human-Centered Computing group, LRI to create an interactive installation using tablets/table top kiosks with touch displays for user-friendly navigation to access the installation. I was part of an international group of research interns.
INSPIRATIONS
A good example I found was at The Cleveland Museum of Art. They have set up a display that helps the visitors know more about the artworks etc. and plan their tours accordingly. I found this project similar to ours in the context of the wide and varied audience present and the motivation to help a person know more about a subject.
Below is an installation I explored with an intention to give a more engaging look as compared to a traditional hyperlinked interface. I also explored ideas around the orientation of the portraits (in a manner that they are random but the relation amongst them is still marked)
The table top below helped me look into ideas around a bigger Kiosk with which multiple people can interact simultaneously instead of many smaller ones. This may also encourage interaction amongst the audience.
VIDEO BRAINSTORMING
I led a Video Brainstorming Session (A new technique that I got familiar with) with the members of my Group. We divided ourselves into three groups and participated in the session.
GOAL FOR THE SESSION
To come up with interesting ideas for visual and interaction design of an interface that shall be used by a wide variety of audience to know more about the presented researchers on the wall display in a public setting.
DIMENSIONS WHERE WE COULD BE CREATIVE
1. Medium for information sharing
2. Interaction between the wall display and the interface
3. Information to be displayed
4. Links between various researchers and information.
All the groups came up with videos that gave me a great number of ideas to work upon in all the four dimensions mentioned above.
I worked to explore the design space and the various dimensions of the system based on the ideas discussed in the video brainstorming sessions. I also organized another brainstorming session (traditional) to explore some specific dimensions of the system.
WIREFRAMING AND PROTOTYPING
Based on the brainstorming sessions, ideas were developed and prototyped. We decided to go with multiple tabletop kiosks with touch interface for use by interested audience to access the content presented on wall sized display.
I proposed using a Kinect to carry out the interactions between the wall and the tabletop interfaces and designed a video prototype using Kinect for gesture recognition.
VIDEO PROTOTYPE( INTERACTION BETWEEN THE WALL AND THE DEVICE )
The Interaction between the wall and the device was video prototyped with the help of a lab mate. The following uses Kinect for gesture recognition.
Few Interesting Points
1. Since the content on researchers that are being looked up by interested audience is static on the wall display, any new person walking past will get information about which researchers are being looked up and belonging to what field of research and if that person is interested, he/she may go and start up a conversation with the user who is already looking the researcher up. This will encourage interaction amongst the audience.
2. When the user points towards a portrait, it gets zoomed up along with the ones close to it , this provides the user with an opportunity to switch the selected researcher if he so desires.
Concerns:
1. When a user points towards the screen and if simultaneously the display of the Kiosk changes, and if the Kiosk catches the attention of the user, it might affect the direction of pointing by the user. We will have to set the speed of change etc. such that the pointing of the user doesn't get affected by the change in the display of the Kiosk nearby.
After many discussions, it was agreed that due to multiple constraints, it would be uncertain whether or not Kinect would work well in the public environment. Hence I designed a system that works perfectly when operated without a Kinect and is independent in its working. The use of Kinect was left as a future add-on if required.
WIREFRAMING ITERATIONS
Next, I moved on to what interactions shall happen on the tabletop interface. Multiple iterations were made in order to come up with the ideal interface that best fits the needs.
THINGS KEPT IN MIND WHILE DESIGNING THE INTERACTIONS
1. The photographic portraits are art pieces displayed on a wall sized display. Even though they are digital, they must be handled with subtlety and care.
2. The system must work independent of the Kinect.
3. The interactions shall happen in a physical space and with another physical object and hence should complement the space around a user.
VIDEO PROTOTYPE
MY EXPERIENCE
This project offered me a good exposure to international research in the field of HCI under two amazing mentors. I could not have utilized my summer in a more productive manner. I was part of an international group of researchers from China, Indonesia, Argentina, France, America, Switzerland, London etc. and I learned a lot from this cross-cultural exposure including life lessons that shall really help in my professional and personal life. I was also lucky to get a chance to participate in the ERC Creative workshop conducted during my internship that offered exposure to various techniques used in the LRI.
I look forward to future collaborations with my two mentors and more exposure to international research.
PS: Like everyone else, I too fell in love with the city of Paris.
ABOUT
I worked with Microsoft Research, India in collaboration with Indian Institute of Technology, Guwahati to design an application that provides healthcare assistance to people through a virtual medium. It aims to bridge the gap between health facilities available in various parts of India. I was mentored by Dr. Keyur Sorathia (Head, Embedded Interactions Lab). My manager was Siddharth Prakash (Microsoft Research).I worked in a team of four students. Two of us were working with designing the User Experience and User Interface, while the other two were looking into the development of the application.
The project details are protected by Non-Disclosure Agreement. I would still love to share the process followed and my learnings.
Duration
Methods
Deliverables
10 weeks
Jan. 2017 - Mar. 2017
Semi structured Interviews, Brainstorming, Task flows, Information Architecture, Wireframing
Hi-Fidelity wireframes of the entire application.
INDIAN HEALTHCARE- OPPORTUNITIES
Source: KPMG India, Review of National Health Policy
The promise of 'right to health' is central to every target envisioned under millennium development goals.
Availability
Affordability
Accessibility
Acceptability
Four Pillars of Healthcare System
Availability of Healthcare facilities is highly skewed towards urban centers when the urban population accounts for only 28% of the country's entire population. The remaining 72% has access to only one-third of the total beds available in the country.
The Indian Healthcare System is not being able to keep up with the demands of the growing population
PROBLEM STATEMENT AND OBJECTIVES
Problem Statement was given to us by Microsoft. We explored and redefined the Problem Statement based on our User Study. We also carefully defined our objectives based on our study.
USER STUDY
First, we learned about the problems areas and medical experiences of various people. We spoke to around 15 people and it gave us a good idea of what should be the key objectives that our design intends to meet.
We also interviewed around 10 doctors of varied specialties to learn more about the problem space and opportunity areas. We learned about the methodologies used to offer consultation to the patients.
We took the help of three medical students to form the structure of our product and to add the necessary details. Their inputs were highly valuable.
LEARNING
1. Identifying user groups that shall provide valuable information that shall help us design the product.
2. Forming a questionnaire.
3. Conducting an interview.
4. Analyzing the information obtained.
5. Forming objectives based on the inputs.
CONCEPTUALISATION
Based on the formed objectives, the concept was detailed such that it best attended to each and every objective.
Information architecture
A detailed Information Architecture was made. Iterations for the same were done after various discussions with our mentors in view of the requirements and constraints of Microsoft and other collaborating organizations.
Task Flow
Task flows for every task possible on our product were clearly defined. It helped figure out the loopholes or design gaps in our concept.
User Journey
Based on the task flows, a complete user journey was defined to further detail out the concept.
LEARNING
1. The art of working within constraints of various organizations (developers, management, marketing team etc.).
2. Identifying and attending to design gaps.
3. Presenting the design to the developers in a manner that helps them easily understand the flow of the application.
WIREFRAMING AND INTERFACE DESIGN
Paper wireframes were designed for the interface being conceptualized. They were later digitalized on Balsamiq tool.
High fidelity interface was later designed following 'Material Design' Guidelines proposed by Google. Efforts were made to make the product interactive and engaging.
The interface was then given to the developers for front-end development with specifications about each and every element used in the interface like:
1. Font
2. Spacing and dimensions through grid lines
3. Colors
4. Icons used
LEARNING
1. A good idea about the 'Material Design' Guidelines.
2. Learned to design an interface within the constraints of the developer.
3. Learned about the requirements and expectations of a developer from a designer.
4. Learned to coordinate effectively with the developers and Management officials.
Tangible User Interface for learning
My team and I designed an educational game for the mentally disabled children. The game aimed to teach the concept of counting and numbers and the correct sequencing of the numbers to the children with the help of a toy train. The train, along with a remote, serves as a tangible user interface with which the children are expected to communicate. We were mentored by Dr. Keyur Sorathia (Head, Embedded Interactions Lab). My role primarily comprised of Primary and Secondary Research, Brainstorming, Conceptualization and defining interactions and Video Making for documentation
Duration
Methods
Deliverables
12 weeks
Feb. 2017 - April. 2017
User study, Literature Review, Brainstorming, Storyboarding, Task Flows, Wireframing, Prototyping
A working Prototype of the system along with a video prototype.
Problem Statement
Design an interactive tangible user interface that teaches counting to the mentally disabled children. It should be effective and relatable to the real world and should, to its best ability, help the children to "understand" numbers.
User Study
We as a batch visited Shisho Sarothi, a training center in Guwahati, India, with a vision of an inclusive world where children and persons with disabilities have equal opportunities and are empowered to participate freely and live fully with dignity and respect.
We spoke to Mr. Armaan Ali (the director) and various teachers for specialized training of the children to know more about the problems faced by the children.
Major learnings for the User Study
We majorly learned about the teaching methods used by the teachers to develop the necessary mental and motor skills that shall help the children in living their lives independently and fit into the outside world to the greatest possible extent.
While teaching numbers, the following were of utmost importance.
1. Form or structure of number
2. Count order
3. Concept of greater and lesser
Efforts were put in to combine real life objects to the learning process. This helped them relate better and understand the concepts to a greater extent. Another well known technique used was that of repetition. When something is repeated a lot of times in various manners, directly and indirectly, it tends to be learned better with a longer lasting understanding of the same
Unfortunately, we were not allowed to click pictures of the classrooms and tools used.
Objectives
Based on the learnings and problems observed and studied, we defined our Objectives as follows:
1. To teach the children the numbers in the correct order or sequence.
2. To teach the concept of the quantity a number holds.
3. Teach them using instances from the real world so they are directly connected to the real world and the numbers. do not remain an abstract concept for them.
4. To improve their motor skills, concentration and patience.
5. To keep them entertained and happy.
Key points from the literature
Counting Techniques
1. Rote Counting: In this technique, the student is made to repeat the sequence of numbers while pointing at the same simultaneously. This helps the student to memorize the sequence and recognize the numbers visually.
2. Point Counting: In this technique, the student is made to count a set of objects in the correct sequence without missing any number or repeating the same number more than once.
3. Rational Counting: In this technique, the student learns about the quantity, a number carries. He realizes that the last number counted is equal to the total number of object counted till then. This forms the basis of addition for the child. This is also a pre-requisite for reading time on a traditional clock.
4. Counting on: In this technique, the child learns to count from any number (say 3, 4, 5 and not 1, 2, 3, 4, 5) that may or may not be the beginning (the number 1) as taught to them.
While teaching counting, one first needs to teach a child the concept of ‘1’. Various methods can be used for the same. Once the child is clear about what ‘1’ signifies, the concept of ‘one more’ is introduced. This helps to teach them the number to i.e. 1 and 1 more. Once the child is comfortable with the concept of 2, the following numbers are introduced as before.
Brainstorming and Conceptualization
Games have long been a very effective method of learning. They are fun and addictive and make learning an enjoyable process for the children. We decided to work on making an interactive game, with a screen-less interface that shall also try to improve the motor skills of the children.
We looked into various real life scenarios that can be implemented into a game. In this manner, we meet two goals: one, they learn the concept of counting and second, they are made familiar with a real life situation that will help them better relate to it when they experience the same in reality.
For our game, we chose the working of a train on a railway track.
Seeing something work after performing an activity or a difficult task acts as a strong positive reinforcement. It encourages the child to put a little extra effort into the activity in order to receive the reward of a working product. Keeping this in mind, we conceptualized a mechanism where “running of train” is considered to be a positive reinforcement for the child.
The concept
A number (say x) is entered on the remote by the student or teacher that turns the feedback light blue. The child is expected to place and connect the compartments in the correct order upto the entered number (i.e. x). This shall result in the running of the train on the track which shall stop after 'x' rounds where x was the entered number.
Appropriate feedback is provided as the child interacts with the game.
User journey
Prototyping
Components Used
1. Train Set (1 engine, 4 compartments)
2. Two Arduinos (Micro-controllers)
3. Two Nrf modules (For data-transfer)
4. Jumper Wires
5. Resistors
6. Motor
7. Battery
The electronic circuit of the game is as shown below:
The circuit consists of two parts, the train and the remote.
The remote consists of an Arduino connected to an Nrf module that sends signals wirelessly to the Nrf module connected to the Arduino that is further connected to the train circuit.
The train consists of an Arduino that is connected to an Nrf module that receives information from the Remote. The circuit is divided into 5 parts. One is the engine and the other four represent their respective compartments. Each compartment is connected to its consecutive compartment by a main connection. This main connection is soldered with three other wires to form a single male connection.
If a teacher enters a number, say 4. When the child connects the first compartment to the engine, the second compartment to the first, the third to the second and the fourth to the third, the train starts to run with a gap of 5 secs (Time required for the child to move the hands away after making the connection)
Challenges
We prototyped the entire circuit and the working can be seen in the video above, However, due to constraints of the train set available, the circuit could not be embedded into the trains perfectly.
The connections were not firm and the connections had to be precisely made for the train to run.
Since this required great motor skills, it was not able to test the game with the children.
In the future, we shall use 3-D printing to carefully design the train structure so as to contain the circuit comfortably and the connections can be made easily.
Acknowledgments
We are very grateful and offer our gratitude to Dr. Keyur Sorathia, our course instructor for introducing us to the concept of Tangible User Interfaces and its principles. He was also a great help in conceptualizing and detailing of the chosen project. We thank Shishu Sarothi for helping us get great insights on the condition of the mentally disabled children and the problems faced by them that prevents them from blending into the outside world.
We are also very thankful to the Electronics Club of IIT Guwahati for helping us with the prototyping of the conceptualized solution. We especially thank the secretary of the club.
ABOUT
During my summer internship 2016, my team and I worked in the areas of Sustainability and Design methodology, with focus on development of 'InDeaTe Tool' - A holistic design, computer-aid for Design of Sustainable Systems which will provide designers a platform with a systematic approach to design Products, Manufacturing Systems and Service Systems. I was mentored by Prof. Amaresh Chakrabarti, Indian Institute of Science, Bangalore, Chairman, Center for Product Design and Manufacturing
Duration
Methods
Deliverables
10 weeks
May. 2016 - Jul. 2016
Literature Review, User Testing, Wireframe redesign
A database of design methods that affect sustainability aspects, wireframes and logo for Indeate
ABOUT INDEATE
InDeaTe is a tool that is driven by knowledge and supports a sustainable design process. It aims to improve sustainability considerations in design.
'InDeaTe' comprises of:
(i) A Sustainable design Database (what I worked upon) and
(ii)A Sustainable design process Template.
It consists of a rich repository scientific and well-documented design tools, methods and methodologies.
The InDeaTe design process template with the support of the tool’s database, creates junctures of opportunity, in each design stage while imbibing life cycle thinking into the design in each design stage, so that the designer is able to incorporate her sustainability considerations.
UNDERSTANDING THE DESIGN PROCESS
I was first made familiar with the InDeate template, the design process and various considerations during a design process in order to proceed with my research. I spent around 2 weeks understanding the process through the developed template.
MAJOR LEARNINGS
Design stages
1
Identify!
What is the problem?
Who are the stakeholders?
What led to the problem?
What 'needs' to be solved?
How are they solved currently?
What are the requirements and constraints?
You need to know the problem to find the solution.
Clarify the task.
2
Solve! Be creative!
In how many ways can this problem be solved?
Is your solution feasible?
What are the constraints affecting your solution?
How can they be overcome?
Do you need to re-define your problem?
You need to think of a solution to solve the problem.
Conceptualize a Solution
3
Prototype!
How will you bring your concept to life?
Are there multiple ways to do the same?
Which way is the best?
Is your embodied design in harmony with your concept?
Should it be modified?
Do you need to modify your concept or reframe your problem?
You need to represent your concept in a concrete manner to reach
to a stage where your design can now be used to solve the problem.
Embody Your Design
4
Detail!
Is it accessible by our stakeholders?
How usable is the resultant design?
Can we make it more user friendly?
Are there any problems with the implementations?
How can they be taken care of?
Is your design now ready to solve the problem for the targeted people?
If not, how to make it?
Does the problem or the concept need to be modified?
You need to give your solution the finish it deserves.
Detail your Design
Life cycle stages of a product
A set of four activities is performed ITERATIVELY, while designing.
Three pillars of sustainability
Indicators of sustainability
Ways to measure how well your design is meeting the needs and expectations of its present and future members.
Point to areas where the links between the economy, environment and society are weak.
Identify problem areas and chart their resolutions.
Definitions of sustainability
There are over 80 definitions of sustainability, published, accepted and practiced. Most are generic across the TBL while others focus on one or few aspects of the three pillars of Sustainability and maybe domain specific.
Based on the requirements, one needs to select a definition of Sustainability which he shall use as a reference throughout the design process.
DESIGN METHODOLOGIES
In view of the central responsibility of designers for the technical and economic properties of a product, and the commercial importance of timely and efficient product development, it is important to have a defined design procedure to find good solutions.
This procedure must be flexible, and at the same time be capable of being planned, optimized and verified. Design methodology, is a concrete course of action for the design of technical systems that derives its knowledge from design science and cognitive psychology, and from practical experience in different domains. It includes: plans of action to link working steps and design phases according to content and organization; strategies, rules and principles to achieve general and specific goals; and methods to solve individual design problems or partial tasks. -Pahl and Beitz
My contribution to the project involved searching for design methods for products from various sources for the various design stages. I read case studies on the various methods and also sorted them according the four defined activities in the template (Generate, Evaluate, Modify, Select). Further, I categorized them based on the three pillars of sustainability.
The methods were then made part of the InDeaTe database and were produced as results of proceeding with the design cycle on the tool.
Some of the referred literature for the study
Roozenburg, N.F. and Eekels, J., 1995. Product design: fundamentals and methods (Vol. 2). Chichester: Wiley.
Cross, N. and Roy, R., 1989. Engineering design methods (Vol. 2). New York: Wiley.
Pahl, G. and Beitz, W., 2013. Engineering design: a systematic approach. Springer Science & Business Media.
Eppinger, S.D. and Ulrich, K.T., 1995. Product design and development. 1995.
Kumar, V., 2012. 101 design methods: A structured approach for driving innovation in your organization. John Wiley & Sons.
Hurst, K., 1999. Engineering design principles. Butterworth-Heinemann.
Park, G.J., 2007. Analytic methods for design practice. Springer Science & Business Media.
Shetty, D., 2002. Design for product success. SME.
Eder, W.E. and Hosnedl, S., 2007. Design engineering: a manual for enhanced creativity. CRC Press.
INDO US DISSEMINATION WORKSHOP
Design of sustainable systems
Goal of the workshop: to disseminate to engineers of the future the key ideas of sustainability, and train them for designing sustainable systems utilizing the key findings from a two year project under the aegis of the Indo-US Joint Networked R&D Center of Excellence on Design of Sustainable Products, Services and Manufacturing Systems, that has been funded by the Indo-US Science and Technology Forum - a bilateral forum funded by the Governments of India and the USA.
In the workshop, I helped in conducting (and also participated) 2 design sessions of which one was conducted without the use of the tool and one with the use of the tool. Later, feedback offered by the participants about the tool, ease of usage, understanding of the tool and the design process, the training modules were analyzed and studied for further development of the tool.
I also voluntarily took the responsibility of covering the entire workshop through photographs.
A glimpse of the design session presentations
USER INTERFACE REDESIGN
Volunteer work during the course of the internship
Based on the analysis conducted of the feedbacks after the design session in relation to the use to the tool 'InDeaTe', it was found that the user interface can be made more user friendly to help the people navigate easily through the design cycle.
I tried and helped on the same along with my ongoing research work.
Please find the redesigned wireframes below.
Logo
I also tried to design a logo for 'InDeaTe' during my period of internship.
The logo reflects an arrow(upwards) that majorly indicates two things: one that design leads to progress of the entire world as a whole (it can also be seen as a mountain rising high) and the other indicates the nature of InDeaTe i.e. a step by step process through the entire design cycle. Also, the three squares indicate the three pillars of sustainability, another very important component of InDeaTe. The squares are connected into a continuous chain, indicating the ITERATIVE nature of the design process.
This span of 10 weeks shall also stay very special to me as this is when I developed my interest in Design and Research. I am grateful to Prof. Amarsh Chakrabarti and all members of IDeaS Lab, CPDM IISC for their support and encouragement as I was starting my journey as a design researcher. .
ABOUT
In this project, my team and I worked towards enabling stay-at-home parents to manage their time effectively and efficiently so that they have more time for themselves and their hobbies and passions. Our target user group was stay-at-home parents (SAHP) living in the United States who have minor children living at home with them. We were mentored by Prof. Bruce Walker (Georgia Institute of Technology) as part of a course called HCI Foundations.
Duration
Methods
Deliverables
12 weeks
Aug. 2018 - Nov. 2018
Literature Review, Semi-structured Interviews, Affinity Mapping, Brainstorming, Systems Mapping, Mood-boarding, Prototyping, Usability testing
A hi fidelity prototype of the system and testing results
DESIGN PROCESS
USER RESEARCH
Semi-structured Interviews
We conducted semi-structured interviews with 11 stay at home parents (8 stay-at-home mothers and 3 stay-at-home fathers). The parents were recruited using convenience sampling and snowball sampling. The objective of the study was to learn about the problems faced by stay-at-home parents in their day to day lives. The interview questions asked the parents about their schedule on a typical weekday and the problems they face while performing the various tasks in the house and outside. We also asked about their social life and their hobbies
Data Analysis
In order to make sense of the significant amount of qualitative data that we collected through interviews, we choose to create an affinity map. We converted our data from all 11 participants into 150 data points on individual sticky notes and mapped them into 43 groups based on specific user tasks and goals. We then arranged these 43 groups into 6 distinct categories-
The parents we interviewed all had different stories to tell. Some were taking a break from their careers and were planning to go back to work after a few years while others were deliberate in their choice to be a long term stay-at-home parent. Despite their differences, we found that the majority of the parents faced the same challenge — time management. Finally, we settled on the following user space:
Enable SAHPs to manage their time more effectively to have more time for themselves.
as this seemed interesting to the team and we believed to could greatly affect the overall happiness quotient of a stay at home parent.
IDEATION
Brainstorming
After analysing our data, we walked the wall and brainstormed 33 design ideas in the broad categories of- meals, shopping, daily tasks, and leisure time.
Personas
To get the team same page as we go about designing for our need, we made 2 personas of stay at home parents.
Design Alternatives
After further discussion based on our ideas from walking the wall, we narrowed down the list of ideas to three concepts that we felt would best address stay at home parents’ need for more personal time.
All the three designs were designed to a level at which we could then present it to potential users and obtain feedback. We made storyboards for all the three designs to learn of any potential design gaps in the concept and to lay down a use case of each of three designs.
User Feedback- Design Alternatives
We showed three stay-at-home parents the wireframes of the three concepts with a description of the features. We conducted semi-structured interviews with them that asked them their overall impressions of the system, what they liked and disliked about the concepts and how do they see themselves using these design in their lives. We also inquired about which of these designs serves their most urgent need.
All three stay at home parents preferred the smart scheduler over the other two concepts. Smart Scheduler was the most holistic solution of the three and it solved the most urgent need in their life (time management) and augmented and improved on the systems they currently use to keep track of time.
SMART SCHEDULER- THE CONCEPT
Systems Map
The Systems Map below gives us a good idea about the number and type of stakeholders involved in order to make the system robust. It reflects the numerous interactions that take place between the stakeholders in order to enable a smoothly functioning system.
Storyboarding
DESIGN
Mood Board
Features
The smart scheduler is a physical screen (17” x 22”) that is oriented horizontally so that it is easily accessible at an eye level situated on a wall in the house.
The main features of the system are:
1. Daily schedule
Parents can see their daily schedule on the timeline on the leftmost side of the screen. The timeline displays six hours at a time so that parents can see the details of the next few hours. Each event is represented with an icon, a title, a time, and any notes the parent wants to add. To cancel an event, the user can swipe it away. To edit it, the user can long press it the see the options pop-up.
2. Preview of the next week’s events
Parents can see a preview of their weekly schedules on the right side of the screen. We made the choice to show only icons to reduce the parents’ cognitive load and avoid overwhelming them. To view the timeline for a specific day in the week, users can tap on it in the weekly preview and it will expand to show the details for that day.
3. Scheduling events:
Users can use the digital sticky notes on the right side of the screen to add events to their schedule. To create an event, users can enter the event details on a sticky note with a corresponding category using the stylus, keyboard, or voice input. The user then drags the sticky note onto the timeline and the Smart Scheduler will automatically detect the event title, type, time, and notes and place it in the appropriate spot with a descriptive icon. There are 6 categories of sticky notes: chores, self-care, errands, appointments, custom, and to-do.
4. Expandable footer
The expandable footer contains the monthly calendar, analytics dashboard, suggestions, and motto of the month. The unexpanded footer shows a preview of the analytics dashboard and suggestion and also contains clickable icons for keyboard input, voice input, volume, wifi, and settings.
5. Mobile app
The Smart Scheduler mobile app contains the basic functionality of the wall calendar and is designed to be complimentary in its functionality. SAHPs are able to view their daily schedule, weekly schedule, and a preview of the month. They can also enter events on the mobile app by entering the title, time, date, and/or notes about the event.
6. Settings
We grouped the Settings as per the following.
a. My Account- User’s name, Email, Change password, Hobbies, Wi-Fi
b. Display- Sleep after, Night Mode, Adaptive Brightness
c. Sounds- Volume, Touch Sounds, Touch Vibration, Alert Sounds, Customize Sounds
d. Accessibility- Screen Reader, Magnification, Color Filters, High Contrast, Toggle Button
e. Languages and Input- Languages, Virtual Keyboard, Smart Pen, Spell Checker, Autofill
f. Date and Time- Time zone, 24-hour time
g. Security and Privacy- Screen Lock, Lock Screen Notifications, Location
h. Calendars- Imported Calendars, Link Devices
i.
Challenges
1. The Smart Scheduler relies heavily on user buy-in. If a user does not consistently schedule events, the system will not be able to analyze the breakdown of activities accurately and suggest appropriate events for the user’s free time.
2. Due to its large touch screen interface, Smart Pencil, OCR, and the advanced features, the Smart Scheduler might not be affordable for a number of families, especially some families with stay at home parents (and therefore one income source for the family).
3.The Smart Scheduler needs to be continuously plugged in to a power source because having a battery would not only add a task of charging it from time to time, but also add to its cost. However, the Smart Scheduler would then need to be hung near a socket all the time. It would need a long wire if the socket is far away.
4. Owing to the Smart Scheduler’s large dimensions (17” x 22”), it needs an empty wall in the house so that it’s easy for the parent to use it on the go. This adds constraints and introduces dependency on an external factor - availability of a wide enough empty wall.
5. About half of the SAHPs that we interviewed are uncomfortable with technology. Because of this issue, we’re uncertain about the Smart Scheduler being able to accommodate all SAHPs since it relies heavily on basic tech knowledge.
6. The system needs to wifi access to function at its best because of weather prediction, ability to sync with phones or a spouse’s calendar, etc. This creates external dependencies, especially for families who can’t afford or need wifi at home.
7. The Smart Scheduler only encourages SAHPs to spend time for themselves - it does not make them do it. These suggestions might be ignored and be given lesser priority by SAHPs
EVALUATION
All participants were recruited via convenience sampling. We conducted a total of six interviews with four stay-at-home parents and two non-stay-at-home participants; we recruited a combination of stay at home parents and non-stay at home parents due to time constraints. Ideally we wanted to conduct in-field interviews with a paper prototype but due to constraints on time and resources, we performed a few remote evaluation sessions using an online prototype.
We gave them two tasks to conduct and asked about their experience while doing them-
There were three main parts of the evaluation
1. Think aloud followed by questions,
2. Online SUS survey,
3. Desirability analysis.
RESULTS
The user found this system to be better than existing processes they use to schedule things. They indicated that this is more intuitive and easier to use than existing mobile applications and physical calendars. They features of the system make scheduling more efficient. They found the interactions with the system to be intuitive.
Some concerns of the users were-
Users chose a set of 5 adjectives to describe the system from a list of 30 adjectives given to them ( both positive and negative adjectives. ). The top five chosen adjectives were:
DESIGN RECOMMENDATIONS
Based on the feedback received, we came up with a bunch of design recommendations to improve the design of the system to make it more usable and useful for our users. Changes were suggested both in the visuals of the system and the features of the system.
ABOUT
Schlotzsky’s is a sandwich franchise founded in Austin, Texas. It is committed to facilitating the accessibility and usability of its website, www.schlotzskys.com for all people. My team and I redesigned the website to make it more usable and accessible. This project was part of a course called “Psych Research Methods” at Georgia Tech. We were mentored by Dr. Carrie Bruce.
A hi fidelity prototype and parts of the prototyped implemented for testing with visually impaired users.
Actively involved in research, conceptual design and wireframing.
DESIGN PROCESS
TASK ANALYSIS
We conducted task analysis to understand users’ goals when they are ordering from the Schlotzsky’s website and how they are able to complete their goal on the site. Conducting task analysis also allowed us to learn about navigational issues on the website and understand the process at a granular level.
INTERVIEWING / THINK ALOUD TESTING
The goal of this user research method was to get insights into Schlotzsky's online ordering process. We wanted to understand strengths and weaknesses within its interface from the perspective of a consumer. Due to time constraints for this deliverable, our interviews consisted of participants without vision impairments and was focused on usability.
Method details
We interviewed a total of 13 participants that we gathered through convenience sampling but fit within target users based on data provided by Schlotzsky's. There were the following four phases within an interview:
DATA ANALYSIS
After conducting interviews and think aloud sessions, we performed affinity mapping to group issues in order to obtain a set of problems we should cater to. We took detailed notes on all interviews and then converted participants data into a total of 170 sticky notes.
The group of user needs identified (pink stickies) were:
COMPETITIVE ANALYSIS
We wanted to get a baseline of accessibility for Schlotzsky’s competitors’ websites and online ordering processes. Using accessibility testing tools found from a list on www.w3.com (the World Wide Web Consortium), we conducted automated testing on the homepages and online ordering pages of Schlotzsky’s, Chilis, Hopdoddy, Taco Bell, and Subway. We chose to evaluate Chilis, Hopdoddy, and Taco Bell because our industry shepherd provided these restaurants as inspiration for our design alternatives.
We took note of significant differences (if any) amongst the websites rated highly and saw if we can incorporate them into our design alternatives. Keeping this in mind, we also conducted a task analysis of the online ordering process for the most accessible website, Hopdoddy.com.
TREE TESTING
While conducting Tree testing, our goal was to collect quantitative data about the Information Architecture of the main Schlotzsky's website and the olo website of Schlotzsky's. We hoped to learn about where people get lost in the content of the website. Since the website has redundant call to action buttons on a single page, it would help us understand the preference of users while navigating through the website. This would also give us information about misleading labels and confusing navigation patterns.
Data Analysis
A total of 68 participants performed the testing. 50 (73%) people completed our study out of a total of 68 participants. 18 abandoned. The tool generated for us a representations of quantitative findings. The directness, success rate and time taken by participants is as shown below
A detailed analysis of all data can found here.
INSIGHTS AND DESIGN CRITERIA
PERSONAS, EMPATHY MAPS AND USER JOURNEY
PERSONAS
To get the team same page as we go about designing for our need, we made personas of stay at home parents. This also helped the team to refer back to our user group when taking important design decisions.
EMPATHY MAPS
Next we designed empathy maps for our personas. It allowed us to put ourselves in user's shoes and understand them better. It helped us in realizing better what our users want. Understanding their needs would lead to a much better user experience.
USER JOURNEY
Creating user journey maps helped us understand and address our user's needs and pain points. Through this, we understood user behavior, uncovered gaps in the user experience, and then took action to optimize the experience for our users.
DESIGN AND EVALUATION: COMING SOON
ABOUT
In this project, I analyzed the social sustainability of online communication platform ‘WhatsApp’. and formulated a definition for a socially sustainable system in the context of online instant messaging platforms. I came with a set of guidelines that a designer could follow to create socially sustainable online instant messaging platforms. It was done as part of Bachelor’s Thesis Project.
Duration
Methods
Deliverables
12 weeks
Aug. 2017 - Apr. 2018
Literature Review, Semi-structured Interviews, Invivo and Descriptive coding
A set of 12 design guidelines
PRESENT SCENARIO OF BACKGROUND
Many online social platforms have become hugely popular in recent years for sharing information with one another. Unfortunately, an increasing tendency regarding misuse and manipulation of these communication platforms by vested interests has also come into notice.
A very good example is the spread of fake news, rumors and sinister messages around India using WhatsApp. In the month of April 2018, following the false rumors about child kidnappers, over 22 people were assaulted and killed in India. Messages are being shared on WhatsApp to develop tension between religious communities. Fake pre-election poll purportedly sponsored by the BBC, are being extensively circulated to influence voters in India.
Although, these popular online communication platforms are fulfilling an important social need, their unintended and malicious use cannot sustain the positive social impact of these technologies.
Research Questions
● What are the factors that affect the social sustainability of instant messaging platforms (WhatsApp in current context)?
● How do these factors influence our online communication?
DESIGN PROCESS
SOCIAL SUSTAINABILITY DEFINED
After studying the various existing definitions and explanations, we propose a definition of a Socially Sustainable System as follows:
“A socially sustainable system is a set of interconnected and interdependent tangible artifacts which support the capacity of current generations to create and be part of a healthy and livable community without compromising the ability of future generations to do so’’.
USER RESEARCH
Semi-structured Interviews
I carried out an in-depth qualitative user study over a period of around 3 months. The objective was to learn about the WhatsApp usage of individuals and identify factors that influence its usage positively or negatively. A total of 18 regular users of WhatsApp from India (9 male and 9 female) were interviewed.
An approach of purposeful sampling with maximum variation was used to select the participants. The participants were aged between 7 and 69 yrs (median age 38 yrs). All interviews were audio recorded to complement and support the notes taken during the interview sessions during the user study with prior permission of the participants.
For each participant, a semi-structured interview was conducted which comprised both open-ended and closed-ended questions.
The questionnaire for the study was designed to explore the following variables:
1. Demographics- Gender, age, native place, and profession.
2. Appropriation- Usage of WhatsApp.
3. Incorporation- Time spent on WhatsApp. General intent of usage. Type and person with whom communicated. Kind of information shared and received. Etc.
4. Objectification- What is WhatsApp for them? Recent satisfying or unsatisfying experience through WhatsApp. Etc.
5. Conversion- Problems faced. Preference and usage of other platforms.
DATA ANALYSIS
In vivo and descriptive coding was performed on the transcribed data. On identifying a fragment of text, where any reason for a variation in WhatsApp usage could be observed, it was highlighted and was allocated a code that described the chosen fragment. In another iteration of coding of the fragments of identified text, the codes whose meaning was redundant were assigned a single uniform code. These codes were then grouped together to form ‘factors’. These factors were defined as aspects that affected the ‘capacity’ of usage of WhatsApp. Capacity was defined ability to engage with the platform in a way that is meaningful and positive.
A framework was designed using the communication model of Gulf of Evaluation and Execution as proposed by Don Norman. Norman suggests that any action has two parts to it- executing the action and evaluating the results. Both execution and evaluation affect the mental state of a user and thus the “capacity” of the user. He has divided the cycle of an action from execution to evaluation in 7 stages namely plan, specify, perform, perceive, interpret, compare and goal. The effect of each factor was analyzed with respect to the stages of this framework and the factors were assigned to the stage in the model that they affected. Then the results were organized in a spreadsheet clearly marking the stage of the framework, the factors, the codes from where the factors originated and the frequency of each of these factors.
Thus, a group of factors was derived that affected the ‘capacity’ of usage by a user and their degree of effect, based on the frequency. Each factor was clearly defined and named.
The factors were then grouped based on the what aspect of the system do they affect or are affected by. The aspects being- Design, Technology, Emotions, Miscellaneous.
The grouping helped me identify what factors can be affected by altering the design of the system.
RESULTS
A total of 57 factors were identified. There was a large variance in the frequency of each factor, some of which were mentioned only once and others of which were mentioned more than 20 times. All factors were precisely defined.
Factors
Frequency
Definition
Physical Distance
14
It is the inability to meet because of being far away.
Desire to stay connected- Personal
20
It is the closeness of the relationship amongst two individuals
Events in life
11
These represent the significant events happening in our lives or that of others.
Social Influence
16
It is the influence of other people on our social communication
Quickness of Connection
12
It is the ability to deliver the information quickly to the other person.
Respect of Opinion
7
It is the value and importance given to the message you delivered
Curiosity
7
It is the curious nature of humans affecting usage of the platform
Anxiety
6
It is the anxious nature of humans affecting usage of the platform
Desire to know about other’s activities
22
It is the desire to know about the another person’s activity in their lives and response to our message.
Commonalities
9
It is the similarities we have with other people in our life in the present.
Cost
7
It is the amount of money it takes to connect over the platform.
Relevance of received Information
27
It is the relevance of information exchanged over the platform
Authenticity of Information
7
It is the authenticity of information exchanged over the platform
Desire tostay connected- Professional
10
It is the desire and ability to stay updated in our professional lives
Informative- Surroundings
8
It is the desire to be aware of our surroundings.
Perceived Expectations
10
It is the expectations one has from the person heis connected with on a platform
Privacy of Personal Information/Control over Privacy
8
It is the desire to keep personal information (also about life activities) private amongst a group of people.
Tech Savvy/Ease of Learning
11
It is the technical knowledge (also how to use information) that one possesses
Frequency of use by others
10
It is the usage frequency of a platform that I want to connect with
Real Life connection
11
It is the desire to connect in person with someone
Network Reach
8
It is the strength and constraints over a network that connects us.
Time to socialize
14
It is the time available with a person to connect with other people.
Ability to Connect with anyone
20
It is the ease of connecting or sharing information with a person one desires to connect with.
Expected use of a platform
15
It is the perceived/expected use of a certain platform by the user
Use of other platforms
13
It is the use of other social media communication platforms available.
Contacting techniques
13
It is the techniques one can use to exchange information on a platform
Ease of expression
12
It is the ease of expressing what you wish to convey to a person.
ABeside the Factors listed above, some more with much lower frequency were also found. These factors were not perceived as important by more than 2 interviewees. However, if a broader and larger cross section study is to be undertaken, these may find more importance.
Factors
Familiarity with the interface
Fear of Judgment
Freedom of Speech
Relevance of group with time
Quality of connection
Maturity
Number of People
Insecurities
Mutual friends/Connections
Ease of hardware control
Cultural Customization
Ability to keep Records
Centralized group controls
Ease of sharing (from other platforms)
Ease of media management
Sharing Limits
Length of text
Ease of Multitasking
Acceptance of change
Effect on health
Technical errors
Memory Storage
Control over one's info (that others possess)
System Prompts
Strength of Internet Connectivity
New features
Feedback on ability to respond
Ease of Navigation
Efficiency of technology
DATA SYNTHESIS
For every factor here, a design guideline could be proposed that shall direct the designer into mirroring the effect of the factor into the design of the system. This helped me provide a set of 12 guidelines to design a socially sustainable system. Based on the proposed guidelines, I also proposed a set of statements that shall help the designer test the effectiveness of his design as considered from the perspective of social sustainability.
DESIGN GUIDELINES
1. The designer should adapt the system to diverse cultural differences like language, beliefs, age, gender etc. in the user group and accommodate the difference in understanding of the user group.
2. The system should ensure the availability, awareness and context of use of its features.
3. The system should help the users form easy and relevant connections by working within the constraints of available information and technology.
4. The system must ensure timely, reliable and transparent feedback and feed-forward mechanisms in chosen exchanges of information and conversations.
5. The system should offer control to the user to determine what information or data to receive or deliver.
6. System should allow the user to reliably connect and share information across other applications
7. The system should ensure security of shared data for all its users and users must be aware of the security measures in place and its limitations.
8. The system should promote trust and encourage users to provide accurate information through the system. (Maturity)
Example: Report Feature (Positive), Lack of measures to prevent fake profiles (Negative)
9. System should be updated regularly to accommodate new technological, social and cultural requirements of the user.
Example: Negative: Applications such as Orkut failed because they didn’t adapt themselves with the upcoming needs of the society. Positive: Messenger and WhatsApp identified the growing popularity of ‘stories’ feature on Instagram and made changes to their systems accordingly.
10. The system should be able to adapt to the need of the user based on different contexts of conversation(formal/informal etc.). (Quality of Life)
Example: Negative: A good deal of plans are made on WhatsApp. Groups of all sorts are made but WhatsApp doesn’t provide any special features to plan the events smoothly. Positive: Messenger however, lets us set reminders and conduct polls while planning a meeting or event.
11. The system should ensure the disposal of irrelevant data and keep records of relevant data based on the users choice. (Quality of Life)
Example: Negative: WhatsApp does nothing to encourage the deletion of unnecessary and irrelevant data (Inactive groups etc. ) from the platform. Positive: Google Photos encourages the user to empty space on phone when the data is uploaded online.
12. The system should offer help and answer any question that a user has regarding the system at all times.
Example: Negative: Most applications, including WhatsApp ask the user to write to them in case they need help with anything on the system. The conversion rate of people who need help with the platform and those who write is very less. Positive: Uber has a wonderful help tab with answers to all probable problems a user may face. It makes it very user to report a problem he has been facing with the system.
PRESENTATION
I presented the guidelines in the form of commandments of design via posters. I distributed the same in the presentation of my project.
EVALUATION
To test the application of every guideline on the platform, I proposed of set questions to perform a user survey. The user shall use a Likert Scale to answer the questions. The opinion expressed in each point will also be reverted to negate any bias from the survey. The statements shall then be randomized while testing.
I tested the guidelines using these questions with a pre-final year design undergraduate student. I performed two sessions with the student. In the first session, I asked him to redesign WhatsApp to make it more socially sustainable (I explained to him what social sustainability means and the various aspects of it). Later, I gave him the set of guidelines and asked him to to apply these guidelines to evaluate WhatsApp and come up with possible design ideas to attend to the design gaps that he discovers as he applies the guidelines. The guidelines provided a clear direction to the design undergrad and helped trigger design ideas. The quantity of ideas during the brainstorming session where the guidelines were provided were much higher than without the guidelines. He could relate to the guidelines and acknowledge their contribution towards a socially sustainable internet community.
Graphic Product Design
As part of my course on Graphic Design, I conceptualized and prototyped a calendar taking inspiration from a Film Roll. It works such that every frame of the roll is a date on the calendar. The roll can be rotated as the days pass to change the dates. I was mentored by Dr. Nanki Nath (Indian Institute of technology, Guwahati). I was responsible for the entire process of conceptualizing and making the calendar into a tangible product. The product was made in the mechanical workshop at my department.
Design
The calendar takes the shape of a film roll that rests on a wooden block. Every block of the film roll were replaced by a day of a month and 12 rolls for the 12 months were made for prototyping purposes due to to thicker material available in the department workshop In the final product, I thinner material can be used to make one whole roll.
The date in the middle reflects the date of today, graphics of which are inspired by any special event that might occur on the date. On the rolling the film roll, we can switch the dates.
Features
Below, I have explained the features to my product
Wooden base with grooves of the thickness of the discs to hold the discs in place. Graphics have been made, reflecting the theme.
High Impact Polystyrene sheets cut into discs with 2 cavities of different lengths that act as supports to the rolls. The discs have been designed to resemble a film disc.
The cylindrical rolls in the prototype are made up of paper. Strips of paper are
rolled to form two cylinders. The ends of the frame strip are joined to the cylinders and then the strip is rolled along the cylinder. The cylinders should be rotated to change the date.
Images
Product Design
During the course of my Bachelors, I spent a good amount of time in the workshop performing and practicing various modeling techniques and working on various hands-on projects.
Course Name: Modeling and Simulation Techniques
Course Instructor: Supradip Das
Grade: 10/10
Techniche is the annual Techno-Management festival of the Indian Institute of Technology Guwahati, India. It witnesses a new zenith of techno-management events ranging from raging robotics to corporate module to inspiring lecture series to awe striking workshops to jubilant nights and serves as a distinguished platform for entrepreneurs, innovators and technocrats to showcase their abilities as every edition sought to take a leap forward in redefining and revolutionizing the technology.
I worked in a team of 10 designers and led the team along with 3 other leads. I was responsible for conceptualizing and creating various graphic works to promote the festival and its events globally.


Actual results base dir (this.testsLocation + '/results/actual').
Bail on first failure (false).
Case files glob pattern, relative to testsLocation ('*/.ply.ts').
Expected results base dir (testsLocation + '/results/expected').
Flow files glob pattern, relative to testsLocation ('*/.ply.flow').
File pattern to ignore, relative to testsLocation ('/{node_modules,bin,dist,out}/').
Log file base dir (this.actualLocation).
Prettification indent for yaml and response body (2).
The opposite of 'verbose' (false).
Request files glob pattern, relative to testsLocation ('*/.{ply.yaml,ply.yml}').
Predictable ordering of response body JSON property keys -- needed for verification (true).
Result files live under a similar subpath as request/case files (true). (eg: Expected result relative to 'expectedLocation' is the same as request file relative to 'testsLocation').
File pattern for requests/cases/flows that shouldn't be directly executed, relative to testsLocation.
Tests base directory ('.').
Files containing values JSON.
Verbose output (false). Takes precedence over 'quiet' if both are true.
Generated using TypeDoc
Ply options. Empty values are populated with Defaults.


--- layout: fullwidth title: Past Events primary_title: Events body_class: events-page --- {% assign now = site.time | date_to_xmlschema %} {% assign past_events = site.events | where_exp: "event","event.eventdate < now" %} {% assign primary_title = site.headings.events %} {% assign layout_class = 'sidebar-right events-page' %}


RightValues
Instructions
You will be presented with a series of statements. For each one, click the button with your opinion on it. There is a langauge picker in the top right if you wish to use this site in another language.
You will be presented with a series of statements. For each one, click the button with your opinion on it. There is a langauge picker in the top right if you wish to use this site in another language.


Coming of Age at the End of the World
Event Date: Wednesday, December 4, 2019 - 19:00
Sarah Jaquette Ray lectures on "Coming of Age at the End of the World: An Existential Toolkit for the Climate Generation."
Wednesday, December 4, 2019
7:00 p.m.
FREE
Corwin Pavilion, UC Santa Barbara
Hosted by Walter H. Capps Center for the Study of Ethics, Religion, and Public Life. Co-Sponsored by the Department of Environmental Studies.
Event Category: LECTURE


Processes
- Name - process name
- Type - "C" for Compute Process, "G" for Graphics Process, and "C+G" for the process having both Compute and
Graphics contexts
- GPU ID - id of GPU in which process running
- pid - process id
- sm [%]
- mem [%]
- enc [%]
- dec [%]
Utilization
This section displays a graph of GPU & memory utilization.
Donate
GitHub
Telegram


Sylvanian Families Chocolate Rabbit Baby
UK Biography Information
Creme loves the Pain au Chocolat her dad makes - she'll often greet the other Sylvanians with chocolate around her mouth. She's good friends with the birds in the garden, and shares her buns with them.


{% extends "global/Page.html" %} {% load otree static %} {% block title %} Instructions {% endblock %} {% block content %}
You are Participant 1 in this study. The other participant is Participant 2.
In each round, you and Participant 2 will simultaneously interact with each other in two tasks, Task A and Task B. In each task, you and your co-participant must choose between two options. The points you earn in each round will depend on what you and Participant 2 independently decide for each task. The two tasks are independent. The points you earn in either task do not depend on the decisions made in the other. In the beginning of each round, you and the other participant receive an endowment of {{ Constants.endowment_high }} points in Task A and {{ Constants.endowment_low }} points in task B.
Below you can see the two options that you and Participant 2 can choose from in each task in each round.
Participant 2 face exactly the same Task A with you as the recipient. You and Participant 2 have to choose simultaneously between these two options
Participant 2 face exactly the same Task B with you as the recipient. You and Participant 2 have to choose simultaneously between these two options
The session will last for multiple rounds. There will be at least {{ Constants.min_rounds }} rounds. After the {{ Constants.min_rounds }}th round, there will be a 50% chance of another round. After that round, there will again be a 50% chance of another round, and after that round, there will again be another 50% chance of another round, and so on until the tasks end.
You and the other participant are both endowed with {{ initial_endowment_joint }} points at the start of the game ({{ Constants.endowment_high }} points for Task A and {{ Constants.endowment_low }} points for Task B, for each of the {{ Constants.min_rounds }} rounds). For any additional round that may occur after the {{ Constants.min_rounds }}th round, you receive an additional endowment of {{ Constants.endowment_high }} points for Task A and {{ Constants.endowment_low }} points for Task B.


{{ text || 'Please write your seed words below and store them in a secure place. These can be used to restore your wallet.' }}
{{mnemonic}}


This app uses openweather API to get weather Info.
To view additional info and to set your location click the button below.


This is an Edge AI application. Inference is performed using a TPU hardaware accelerator to provide more than 50 fps with less then 4 W.


--- title: About Dr. Angus subtitle: A Bio layout: page css: [public/about.css] ---
Dr. Ruth Angus is an Assistant Curator of
Astrophysics at the American Museum of Natural History. She also
works as an associate research scientist at the Flatiron Institute and an adjunct professor of
astronomy at Columbia University.
Her research interests include: stellar rotation, magnetism and
evolution; exoplanet populations, formation and evolution; galactic archaeology; astronomical
surveys; and statistical data analysis and machine learning
Dr. Angus’ interest in extrasolar planets comes from her desire to reveal the processes behind the
formation of these worlds and how they are distributed across the galaxy. methods.
Dr. Angus studies the stars found within our Milky Way, with the help
of Kepler, Tess, and Gaia, developing new methods to measure the age of stars and the planets that
orbit them. Likewise, Dr. Angus is exploring the dynamical evolution of planetary systems. To do so,
she has been studying the stellar rotation and magnetic activity, as well as the affects of stellar
magnetism, on planets. She implements statistical data analysis and machine learning methods
throughout her research.


- name is Hatem Sallam.
- I'm 26 years old.
- I've gratuated from al balqa' applied university in 2016.
- My major is civil engineering.
- I've decided to change my career and learn programming to develop my self and get a better job opputunities.
my top 10 movies
- sherlock holmes
- transporter
- 300
- law abiding citizen
- expendables
- captain philips
- forrest gump
- the green mile
- iron man
- harry potter


SIGN IN
Forgot password?
Remember Me
Facebook
Google
Create Account
Sign In Later
Connection Error
PLEASE WAIT
Version Info:
Remember Me Data:
Signed In User Data:


{{state.desired}}
{{state.current == "0" ? "Sensor Offline" : state.current }}
System
Off
Cool
Heat
Fan
Auto
On


I am a Javascript ninja out of Florida. With over 8 years of experience, I can also guarantee I can create any feature or script imaginable. My bread & butter is Javascript, and front-end development, with AngularJS, BackboneJS, & ReactJS in JSX, and/or ES6 syntax. I have worked full-time locally for multiple software companies, like Medlium, Apply Networks, and Mobiquity INC, where I developed mobile first applications, for fortune 500 companies, like The Weather Channel, and Nestle Goodness. if you have any doubts, just take a look at my Linkedin
Mobiqityinc.com
My Previous employers own website!
TuneScoop.com
File Upload website using rsyanc between servers!
Localnow.com
The Weather Channel's Live Streaming Service
Contact me and I’ll get back to you within a day.
Gainesville, Florida
+13863854040
Jimmy@LifeOfCoding.Online


mme(1) Qualcomm Atheros Open Powerline Toolkit mme(1) NAME mme - Qualcomm Atheros vendor-specific message enumerator SYNOPSIS mme [options] DESCRIPTION Print Atheros vendor-specific message types and names with associated error codes and text on stdout. Output can be printed in various formats such as HTML, CSV and plain text. The plain text format is ideal for searching using a util‐ ity like grep. This program is part of the Qualcomm Atheros Powerline Toolkit. See the AMP man page for an overview and installation instructions. OPTIONS -c Output in Comma Separated Value (CSV) format. This format is suitable for import into a spreadsheet or database. -h Output in Hypertext Markup Language (HTML) format. This format is suitable for inclusion on a basic webpage. -?, --help Print program help summary on stdout. This option takes precedence over other options on the command line. -!, --version Print program version information on stdout. This option takes precedence over other options on the command line. Use this option when sending screen dumps to Atheros Technical Support so that they know exactly which version of the Linux Toolkit you are using. See the HomePlug AV Specification for a description of all HomePlug AV message types. See the Qualcomm Atheros INT6000 Firmware Reference Manual for a description of Atheros Vendor Specific message types. EXAMPLES The following example prints Atheros vendor-specific message codes and names, along with associated error codes and text, on stdout. The output format is plain text because no formatting options were specified on the command line. # mme 0xA005 VS_WR_MEM.CNF 0x14 "Bad Checksum" 0xA005 VS_WR_MEM.CNF 0x1C "Bad Length" 0xA005 VS_WR_MEM.CNF 0x38 "Bad Address" 0xA005 VS_WR_MEM.CNF 0x3C "Bad Data Alignment" 0xA009 VS_RD_MEM.CNF 0x10 "Bad Offset" 0xA009 VS_RD_MEM.CNF 0x14 "Bad Length" 0xA00D VS_ST_MAC.CNF 0x10 "Bad Module ID" 0xA00D VS_ST_MAC.CNF 0x14 "Bad Image Checksum" 0xA00D VS_ST_MAC.CNF 0x1C "Bad Image Length" 0xA00D VS_ST_MAC.CNF 0x38 "Bad Image Load Address" 0xA00D VS_ST_MAC.CNF 0x3C "Bad Data Alignment" 0xA00D VS_ST_MAC.CNF 0x40 "Bad Start Address" 0xA011 VS_GET_NVM.CNF 0x10 "No NVRAM" 0xA01D VS_RS_DEV.CNF 0x01 "Device Failed to Reset" 0xA01D VS_RS_DEV.CNF 0x02 "Device Busy" 0xA021 VS_WR_MOD.CNF 0x10 "Bad Module" 0xA021 VS_WR_MOD.CNF 0x12 "Bad Length" 0xA021 VS_WR_MOD.CNF 0x14 "Bad Checksum" 0xA021 VS_WR_MOD.CNF 0x20 "Bad Offset" 0xA021 VS_WR_MOD.CNF 0x40 "Operation Blocked" 0xA021 VS_WR_MOD.CNF 0x50 "Fail to lock NVM" 0xA025 VS_RD_MOD.CNF 0x10 "Bad Module" 0xA025 VS_RD_MOD.CNF 0x12 "Bad Length" 0xA025 VS_RD_MOD.CNF 0x14 "Bad Checksum" ...... The next example does the same thing but output is piped into the grep utility which selects only those lines containing the substring "0x40". The result shows that this error code is used by two different Atheros vendor-specific messages. # mme | grep "0x40" 0xA00D VS_ST_MAC.CNF 0x40 "Bad Start Address" 0xA021 VS_WR_MOD.CNF 0x40 "Operation Blocked" ...... DISCLAIMER Atheros HomePlug AV Vendor Specific Management Message structure and content is proprietary to Qualcomm Atheros, Ocala FL USA. Consequently, public information is not available. Qualcomm Atheros reserves the right to modify management mes‐ sage structure and content in future firmware releases without any obligation to notify or compensate users of this pro‐ gram. SEE ALSO amp(1), efsu(1), hpav(1) CREDITS Charles Maier<EMAIL_ADDRESS>open-plc-utils-0.0.3 November 2013 mme(1)


Hi! I'm Kenji Hirabayashi.
After working for a decade in fine dining restaurants, I decided to test my skills in tech. I enrolled in The Iron Yard, where I graduated from their 12-week bootcamp focused on client-side web application development.
When I'm not coding new exciting projects, I enjoy bicycling, tennis, cooking, and traveling.
I am currently looking for new web development work. If you have any interesting opportunities, please don't hesitate to contact me.
Email is the best way to reach me.


Input:
Output Style: Decimal Character Codes Hexadecimal Character Codes HTML with named character references Java string
Output:


| Declared in | RMUploadPreset.h |
|---|
These methods are used for preset setup and presentation.
+ credentialsClass
Used to determine if your preset requires credentials, and which credentials it can share with other preconfigured presets.
+ uploadTaskClass
The RMUploadTask class for this preset.
+ localisedName
The name for the preset type, preferably localised.
+ icon
The icon for the destination type. This image should be square and at least 100px in dimension. Any decoration added is application specific.
+ serviceURL
This method constructs the NSURL from your Info.plist.
Used to determine if your preset requires credentials, and which credentials it can share with other preconfigured presets.
+ (Class)credentialsClass
The default implementation returns Nil, return an RMUploadCredentials
class if you support credentials.
RMUploadPreset
.h
The
class for this preset. RMUploadTask
+ (Class)uploadTaskClass
An
subclass. RMUploadTask
This method is required, if not implemented the framework throws an exception.
RMUploadPreset
.h
The name for the preset type, preferably localised.
+ (NSString *)localisedName
RMUploadPreset
.h
The icon for the destination type. This image should be square and at least 100px in dimension. Any decoration added is application specific.
+ (NSImage *)icon
RMUploadPreset
.h
This method constructs the
from your Info.plist. NSURL
+ (NSURL *)serviceURL
If sent to a preset whose bundle
is nil, it will throw an exception.RMUploadPlugin
ServiceHostKey
This will only be useful for your own web services where you can use the Info.plist preprocessor to switch between development and deployment servers.
RMUploadPreset
.h
Last updated: 2010-9-9


<<<<<<< HEAD
Semester
Fall 2015
Spring 2016
Fall 2016
Subject
MATH
ENGR
PHYS
=======
First Name:
Last Name:
Department:
Course:
CRN:
Email:
>>>>>>> server


We're Spectory, an end-to-end software development shop operating in Israel since early 2013 and providing software consultancy and development services in a variety of areas to customers of all sizes. We specialize in web apps, mobile apps, eCommerce and Internet of Things applications. All our services are tailored to specific customer needs and provided with a personal and customer-centric approach. Spectory has successfully delivered and maintains many projects in the above segments to customers ranging from independent entrepreneurs to fortune 500 companies
By providing exceptional customer service and aspiring to the highest professional standards, Spectory set a goal for itself to transform the way software services are provided and guarantee outstanding quality and complete customer satisfaction.


Avoid non-essential travel to other Atlantic provinces (New Brunswick, Prince Edward Island and Newfoundland and Labrador).
Avoid non-essential travel to other Atlantic provinces (New Brunswick, Prince Edward Island and Newfoundland and Labrador).
Avoid non-essential travel to other Atlantic provinces (New Brunswick, Prince Edward Island and Newfoundland and Labrador).


Sam Hains
About
This is the base Jekyll theme. You can find out more info about customizing your Jekyll theme, as well as basic Jekyll usage documentation at jekyllrb.com
You can find the source code for Minima at GitHub: jekyll / minima
You can find the source code for Jekyll at GitHub: jekyll / jekyll


--- layout: post title: Just Enough Angular for Designers date: 2015-06-01 07:35:42.000000000 -07:00 type: post published: true status: publish categories: - AngularJS - JavaScript - Programming tags: [] meta: _edit_last: '8' _nina_cross_promo: a:1:{s:8:"template";s:17:"custom_1399328552";} _wpcom_is_markdown: '1' _wpas_done_all: '1' _thumbnail_id: '1053' _yoast_wpseo_primary_category: '' author: login: ohmadmin email<EMAIL_ADDRESS>display_name: Lukas Ruebbelke first_name: Lukas last_name: Ruebbelke ---
I recently gave a talk at ngVegas 2015 called Turn Your Designers Into Deathstars with Angular where I make the case that we need to make designers first class citizens in AngularJS.
UPDATE: A huge shoutout to my designer buddy Jordan Stoddard for hand drawing all of the sweet graphics for this post!
A major portion of this talk was focused on teaching "just enough" Angular so that a designer could get started. I wanted to dedicate an entire blog post to covering these concepts so that someone new to Angular or someone with a strong design background would have a resource to help them get started.
I posted six exercises at the link below that I would encourage anyone new to Angular to go through. I am assuming a basic knowledge of HTML and CSS, but I have done my best to make them as simple and as approachable as possible. With that said, this article is for someone new to Angular; please let me know in the comments what you liked and what you found confusing. Let's get started!
[button link="http://bit.ly/ng-designers" size="large" window="yes"]The Exercises[/button]
HTML exists to visually represent some object that exists in the "real" world. If we have a table of users, the table represents the group of users as a whole while each row is a representation of a single user. Underneath that HTML exists an object that can be represented as a JSON (JavaScript Object Notation) object.
Separating the HTML markup from the actual object it represents is one of the most fundamental steps for learning Angular. Once you can look past the HTML and articulate the JSON object that is behind it, you are now in a place where you can start using Angular to bind your HTML to that object and make your markup dynamic.
JSON has a fairly simple syntax which can be read about here http://en.wikipedia.org/wiki/JSON
We will start with one-way data binding as we bind our HTML to a property in our JavaScript. If you go to the 01 Data Binding exercise via the link below and click on the scripts.js file, you will see the code below.
[js]
angular.module('ngDesigners', [])
.controller('MainCtrl', function(){
this.hello = 'world';
this.item = {
name: 'My Name',
description: 'This description'
};
});
[/js]
We are declaring an Angular module called ngDesigners which is basically a container for telling Angular how the application should be configured. On that module, we are going to create a controller called MainCtrl which we will use to define properties that we want to make available in our HTML.
In the HTML below, we have an abbreviated version of the HTML in the index.html file with two interesting attributes on our HTML. We are bootstrapping our Angular application with the ng-app="ngDesigners" attribute and directing Angular to use our ngDesigners module as a starting point. We are also telling our application that we want to control the body tag with our MainCtrl.
{% highlight html %}
Angular uses a double curly brace syntax to indicate that we are binding to a JavaScript property in our HTML. To display the this.hello property in our HTML, we just need to add this code {{main.hello}} to our HTML as seen in the snippet below.
{% highlight html %}
This will render as world when the HTML is loaded in the browser. We can also bind to properties on objects using the same technique such as {{main.item.name}} which will render as My Name. The takeaway here is that we can define a property in our JavaScript and bind to and display the value of that property in our HTML using Angular's binding syntax.
[button link="http://plnkr.co/edit/J6G7W7" size="large" window="yes"]01 Data Binding[/button]
The double curly brace syntax is really fantastic, but it is uni-directional in that you cannot manipulate the value of the property from the HTML. It only flows in one direction and that is from the JavaScript to the HTML. What happens if you actually do need to capture user input and update the JavaScript accordingly? This is where ngModel comes into play. By using ngModel, we are able to establish two-way data binding between the HTML and JavaScript.
It is common to use camel case when defining a variable in JavaScript while using snake case to reference attributes in HTML. We are referring to "ngModel" as camelCase but Angular automatically converts it to snake-case in our HTML which is why we are seeing it as "ng-model". This will show up in a few other cases as you progress in Angular so I just wanted to make you aware of that as soon as possible to avoid confusion.
We will start with the same HTML we used in the previous example, as seen below.
{% highlight html %}
By attaching ngModel to an input element, we can change the value of the input field and see it automatically update everything else on the page that is bound to that property. When our application runs, the HTML within the h4 tag will render as world. Because we added ng-model="main.hello to our input field, it will also be pre-populated with the value of world.
{% highlight html %}
{% endhighlight %}
If you run the example from the link below, you will see that both the h4 and input tags are populated appropriately; but what happens when you modify that value in the input field? The value in the h4 tag updates as you type! This is because ngModel is updating the value of this.hello in the controller which is then updating anything else that is bound to it. In this case, it is the additional h4 tag that is getting updated.
You can also bind to properties on objects using the appropriate dot notation. In the HTML below, we are binding two input fields to the name and description properties of the item object. When the user updates the value of either one of those input fields then the respective property is immediately updated.
{% highlight html %}
{% endhighlight %}
An astute observer would see that we are starting to end up with something that looks like what could be a full-fledged form. For instance, what if we changed those two input fields to bind to main.user.email and main.user.password? That is right! We would have a login form. More on that later.
[button link="http://plnkr.co/edit/RIUUmm" size="large" window="yes"]02 ngModel[/button]
We now know how to bind to a single object and display in our HTML but what if we want to bind to a bunch of objects? In the HTML below, we have a single object defined on the item property and an array of objects on the items property.
[js]
angular.module('ngDesigners', [])
.controller('MainCtrl', function() {
this.item = {
name: 'Single Item',
description: 'Some description'
}
this.items = [
{
name: 'First Item',
description: 'Some description'
},
{
name: 'Second Item',
description: 'Some description'
},
{
name: 'Third Item',
description: 'Some description'
}
];
});
[/js]
Applying the techniques from the previous lessons, we can display the single item object as we did in the HTML below.
{% highlight html %}
{% endhighlight %}
Pay particular attention to how we are simply binding to the name and description properties on the item object. To lay out the items array, we need to add ng-repeat="item in main.items" to our div. This is essentially telling Angular that for every element in main.items repeat that particular HTML element and its children and create a reference to that object and call it item. You will notice that the HTML template below is almost identical to the HTML above with the exception that we are no longer referring to an item on the MainCtrl via main.item but instead to a local variable named item.
{% highlight html %}
{% endhighlight %}
This is really exciting because we have now introduced a way to make a very dynamic layout with a very small amount of code. How would you use this technique to layout the items collection in a table? Could you create a sheet of thumbnails using this? Check out the exercise below and give the bonus technique a spin for something really awesome.
[button link="http://plnkr.co/edit/62gVzC" size="large" window="yes"]03 ngRepeat[/button]
We have seen how to bind to properties in our controller but what happens when we want to capture a user interaction and execute some JavaScript based on that action? Angular comes with a handful of really useful HTML attributes to capture these interactions; the easiest and most useful one by far is ngClick. This allows us to capture a click event from the user and execute some expression. Occasionally, depending on the designer I am working with, I will stub out the JavaScript functions; but I have found that most everyone can replicate a simple setter function like setCurrentItem once they have seen it a few times.
[js]
angular.module('ngDesigners', [])
.controller('MainCtrl', function() {
this.setCurrentItem = function(item){
this.currentItem = item;
};
this.items = [
{
name: 'First Item',
description: 'Some description'
},
{
name: 'Second Item',
description: 'Some description'
},
{
name: 'Third Item',
description: 'Some description'
}
];
});
[/js]
The setCurrentItem method takes an item parameter and assigns it to the currentItem property. We can display the currentItem in our HTML using the template below.
{% highlight html %}
{{main.currentItem.name}}
{{main.currentItem.description}}
{% endhighlight %}
And we can display all of the items in main.items using ngRepeat as seen in the code below.
{% highlight html %}
{% endhighlight %}
So how do we capture a click from the user in our list of items and set that as the current item? We accomplish that by adding ng-click="main.setCurrentItem(item)" to the same element that we declared ngRepeat on.
{% highlight html %}
{% endhighlight %}
Angular does a really good job of keeping tracking of context; so when main.setCurrent(item) is called, Angular knows that item is referencing the actual item that was clicked.
The cousin to ngClick is ngSubmit which you can attach to a form and captures onsubmit events. You can read about it here https://docs.angularjs.org/api/ng/directive/ngSubmit
[button link="http://plnkr.co/edit/yD5krX" size="large" window="yes"]04 ngClick[/button]
We can further enhance the user experience by toggling elements on the page based on predefined conditions. Angular comes with a handy tool called ngIf that will place an element on the page or remove it depending on if the expression defined in it evaluates to true or false. In the code below, we have an array of items with a visible property that is set to true. We also have a method called toggleVisibility that accepts an item parameter and toggles its visible property.
[js]
angular.module('ngDesigners', [])
.controller('MainCtrl', function() {
this.toggleVisibility = function(item){
item.visible = !item.visible;
};
this.items = [
{
name: 'First Item',
description: 'Some description',
visible: true
},
{
name: 'Second Item',
description: 'Some description',
visible: true
},
{
name: 'Third Item',
description: 'Some description',
visible: true
}
];
});
[/js]
These lessons were designed to stack on each other and we are going to start to see how we can take simple concepts and compose them into interesting things. There is nothing keeping us from using ngRepeat more than once on the same data structure in a page. In our example, we will using ngRepeat to lay out our navigation as well as lay out div elements with additional information. In the code below, we are using ngRepeat to create a button for each item in our items array and then call main.toggleVisibility(item) on click.
{% highlight html %}
{% endhighlight %}
We will also use ngRepeat to create a div element for each item as well.
{% highlight html %}
{% endhighlight %}
And to toggle the visibility of the item based on the current value of item.visibility we just need to add ng-if="item.visible" to our template.
{% highlight html %}
{% endhighlight %}
Check out the bonus at the end of this example for how to dynamically attach a class to an element using ngClass.
[button link="http://plnkr.co/edit/pSDc02" size="large" window="yes"]05 ngIf[/button]
We could stop here and have plenty of ammunition to go and start building interfaces but I want to take it once step further by introducing simple states using ui-router. We can use ui-router to map our URL to specific templates within our application. For instance, if you look at the screenshot below you will see three buttons with a single button given focus and some corresponding content below those buttons. This is pretty exciting because we are starting to see the makings of a simple website or application!
The buttons are pretty straightforward but make special note of where the href attributes are pointing. Routes in Angular are generally are referenced with a hash symbol.
{% highlight html %}
{% endhighlight %}
So how does Angular know where to put the specific content designated for each route? We tell Angular where we want our content to load by defining ui-view on our target element.
Just to be clear, ui-router is very powerful with a lot of really complicated things you can accomplish with it. Those things are outside of the scope and intent of what I am trying to convey here. We are focusing on interpreting the current URL and loading an appropriate template into the page. That's all!
{% highlight html %}
{% endhighlight %}
To use ui-router, we need to include the source file in our HTML and include the submodule in our module definition as you can see in the code below. We also will define our routes within the config block of our application so I have stubbed that out as well. I generally will define at least one route for a designer before I hand it off.
[js]
angular.module('ngDesigners', [
'ui.router'
])
.config(function($stateProvider, $urlRouterProvider) {
});
[/js]
To simplify this a bit, I want to show you a single route on its own to illustrate that, in our case, there isn't much to it. We are defining a state on $stateProvider and calling it home. Within this state, we are saying that we want to activate this state when the url matches /home and we want to load in the home.tmpl.html which we defined via templateUrl. Take a moment and ponder what this could possibly look like if we were defining a route for the About state.
[js]
$stateProvider
.state('home', {
url: "/home",
templateUrl: "home.tmpl.html"
})
[/js]
Probably pretty similar right? In fact, they are almost identical. We can stack our routes as you can see in the code below and I think that it actually reads pretty well. The intent of each route is pretty clear about what it wants to target and the template that it wants to use.
[js]
angular.module('ngDesigners', [
'ui.router'
])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: "/home",
templateUrl: "home.tmpl.html"
})
.state('about', {
url: "/about",
templateUrl: "about.tmpl.html"
})
.state('contact', {
url: "/contact",
templateUrl: "contact.tmpl.html"
});
$urlRouterProvider.otherwise("/home");
});
[/js]
We will add $urlRouterProvider.otherwise("/home"); at the bottom of the config block that will redirect the user back to the home route if a route cannot be matched based on the URL.
[button link="http://plnkr.co/edit/eh4Mkj" size="large" window="yes"]06 Simple States[/button]
My goal is that if you have followed along to this point and done the challenges for each exercise, you will be able to start articulating ways to bring static layouts to life with Angular. On a personal note, I would encourage anyone when learning a new thing to just have fun! Do not be afraid to express yourself and play around. I truly believe that I can approximate most layouts with the techniques that I covered in the six exercises we covered in this post. Let me know what you think in the comments below and let me know if you build anything rad! #highFive
Here are some great resources if you want to learn more Angular.


Sign In
Enter your credentials below.
Email
Password
Forgot Password?
Sign In
Or use one of the following services.
>
>
Need an account?
Sign up today.


Harry Potter, known as "the chosen one", a character created by JK Rowling, was a student of Hogwarts School of Witchcraft and Wizardry.Harry, an orphan, still unaware of the real causes behind his parent's death, lived with his aunt Petunia Dursley's family, where he was more of a burden to then than a loved one, to them. It was until Hagrid's informing Harry that Harry didn't know about his wizardry skills. And then he came to know that Lord Voldemort had killed his parents, in an attempt to kill Harry. Harry began his schooling in Hogwarts , and made some new friends like Hermoine, Ron, etc. But with his school years, he faced Lord Voldemort, in different forms, in different ways. But everytime, Harry defeated Voldemort, who ultimately started the second battle of Hogwarts, after killing Dumbledore. Did Harry win at the end ? What happened after that ?