Ping!

A nifty idea came to me in the shower just a few moments ago, and I felt the need to blog it before going to work.

How would you sell the first telephone?

I mean, you could give a really kickass demo.. but when your first customer takes one home, how is she going to use it? Who is she going to call?

We face a similar problem with Ping. Actually, all software with social networking aspects to it faces this problem. People have come up with pretty crafty solutions.

What's special about social software that runs on the phone? It has direct access to a fully loaded PIM (personal information manager):



So, what I'm thinking, is that as soon as you create an account with Ping on your phone, we immediately cross-reference the phone numbers and email addresses already stored on your phone with those of other Ping users, then show you a list of people you already know that use Ping, and all you to quickly/easily add them to your list of friends (and you could subsequently revisit this functionality if so desired).

Jill probably won't let me actually build this until we've built everything else in the mockups (about halfway there, btw). But nonetheless, I was thinking it'd be cool to have a feature like this by launch time.

Thoughts?

Since we basically code when we want, and don't stick to any particular schedule, milestones are a cause for celebration on our little team of programmer hobbyists.

And today.. we hit a milestone!

The Ping client has finally successfully mated with the Mates server.

Okay, it's a baby step. But it's a special one. Our baby's first step, even.

In other recent news, Mates got a little bit of press in the Michigan Daily back at UofM (liveUGLI.com is another project building on Mates).

I've gotta give major credit to Jeff. He's been a rockstar lately. The dude has spent his entire spring break staying in Ann Arbor spending significant time on getting the Mates server ready for prime time. Rockin'!

Anyhow, I had better get back to coding (15-20 hours is my weekend goal, much of which is being done at my favorite coffee shop in Capitol Hill).

Here is a peep to what Adam and I have been doing this weekend. I translated all of the mockups into code while Adam was working on more web services and some other basic functionality. We also deployed it to a real phone!



Ping home




Ping main menu

There comes a time in the life of every new software project when mockups just don't cut it anymore.

I've observed that this time usually coincides with a period 1-2 presentations before people watching begin to wonder "these pretty mockups are all well and good, but when can I expect to see the real thing?"

For Ping, mockups have been an incredibly useful exercise. They've helped us to design, test, and rework major portions of our user experience (mainly UI + navigational paradigm), and to push additional requirements back into the web service that will power the project -- something much easier to do in Photoshop and Illustrator than Visual Studio!

But enough is enough, and it's time to move from mockups to code, and here's the plan for our next short-term milestone:

- I've begun to model our stack-based navigational paradigm in C# / .NET Compact Framework. When this is complete, we should have a completely navigable Windows Mobile application - though it won't be pretty, or functional.

- Jill is beginning to build .NET Compact Framework forms based on her amazing set of mockups.

- Jeff, from the mates project, is beginning to re-write the mates server proof of concept into production-quality C#/MS SQL code, taking into account a few changes/additions we've requested to the web service.

Ideally, once we've each finished our tasks, we'll have a pretty and functional barebones application, at which point we'll probably do another round of usability testing, and begin to bake in the necessary bells and whistles required to ship a beta.

Now back to living in Visual Studio for me...

Okay I was eating for a long time - but here is the list of changes:

Global changes
- Navigation to next buttons
- Added contextual menus
- Blue for selected item in list
- Arrows on items in list
- If people are offline, pictures are grayed/more transparent and you cannot see their location, call, or text them.
- Instructions are across the top header

Set Location Form:
- What/Where changed to Venue/Area respectively.
- Drop downs will have New Venue and New Area in order to edit fields.

Ping Home
- Different color
- Expanded rows

People around
- Changed to list view
- Shows if friend of friend
- Shows if people are in same place by outline of picture

Person level
- Changed status to tagline (only shows a message, not online status)
- Displays pictures of friends of friend
- Displays if friend of friend
- Cleaned up visual treatment

Friends
- Added distance

Bookmarks
- Added distance

Well, the initial set of Ping mockups are about 70% done, and Jill and I have just completed preparing a paper usability test for my housemate, David.

Jill is going to administer the usability test (she does this for a living), and has asked that I sit silently and take notes on our findings. I agreed, under the condition that I could take the notes in a Blogger form and post them for all.

So, here goes...

Jill's introduction to David:

What we're gonna be testing today is a very early stage of our prototype. This is basically to confirm our concept, and also just to see if some basic functionality is somewhat usable.

We're going to be doing paper prototypes. So what I'd like you to do is use the pen as a mouse. So click on things, and I'll be the computer and give you what you should see next.

The general idea is while you're completing tasks, it'd be really great if you could think aloud so we could know what's going through your mind and know if you're on the same track as what we had imagined.

Everything is not fully implemented, obviously, it's paper. So, you'll definitely encounter some areas that do not work, that I will not have a screenshot for. So, I'll let you know if that happens. I'll just ask you what you expect.

Try to treat this as if it were an actual cell phone (this is a cell phone application). Imagine that all the controls work, and try to treat it like you normally would.

What's your age? 30.
What's your occupation? I sleep all day.
Who's your employer? The University [of Washington].
How often do you use your mobile phone? Like seven times a day.
Do you text message? Not really [might not be the best target user].
Have you ever installed an application to your cell phone? Do video games count? Then Yes.
Are you familiar with any social networking web sites? I have this dodgeball thing that I never use. And Friendster, MySpace, Facebook. I have an orkut account too, if you care.

So imagine a friend told you about this application called Ping. You know it's for your cell phone, but you don't know that much about it. You know it has to do with social networking.

So you went to the Ping web site and also read that Ping is an application that lets you read about and experience people who are around you. It is aware of your location, and therefor the people around you, and you can read their profiles and do a couple other things which you'll see in awhile. I think that's good enough, let's begin.

Now, moving from transcribing Jill's introduction to notes on the actual usability test results:

1. Start screen (fter installing and launching Ping)

Clicked Sign Up.

2. Sign Up screen

Entered username, password (twice), email, phone.

3. Location Selection screen

Confusion about "What" question on the "Where" screen. Suggested maybe "Where" and "City" instead of "What" and "Where".

Expands combo box.

Not sure how to enter a new location not in the list. Expects a "..." (or other) item, as opposed to replacing combobox items with his own text.

With guidance from Jill, typed in "Necto" (in "Ann Arbor, MI").

Clicked Next.

4. Location Confirmation screen

Clicked on the enter button to select the correct location corresponding to "Necto".

Suggested better (bigger) directions that indicated how to select ("press enter").

5. Ping Home screen

Hit Enter to select the menu item to browse nearby people (default selected).

6. People Nearby screen

Selects Adam (presses enter to select the default selected person)

Confused because only 2 have photos -- should fix mockup so all have photos.

Unsure why Adam and Jill have a blue background. Might just disregard that information at first.

7. Adam's Profile screen

"Oh, Adam's at Neighbor's. He's always at Neighbors."
"Whatever David, I've been there 3 times."

Thinks this screen looks good.

David is someone who usually checks all possible options. So he'd probably hit the menu button next.

David unclicks the menu, then wants to click on my picture to attempt to make it bigger (full screen).

Would click left/right buttons. Expects to see other people in the area.

Asks: What is considered next to me? What is the radius?

8. Jill's Profile screen

"Wow, Jill's always at Neighbor's with Adam."

I probably would log off now. Because now I know Adam and Jill are at Neighbors. So maybe I'd go there, or maybe I wouldn't.

Jill asks: Would you communicate with them? David responds, I probably wouldn't, because I haven't decided yet.

Jill asks: Suppose you went to Neighbors, and hung out there, and you want to add Adam as a friend.

David asks: What does adding him as a friend do for me?

Jill responds: Let's say you're curious about adding a friend.

David responds: I don't think I'd bother exploring that option if I didn't know.

David presses Back button, expecting to get to People Nearby page. In actuality, gets back to Adam's profile. Back Again -> People Nearby. Back Again -> Home Screen.

9. Home Screen

David notices there's a Friends thing. Makes it seem like he could keep track of friends or bookmarks. Assumes Bookmark is someone he's stalking. Friend is someone he knows is connected. Like Friendster.

To add Adam as a friend, goes back to People Around, selects Adam, selects menu, selects Add friend.

10. Add Friend Screen

Hits okay to add Adam as friend.

Jill: What do you think the notify option would do?
David: If... Hmm... [pause]... It could either mean if we're both logged on, then it would notify me that we're both logged on near each other. But the other idea would be if both of us are not logged on and happen to walk by each other. Yeah. But then that makes me think that Ping will know where I am at all times, even when I'm not logged on. So I'd be like woah, where's the privacy notice that I'm supposed to read for this part.

David expects to see a screen that confirms Adam has been added as your friend.

11. Friends Screen

David: "These are my friends!"

Jill: "What do you think about this page?"

David: "So, it tells me where all my friends are currently. I would hit the menu button."

David expects some choices to help explain what this page does.

David: "So when I add you as a friend, I would still have to wait for you to accept me, right? I would wait longingly for Adam to accept me as a friend."

David: "So if I bookmark, it would also say where my bookmark people are?"

Adam: "Why do you ask?"

David: "Then it seems like bookmark and friends do the same thing. I would know where people are, even if they weren't my friends. It'd seem like friends would be just an extra step that would have no extra features? Or are there extra features?"

Jill: "Suppose you wanted to put in a profile of your own, how would you do that?"

David hits back button and is returned to Home Screen.

12. Home Screen

David scrolls down and selects "My Profile".

David expects to find a page where he would enter his picture, and some fields for him to fill in.

David: "Where would I get my picture from?"

Adam: "Where would you want to get your picture from?"

David: "My laptop?"

Adam: "Would you take a picture with your phone and use that?"

David: "Yeah, I guess I'd be willing, assuming my phone had a camera."

Jill: "So you said you went to Neighbors. What do you think the implications are of changing your location to another place?"

David: "Assuming I closed my phone and put it in my pocket and went there, I'd probably forget about it."

Jill: "Would you assume you had to update it?"

David: "Yes, unless it had been explained to me otherwise."

Going back to Adam's profile screen for just a second...

13. Adam's profile screen

Jill: "What do you think about the friends list area?"

David: "I think it lists other people Adam has added as friends, and I could click on them to see their profile I guess. Oh, I just noticed, what is this status Ping Me mean? Is that something you can turn on and off? Or does that just mean that the person is near me?"

Jill: "What do you think it should mean?"

David: "If it just means he's near me, I already know that, so it doesn't give me any more information. But if it's the other thing, it means Adam's open to meeting people right now, and he could turn it off when he's feeling more private or something."

Jill: "What are your overall impressions of Ping?"

David: "I LOVE IT! Uhh.. I think it's an interesting idea that I probably wouldn't use as much because I don't do text messaging and those kind of things, or meet random people on MySpace."

Jill: "How would you describe Ping to a friend?"

David: "It's like Friendster on the phone... and instead of finding people who are closely connected to you, you find people who are close to you physically."

Jill: "Do you think that's of value?"

David: "Yes. Can I tell you what I would primarily use it for? If I was standing outside 2 bars right next to each other, I could see which one has hotter people in it before I pay the cover charge and go into the one without the hot people."

Jill: "Well thank you David. We'll buy you drinks sometime."


Well, that's the end of our first usability test. This was a really cool experience! Jill says on a scale of 1-5, 5 being most useful, this was a 4.5 because she thinks David illustrated some of our goals that weren't being met. She's not sure if our value prop was communicated effectively... "Oh, it's just another Friendster", when we do have a couple of additional pieces of information that we should illustrate more clearly.

We'll post mockups soon. Stay tuned. :-)

Here is an old mockup. I would have posted the new and better one...but it is gone. Don't ask .... just enjoy this one :)




- Jill

I wonder if anyone has ever spec'd a piece of software using Blogger.

In this post, I'll take a first stab at web service interfaces that will broker communication between the Ping server and client. I'll probably spend a few 1-2 hour sessions hacking this together over the next couple of weeks. It's gonna be thin at first, and written in pseudospec as I brainstorm.

Here goes... first, a few complex types:

Name: UserProfile
Members: FirstName (string), LastName (string), EmailAddress (string), PhoneNumber (string), DateOfBirth (string), Gender (string), InterestedIn (string), Occupation (string), Company (string), Hometown (string), AboutMe (string), PictureData (binary), TagLine (string)

Name: MACAddrList
Members: [Array of] MacAddr

Name: Locations
Members: [Array of] LocationID (int), LocationName (string), LocationAddress (string), LocationCity (string), LocationState (string), Latitude (float), Longitude (float), Distance (float), Direction (float)

Name: Contacts
Members: [Array of] UserID (int), UserProfile (UserProfile), Distance (float), Direction (float), ContactType (string: "friend", "bookmark", or "friendrequest")

Name: GetUserProfileFriends
Members: [Array of] UserID (int), UserProfile (UserProfile), IsOnline (int)

Now, on to the web service functions:

Name: SignInUser
Inputs: EmailAddress (string, required), Password (string, required)
Output: SessionID (string)
Errors: TBD
Description: Signs a user in, returning a new session id.

Name: SignOutUser
Input: SessionID (string, required)
Output: None
Errors: TBD
Description: Signs a user out.

Name: RegisterUser
Input: UserProfile (UserProfile, required)
Output: None
Errors: TBD
Description: Registers a new user. The EmailAddress, Password, FirstName, and LastName members of the UserProfile are required (a constraint enforced by the RegisterUser() function, not the WSDL).

Name: UpdateUserPassword
Input: SessionID (string, required), CurrentPassword (string, required), NewPassword (string, required)
Output: None
Errors: TBD
Description: Updates a user's password.

Name: UpdateUserProfile
Input: SessionID (string, required), UserProfile (UserProfile, required)
Output: None
Errors: TBD
Description: Updates a user's profile. If members of UserProfile are empty, those elements in the user's profile are not replaced.

Name: SetUserLocation
Input: SessionID (string, required), LocationID (int, required), Latitude (float, optional), Longitude (float, optional), SeenMACAddrs (MACAddrList, optional), CellTowerID (string, optional)
Output: None
Errors: TBD
Description: Updates a user's location. Latitude, Longitude, SeenMACAddrs, and CellTowerID can optionally be provided and are stored for statistical analysis along with the requestor's IP to power GetNearbyLocations.

Name: RegisterLocation
Input: SessionID (string, required), Latitude (float, optional), Longitude (float, optional), LocationName (string, required), LocationAddress (string, optional), LocationCity (string, optional), LocationState (string, optional)
Output: LocationID
Errors: TBD
Description: Registers a new location. One of either the Lat+Long or the Address+City+State must be provided. This constraint is enforced by the RegisterLocation() function, and not by the WSDL. If only an address is provided, the server performs an address->lat/long lookup and stores the results if successful, otherwise an error is returned. Additionally, there should be some out-of-band way to complete location entries with lat/long coords but no addresses.

Name: GetNearbyLocations
Input: SessionID (string, required), Latitude (float, optional), Longitude (float, optional), StreetAddress (string, optional), SeenMACAddrs (MACAddrList, optional) CellTowerID (string, optional)
Output: Locations (Locations)
Errors: TBD
Description: Retrieves a list of nearby locations based on lat/long, a physical street address, a list of MAC addresses of nearby WiFi APs, a cell phone tower ID, and/or the requestor's IP address.

Name: AddOrUpdateContact
Input: SessionID (string, required), ContactUserID (int, optional), ContactEmailAddress (int, optional), ContactType (string, required), NearbyNotifySet (int, required)
Output: None
Errors: TBD
Description: Adds or updates a contact of type "friend' or "bookmark" to a user. One of ContactUserID or ContactEmailAddress must be provided. This constraint is enforced by the AddOrUpdateContact() function and not the WSDL.

Name: DelContact
Input: SessionID (string, required), ContactUserID (int, required), ContactType (int, required)
Output: None
Errors: TBD
Description: Deletes a contact of type "friend" or "bookmark" from a user.

Name: GetContacts
Input: SessionID (string, required), ContactType (string, required)
Output: Contacts (Contacts)
Errors: TBD
Description: Retrieves a user's list of friends, bookmarks, and/or friend requests pending approval. ContactType can be "friend", "bookmark", or "all".

Name: GetUserProfile
Input: SessionID (string, required), UserID (int, required)
Output: UserProfile (UserProfile), LocationName (string), Distance (float), Direction (float), IsOnline (int), GetUserProfileFriends (GetUserProfileFriends)
Errors: TBD
Description: Retrieves a user's profile.

Name: Refresh
Input: SessionID (string, required)
Output: TBD
Errors: TBD
Description: Retrieves queue of state changes that affect the user.

Additional comments:

The key missing piece of information here are complex type definitions (especially around what Refresh() returns). We'll hash these out in the upcoming WSDL file. Most will be similar to the information returned by the mates server (see: mates WSDL). Some additions will need to be made per the Ping mockups. For example, Refresh() will need to include age, gender, and f-o-f information when returning lists of nearby users. [12/18/2005]

Decisions:

- We won't worry about allowing users to anonymously send messages through Ping without revealing their phone numbers. We'll stay focused on our core functionality and rely on the smartphone's SMS, IM, and phone capabilities for communications (for now).

- We won't build out features around pictures (photo album/multiple pictures), locations (driving directions to/from locations), and other functionality that is not new, core functionality in v1.

Hello I'm Jill and I would like to introduce myself. I am a recent grad from University of Michigan where I recieved my BSE in Computer Science with a focus (as much as I could in undergrad) in Human Computer Interaction . I also concentrated in painting - giving me a strong sense of composition, color, and visual balance. I really believe that usability and design/aesthetics go hand in hand.

I now work for a small Seattle usability firm where I am a usability engineer/ui designer. My goal is to make things usable, aesthetic, AND useful. Having worked with a lot of bad designs first hand, I want to incorporate a strong user centered design approach to this project with a lot of quick and dirty user testing.

I was inspired at the CHI 2005 conference by Michel Waisvisz (crackle.org) who is a pioneer in electronic music . He created an instrument that allowed him to record and then sample sounds that were around him by movement - mixing it in real time. This was using technology to experience the physical world differently. This is the way I envision technology moving. I was completely sold on this idea when I saw Hiroshi Ishii's I/O brush (http://web.media.mit.edu/~kimiko/iobrush/ you have to check out the video - amazing). This is what I am hoping to get out of Ping! . It's having an extra sense that lets you experience the world differently. A social sense. So you can go out there and even meet new people in Seattle!