andersr

##Some ways to iteratively reduce your code distance:

• pair with developers
• learn to write pseudo code
• integrate live style guides into your practice
• try designing and implementing a very small, very simple app (better yet, pair w someone doing it.)

andersr

##The client's description of the problem

>A major challenge for us is adding new employees to our HR system, which is connected payroll, benefits, email, and many other internal system. Currently, this is a manaul process, involving the security staff, IT, and HR personnel. It’s very time-consuming and it leads to delays in new employees having access to internal tools. The main goal of the tool is to provide new employees with an Employee ID. After that, we need to use that ID to give them access based on their department, role, and level of seniority. For example, a VP of Engineering will get all kinds of admin-level access to a range of internal systems, while, say, a product manager, would likely only get access to email, the intranet, and a few other services. In order to provide the ID, we have to confirm their identity. This can be done using either the last four of their SSN, valid driver’s license number, or a valid passport number. We use an external service to confirm that this number match

andersr

##Code Distance Activity

1. Grab a stickie.
2. Write on your stickie what you see as your code distance.
3. Place your stickie where you see yourself in relationship to actual code/working software.
4. Let's hear some of your stories...

andersr

##What's Your Code Distance?

• How removed you are (or not) from the production code in a project you currently are working on, OR...
• Your general level of coding experience (eg "I know some HTML/CSS", "I use jquery for prototyping", "I work closely w devs but have no code experience.")
• Other "distances" are also important, eg: Content Distance User Distance, Market Distance, Community Distance, but today we're focusing on code distance.

andersr

##Goals

• Uncover some costs for UX designers of not understanding how developers work, think, etc.
• Provide some insights, tools, practices that might better enable UX designers to collaborate more effectively with developers.

##Links

• What's Your Code Distance?
• Code Distance Activity
• Alien Sandwich Activity
• My Alien Sandwich PseudoCode
• Pseudo Code Basics

andersr

describe "Cut two slices of bread and place on the plate" do

  it "grasps the Knife in a cutting grasp" do {
      #code that attempts to complete this task
      #if it passes, it returns something to hte effect of "test passed"
      #if it fails, it returns a message like "grasps the Knife in a cutting grasp" failed, for the following reasons, eg no 'No Knife was found'
    }

  # Grasp the bread-loaf and place it on the table, such that it is directly below the knife.
  # Position the bread-loaf such that it is perpendicular to the cutting edge of the knife and move the bread-loaf laterally until only a half inch is below the knife.

andersr

#Explain to an Alien How to Make a Peanut Butter and Jelly Sandwich

• An alien is positioned in front of a table.
• On the table is a plate, a knife, a jar of jelly, a jar of peanut butter, and a loaf of bread.
• The alien can read and recognize English and English grammar, but may not understand what specific words mean.

##Your assignment

• Pair up
• Together, create a list of instructions for making a peanut butter and jelly sandwich.

andersr

#Alien Sandwich A numbered list of instructions for explaining to an alien how to make a peanut butter and jelly sandwich

###Collect and define items needed to make a Peanut Butter and Jelly Sandwich.

• "PBJ-sandwich" = Peanut Butter and Jelly Sandwich (the thing we will be making)
• "pb-jar" = the cylindrical object in front of you containing a brown substance
• "jelly-jar" = the cylindrical object in front of you containing a red substance
• "plate" = the flat white object in front of you
• "bread-loaf" = the brown, rectangle-shaped thing in front of you that is soft to the touch
• "knife" = the narrow, silver-colored thing in front you with one side that is sharp to the touch. The side that is not sharp is the side you grasp. The knife can be used for two purposes: cutting and spreading. When used for cutting, grasp the knife and face the sharp part downward. When used for spreading, grasp the knife and and turn the knife so that the sharp part is horizontal.

andersr

#Pseudocode Example: A Signup Form ##Entities

• Email field: input type = email, placeholder: “your@email.com”
• Password field: input type = password, placeholder: “Password”
• Password confirmation field: input type = password, placeholder: “Password again”
• Signup submit: value: “Sign Up”, default state, disabled

##Signup Flow/Logic

###On leave focus of email field

andersr

##Alien Sandwich A numbered list of instructions for making a peanut butter and jelly sandwich.

1. Hello Alien!
2. IF you have a left and a right arm AND IF you have something at the end of each arm that can grasp objects AND IF you are able to visually distinguish between different object shapes and colors, continue to the next step, ELSE stop here. No PBJ sandwich for you, sorry!
3. Henceforth, your Left Hand will be referred to as "LH" and your Right Arm will be referred to as "RH"
4. Next, we will collect and label all the objects on the table.
5. Reach out and grasp an object on the table.
6. IF the object is round and flat, this object is a "Plate" ELSE IF the object is soft to the touch, this object is "Bread Loaf" ELSE IF the object is narrow with one side that is sharp to the touch, this object is a "Knife" ELSE IF the object is hard, has a cylindrical shape and you can see a brown substance inside, this is a "Peanut Butter Jar" ELSE the object is a "Jelly Jar"
7. Set down the object in an empty s