A New Metro / Projects / A Project-oriented Approach to Content on Post-PC Systems

8112959757_5f42e81074_medium

While previous entries in the series(A New Metro: Bing & A New Metro: Notifications) attempted to improve current functionalities in Metro with existing user experience paradigms, this entry and the three to follow are more drastic rethinking of what Metro could offer. They might be more out there, but I hope they will be interesting to read and continue to generate thoughtful discussions.

Before I begin, I'd like to thank—if my memory serves me right—the cast of a TIMN podcast episode(most likely Nilay) for bringing up a project-based approach to LiveTile, which got me started on many of the ideas you're about to read. I'd also like to thank you for reading my ESL English!

Many have said that the lack of a full-fledged file system and the resulted limitations placed on workflows remain the major obstacles that have thus far prevented post-PC devices from replacing PCs as our "daily drivers." How poorly content is collected, organized and used on today's devices underlies this argument.

With this entry on the Projects Tile(and the Projects Hub), I will use iOS as an example from time to time to show how today's devices work with content, and the various shortcomings and missed opportunities with this approach. Then I'll share how I think Metro could do better by embracing purely digital not just in its look but also in its workflow, and take a step toward a seamless content experience as the user navigates from one app to another, from one device to another, and from one context to another.

Here's the scenario I'll be using in this entry. I hope it is simple and relatable so that you can follow along easily.

Let's say I have a new proposal I'd like to discuss with my supervisor and I plan to talk it over with her during lunch one day. The following are the key tasks that are involved:

  1. Creating a calendar appointment
  2. Finding a restaurant
  3. Making a reservation
  4. Purchasing a coupon
  5. Drafting the proposal
  6. Discussing the proposal at lunch

Out of these tasks, pieces of content are created: a calendar event, a discount coupon, or a document, and etc.

8113105798_9a36191602_b_medium 8113096483_f78e8d3f5f_b_medium 8113096343_5116351ab6_b_medium

All of these pieces of content contain contextual information-the primary contexts intrinsic to the content(event time, coupon terms, proposal text, etc.) and secondary contexts that are extrinsic metadata(where the event details are entered, time of coupon purchase, when proposal was last edited, etc.). All these contexts are key to understanding and utilize user intentions.

8113096147_43526fa4cd_medium

Yet today, all this contextual information is stored in proprietary manners-often in application-specific syntaxes and sandboxes(see images below).

8113130667_8727468d32_b_medium 8113130583_c56c531c5d_b_medium

As a result, contexts shared by pieces of content fail to stay in sync when they are updated or amended, causing duplicate contexts to be created and stored all over the place, making it highly likely for shared contexts to become dated, inaccurate, and what not.

It's also hard for the operating system and other apps to access, understand and utilize contexts users continuously establish. iOS 6‘s Passbook offers a cool glimpse of what could be if the OS and apps share access to contexts, but it is limited because Passbook requires the explicit ‘handshake' between the OS, the user, and the app.

Let's see what the beginning of our scenario looks like on iOS.

8113155865_bfa9a87707_b_medium 8113165866_e8449b0d66_b_medium

On the left, we see the Calendar "Add Event" view. On the right we see the Yelp "Search" view.

As I create the event in Calendar, in addition to event title, I enter event time, event invitees, calendar type, availability-all of which are contextual information for "Proposal discussion."

However, when I use Yelp to search for an appropriate restaurant for the event, to formulate my search query, I quite pathetically defer to the stereotype that my supervisor Samantha Wang is Asian and would probably like Japanese food, ignoring all other contexts associated with the event.

How would Metro do better? Ask the user to memorize all the event contexts and enter them into a Yelp search interface with as many fields? Obviously not. Read on.

Introducing Project

8113183608_b8fb54fdfd_b_medium

What is a Project? With the new Metro, It will be the building block to our everyday lives. It's the place where all we do on our devices and the content we create in the process are contextualized.

Creating a new Project is very similar to creating a calendar event; in fact, the Projects Hub replaces Calendar in the new Metro.

Like I would in a Calendar application, I enter in details about "Proposal discussion" into the "New Project" view and hit "save."

What this does is that it creates a Project whose contexts are readable and writable by Metro and other apps.

What good does this do? First up, a much more powerful search that makes searching contextually much easier.

Contextual Search: Introduction

8113196492_c59fcd6c45_b_medium

Once I'm done creating the new Project. I launch Yelp to look for a restaurant for the occasion. As you can see in the mockup to the right, after I activate contextual search by tapping on the 'C' on the right side of the search field, Yelp ‘consults' with Metro and presents contextual query recommendations in the drop down.

Before I go into what happens when I hit "Proposal discussion," I want to briefly touch on what aspects of Metro that Yelp "consults" to generate the second and the third query recommendations.

I find that it makes a lot of sense for Microsoft-with Bing as a licensee of a plethora of common and anonymous contexts such as weather and neighborhood information-to include a set of Metro APIs that allows third-party developers-particularly the smaller ones that don't have much capital-to access these data. By doing this, Microsoft would not only significantly lower the cost for third-party developers to introduce innovative contextual features but also make sure that security and efficiency of the Metro platform maintains high standards as computing undoubtedly becomes more contextual over time.

The next paragraph is a detailed explanation of what the second and third query recommendations are. If you already got the idea, feel free to skip it.

Second recommendation: Yelp observes that it's dinner time and that the temperature is dropping to 55 degrees by 9PM where the user is so it contextualizes all this information from Yelp's perspective and recommends a query for warm and hearty dinner. Third recommendation: Yelp observes that I am currently in a predominantly ethnically Caribbean neighborhood and prompts me to search for Caribbean restaurants.

Next I'll discuss what happens when I conduct a Yelp search with the Proposal discussion Project.

Contextual Search: Results

8113206814_287a67dcf2_b_medium

Let's take a look at the results Yelp presents for Proposal discussion.

Please don't mind the redesigned layout of the UI if you notice that it's different from the real Yelp Windows Phone app; I took some liberties to create a layout that makes sense for the functionalities presented here.

The results are divided into two parts-Best and More. The best result as determined by Yelp after assessing all contextual information contained in the Proposal discussion Project is given prominent positioning at the top. There are two key evaluations that helped Yelp reach its conclusion:

  1. My supervisor Samantha likes yakitori(a Japanese BBQ of some sort).
  2. Yakitori Totto restaurant receives great lunch reviews.

Yelp looks up the "Samantha Wang" it reads from the Proposal discussion Project in my Yelp friend list and sees that Samantha likes yakitori. Yelp gave this evaluation(an invitee's preference) a higher rank value because the Project is an apparent work function.

By looking at when the Project will take place, Yelp learns that I am looking for a restaurant for lunch. It then look for positive references to lunch in Yakitori Totto's reviews. It then concludes that it is great for lunch. What I described here obviously shows the opportunities for future versions of Yelp to allow users to write more specific reviews in easy ways. But that's an issue that could be similarly tackled with the Projects approach so I won't go into details on that today.

The More results at the bottom is just what you think it is: remaining items ordered by rank. You swipe left to reveal the next set of results.

Next we'll take a look at what happens once I tap on the top recommendation, Yakitori Totto.

Contextual Search: Restaurant Detail

8112967944_2036933221_b_medium

Once I tap and am brought to the restaurant details page for Yakitori Totto, a notification drops down(and pushes down the entire pivot view). The notification reads "Send to Proposal discussion." If I tap on the notification, the text will briefly change to "Sent to Proposal discussion" before being dismissed and pushed back up(along with the entire page). The restaurant information would then be appended to the Proposal discussion Project.

That was if I decided to have lunch with Samantha at Yakitori Totto and was ready to 'put it on record'. However, as we all know, decisions aren't always so straightforward. In our scenario, I am to make certain that a table is available during Proposal discussion before committing to the restaurant.

On today's devices, I would have to memorize "Yakitori Totto" and the day, time, and party size of the Project before I launch OpenTable's app to see if a table is available. And if there's no table available for Yakitori Totto for Proposal discussion, I would have to go back into Yelp, hoping that the search results are preserved, and repeat the process with another restaurant. That sounds like a whole lot of trouble. How could Metro do better? What if we could contextually pass items from one search to another?

Contextual Search: Maintaining Project Contexts across Searches

Let's start by hitting the back button once to return to our Yelp search results for Proposal discussion. Once I activate "Select" mode from the App Bar, empty checkboxes appear next to each restaurant item. I then check the empty boxes next to the restaurants I want to use the "Search With" functionality with. Then I hit the "Search With" button in the App Bar. I'm then taken to the next view where I see the items I selected listed on top and a few applications I can perform Search With with.

8112968054_9de831c612_b_medium 8112959119_7cf290558e_b_medium

Keep in mind that because Metro is able to detect that I'm still in the same workflow and am likely to still be working with respect to the same Project, it not only passes the Unique Merchant IDs(something like the ISBN-if became ubiquitous could really drive innovation in contextual commerce) of the selected items from Yelp to whatever application or service I choose to search with next, but it also passes along the reference to the Proposal discussion Project. The benefit is so that if I choose to use OpenTable to search next, OpenTable would also know when and what party size I need the reservation for by tracing back to the Proposal discussion Project.

With that said, let's see what happens after I tap on OpenTable.

Contextual Search: Maintaining App Contexts across Searches

8112960209_ed119e8017_b_medium 8112960269_8777299d3e_b_medium

I'm shown by OpenTable which restaurants have tables available for Proposal discussion. If I'd like, I could tap on the link to Proposal discussion here to see the details of Project discussion. Since Yakitori Totto, the top recommendation by Yelp has tables available for Proposal discussion, I'm going to go ahead and tap on it.

Once I'm taken to the confirm reservation view, I can review the details of the reservation before I tap on the grey button below to confirm it. Once I tap it, it reads "Reservation Confirmed," and a familiar toast notification drops down in the same behavior as described before. Once I tap on the notification, my OpenTable reservation AS WELL AS the Yelp restaurant details will be sent to Proposal discussion because even if I hadn't tapped on "Send to Proposal discussion" in the restaurant details view, Metro keeps track and is aware of the app context that led me to this point.

What's next? I need to see if a Groupon is available for Proposal discussion. Like before, I brought up the App Bar to reveal the Search With button. A menu pops up like before for me to choose the app or service I want to proceed with the search. I choose Groupon this time.

Contextual Search: Eliminating Redundancy in Search

8112971350_3732be74e3_b_medium

I would imagine that the search result shows up fairly quickly as Groupon is only checking if one restaurant, Yakitori Totto has a Groupon available for Proposal discussion. Because Groupon knows that this would be for use during lunch, it would also filter out deals that have lunch restrictions.

It turns out that there is a Groupon available for Proposal disccusion. I make the purchase by tapping on the black button below. After I do that, the button now reads "Groupon Purchased." Again, a toast notification drops down so I could send the Groupon to Proposal discussion. I tap on it and the notification is dismissed while the Groupon is sent to the Project.

Through this example of contextual search, you see the number of items in search decreases over time. Search could use limited bandwidth more meaningfully if it's contextual.

Collecting and Creating Content

Everyone who wasn't living under a rock around the time the iPad was introduced saw a series of concept videos by Microsoft depicting a promising product-of which development has since been killed. Yes, I'm talking about the infamous Microsoft Courier. What was most impressive about it in my opinion was not its two screen form factor but the vision it offered of a way to collect, organize and use content that was simple and intuitive-built around the idea of a project.


The vision offered by Courier has since been forgotten and it seems no platform of the day is making an effort to bring it back from the dead. How the collection and gathering of content for anything else but the simple sharing over social networks done on today's devices has been embarrassingly bad. As I go about using my devices, I keep saving photos I come across to the camera roll, which over time becomes so large and unmanageable and eventually useless. When I'm writing a long academic paper on my device, I don't want an "image picker" that shows me all two thousand pictures of mine sorted by time. I want to only pick from images I've designated for use on this particular paper.

How Metro could do better is by bringing context to both the collection and creation of content in the post-PC workflow. Let's talk about collection first.

The effect of the lack of a full-fledge user-facing file system on today's post-PC platforms is most strongly felt in how hard it is to to collect pieces of content and use them the way one would on a PC platform by manipulating file names and folders.

Without file names and folders, we're forced to do with a clipboard, which only allows the copying and pasting of one single file or selection of files; it forces us to paste the selected piece(s) of content into place before we copy the next one or batch of content. The discovery process is so often disrupted by the need to "unload" content. This is one of the reasons why true productivity is hard on today's post-PC devices.

On the PC, folders are the semantics for contexts. More often than not, we organize content on PCs with folders named after various projects. It's also conceivable that some users create sub-folders in their project folders to help further define the content context.

How could Metro adapt and reinvent these functionalities for a post-PC, contextual computing environment? Projects!

Project as Folder Replacement

8112970882_70bf6dcf3c_b_medium 8112962501_98497a08cb_b_medium

Here we look at how one could send a piece of content to a Project. Back to our scenario, I'm now in the process of collecting content for the proposal that I will present my supervisor. Let's say I come across on the ThisIsTheVerge Tumblr blog an image that I would like to use in the proposal document, I tap-and-hold on the image. The image floats and grows slightly in size while the content underneath fades transparent with a white overlay; at the same time, a contextual menu shows "Send to Project..."

8112971026_4953c6063f_b_medium

Once I tap on "Send to Project," I'm taken to the "Send to Project" view where I will either associate the image with an existing Project or a newly created Project. In my case, as all this content is meant to be used in the actual proposal document(as oppose to Proposal discussion), I'm going to associate this image with a newly created Project called "Proposal for Samantha."

As to why I didn't just associate the image with the Proposal discussion Project? It's because I know in advance that I would want to keep the proposal document independent of the discussion Project-making it a Related Project of the Proposal discussion Project, which I will explain in more details soon.

While I used an image as an example here, the same "Send to Project..." shows up in contextual menus for texts, videos, contacts, files and etc. Now that we have an idea about how the collection and organization of content work, let's see how we create new content and use the content we have collected.

Project as a Contextual Folder

8112968108_1c5361ba9d_b_medium 8112968154_99a4c645ce_b_medium

Now I'm to compose the actual proposal document for use during Proposal discussion. I launch the Office Hub and tap on New Word Document. I'm again presented with the view that asks me to associate the newly created document with existing Projects or a newly created one. In this case, I am going to just choose "Proposal for Samantha" which is shown just below the "search for existing projects" search box because it is recently active. Next I'm taking to the word processor view and I'm ready to start composing the proposal. To start, I'd like to add an image that I had prepared for the document. I bring up the App Bar and tap the '+' button, then a "picker" window comes up.

Contextual Picker

8113341922_3e327c44dc_b_medium 8113330949_7bf3cb9173_b_medium

This is where on today's post-PC devices I would see a image picker that includes all the images I have on my device. In this contextual picker, only the things I have designated for use in the Project is shown. Image picker layout and the default number of images Metro shows at any given time could adapt to the number of images present in the current project.

One other thing that could increase productivity on Metro devices I would like to point out is the need for copy and pasting to go beyond the primary media object, to include the original context of the media object. This is most obviously seen in the texts picker. All quotes in the picker include links to its original source, author and or application. This could be extremely helpful when we are doing serious writings that require a bibliography page or simply when we wish to end up with not just final product but the process and contexts of making the final product.

Back to the Start, Projects Tile, Projects Hub

After some three thousand words, I can finally talk to you about what this entry is all about-the Projects Tile. The Projects Tile launches the Projects Hub. Let me show you what the Projects Tile and Projects Hub look like, using the scenario I have walked you through.

8112959757_5f42e81074_medium

Like I said before, a Project the building block to our everyday lives. It's a place where all we do on our devices and the content we create in the process are contextualized, and that the Projects Hub replaces Calendar in the new Metro.

8112968616_6cb2cf5a64_b_medium

Whenever you enter the Projects Hub, you're immediately greeted with an overview of what you should be doing, what you need to do what you need to do, links to get into doing things. A swipe to the left shows the details of your current Project(s), another swipe to the right reveals Related Projects, another swipe to the right displays Upcoming Projects, one more swipe then you're taken to the Projects Archive page.

The Big Picture Further Down the Road

Automated Management of Both Storage and Computing Resources

Imagine only the content you need for the day is loaded from the cloud automatically each morning to reduce the requirement for physical-onboard storage. Imagine applications are pre-launched for you and datasets downloaded before each project is scheduled to start to reduce wake-up time or general wait time.

Projects-based Sharing(including e-commerce)

Imagine that Project collaborators not only share images, documents, but also applications. When an application necessary for a Project is not present on a client's device, a rental offer that expires when the Project is completed is presented.

Projects-based Search

No more recalling what the file name of a particular piece of content is. Recall the when, where, who, what, why of a particular thing you're looking for.

Projects-based Device and Hardware Optimization

Readying a projector in a conference room you've never been in before your there. Imagine contextualizing a PowerPoint presentation for "one of the meeting rooms in library A" and PowerPoint prepares the PPTX for all projector resolutions and or color profiles. Or perhaps a payment in advance to avoid not having an acceptable payment method in the context of the Project.

Projects-based Multitasking & UI

I have some really interesting ideas on how process of multitasking could be done on devices as well as how UI could adapt to a Project-oriented perspective. I will update this post some time in the future to include some of my designs. For now, picture a task switcher that could dynamically adjust the size and layout of the application icons or preview content based on the amount of time spent in them or the amount of relevance they have to the task at hand...

To Conclude

Thank you for bearing with me until the end. I apologize to those who were expecting this by the time Prometheus came out. Now that Prometheus was released not only in theatres but also on Blu-ray, I have finally finished writing this entry. I have really enjoyed it, but I probably won't be able to start on entry 4 for a while because I need to focus on my school applications. Still, I'd love to read your responses and see what sorts of wild and clever ideas you come up with in regards to Projects. I'll also make sure to respond to whatever questions, concerns or comments you have.

Lastly, I'm not a designer by any stretch of the imagination so I'd also appreciate much if some of you design wizards could help improve or add to what I presented. In particular, I would LOVE to see if anyone could adapt some of these ideas and interpret them on the Windows 8 Metro interface(as oppose to Windows Phone Metro used here).

And please, no fan wars. I'm an Apple fanboy. I Google. I've spent weeks writing a series of articles on Microsoft's platform. And I miss Palm dearly.

Lastly lastly, if I could dedicate a forum post to someone, I'd love to dedicate this to the countless lives that have been and will be bullied. Please stop the bullying around you and stand for those who are bullied!