Just another Clarity Blogs site

PAGES

17

Jan 11

What if Windows Phone F***ed a Slate? – Part 1



This year at the Consumer Electronics Show over 80 new tablet devices were announced.  I was excited to see some different UI explorations with the BlackBerry Playbook and the Android Honeycomb.  However, I was hoping to see some elaboration on what a “tile based” windows 7 tablet OS would look like.

Plenty of people are murmuring about this (including us)…so here at Clarity we jumped the gun a bit and envisioned what a Metro themed tablet would look like.  And I’d like to share some of the thinking we came up with.

Initial Thoughts

After some interweb searching it seemed that most of the screen resolutions were hovering around 1360×768, which is a typical widescreen 16:9 aspect ratio.  Working with such a wide layout I decided to explore the horizontal use case as it seemed to be most natural.

The first thing I tried was dividing the 1360px width by the golden ratio which left me with 520px on the left and 840 on the right.  As I stared at the 520×768 section on the left it occurred to me that the WP7 resolution is roughly the same size (480×800).

After a little hesitation I decided to jam the WP7 Home Screen layout in there.  Which looked something like this…

This doesn’t look as dumb as I thought it would.  Using the live tiles as the main navigation seemed to work fairly well.  With the remainder of space I took a stab at something that would be more useful than the other tablet platforms out there.

One gripe I have about the iPad is that there isn’t a way for me to get “glance-view” information.  I find it cumbersome to have to open every application individually to get the data I want.

From an interaction standpoint, WP7 does a really good job at this.  WP7 takes a lot of information that is normally separated by apps and websites and puts it in one logical place.  This is most obvious example being the “People Hub” which aggregates social activity from your contact list.

With my interaction hat on, I thought it would be clever if the remaining space was dedicated to showing dynamic content.  Panorama controls happen to be really good at bubbling up dynamic content that would otherwise be difficult or cumbersome to find.

With that in mind, it’s not a far stretch to envision how the home screen could bubble up content from your installed applications.  For example, the activity stream from your people hub, trending tweets, or even your latest unread emails or outlook items could end up on your home screen at glance-view.

Cool, I guess…what would it really look like?

Enough putzing around with wireframes, let’s see what a skin would look like.  After spending some time in Photoshop, this is what I came up with.

As I mentioned above,I think the home screen could serve as a brilliant dashboard that aggregates information from your installed applications.  Seeing all this glance view data without actually opening any applications is the type of thing that makes me happy.

Grouping applications….

One thing I really like about  iOS is the ability to group applications.  As the app store / marketplace grows my home screens are becoming pretty bloated.  I think the “people” tile does a great job of visually differentiating itself from the other tiles…so if we borrow that concept and apply it to apps we get something like this.

Assuming we have drag-and-drop functionality to group applications. A simple swipe or tap and hold gesture could expand the group to look like this.

Summary

Just to be clear,this post is just a dump of some brainstorm sessions we’ve had internally and is not meant to be anything more than an envisioning exercise.

In my next post Im going to move away from the OS and give an example of what an application might look like.

I appreciate all feedback and I would love to hear from other folks that have been thinking about this.

Cheers -

Erik Klimczak  | eklimczak@claritycon.com |twitter.com/eklimcz

1 comment , permalink


12

Jan 11

Wicked Wireframes: WP7 Vector UX Kit



I’ve been meaning to make this post for a long time.  But we’ve been so deep in WP7 awesomeness I haven’t had a chance to make it happen.  A lot of people have been asking me what tool(s) I’ve been using for prototyping WP7 apps.  And specifically, what I used to create the CTA Bus Tracker wireframes below.

I’ve been using Adobe Illustrator with some custom WP7 templates (download below) I’ve created to speed up the wireframe portion of our design process.  Unfortunately, Illustrator isn’t the easiest tool in the world to use and it will take some patients to get comfortable with if you haven’t used it before.

There are also plenty of well-done wireframes done in lighter tools like Omnigraffle, Sketchflow and even Keynote.  But if you’re like me (anal-retentive) the crisp lines and extra polish is a must-have and totally worth the extra sweat of Illustrator.

Wait…Why do I need these?

Creating wireframes and application flows is extremely helpful in coming up with a well defined design early on. Unfortunately the only creative assets MS has released for WP7 are Photoshop templates. The Photoshop docs are great, but for sketching out basic ideas I prefer creating wireframes in illustrator.  These templates will save you a ton of time creating the assets that mimic the wp7 toolkit.

One more thing…

It very important to understand what makes the platform you’re designing for unique so you can leverage what it is good at.   When MS debuted WP7 along with it came some new interaction paradigms.  Specifically, the Panorama and Pivot controls which devs and designers can take advantage of to create  applications that are more functional and efficient than the other platforms out there.

What are Panoramas and Pivots good for?

Panos

  • Entice the user to explore.
  • Deliver a curated experience to the user.
  • Fresh, dynamic, compelling content
  • Balance of consistency and surprise

Pivots

  • Efficient for slicing and sorting complicated views
  • Delivers a focused interaction that lets users get to the content quickly and easily.

Try Not to…

  • Place a Pivot in a Pano
  • Place a Pivot inside a Pivot
  • Use a Pivot or Pano to create a wizard flow

Where do I get them?

Right here. The templates were created with Illustrator CS5 but I also included CS4 and CS3 compatible files.

Download Here

Enjoy -

Erik Klimczak  | eklimczak@claritycon.com |twitter.com/eklimcz

1 comment , permalink


28

Jul 10

WP7 Cascade Behavior



Windows Phone 7 is all about clean layouts and beautiful transitions. Unfortunately, we are left to generate many of these tranitions ourselves as WP7 will not ship with these great effects. The listbox shows of several . I put together a simple trigger action that allows you to apply cascading animations to a listbox. Simply create an animation in in a resource dictionary within your item template and reference it from your trigger action. You can write a custom delay generator as well as set the animation interval. Most importantly the animations respect virtualized lists; click on one of the items in the list to invoke the exit animation, once it has completed scroll down, you will see that items that were not in the view port were not animated, this ensures the best performance. In production you would hide the list or transition to a new page so these list items would never be seen. The code has not been fully tested and there are a few more features that would be nice to have but it is a good launching point. Take a look at ItemsControlExtensions for some great extension methods for virtualized items controls.

0 comments , permalink


23

Jul 10

Smooth…Springy…Scrunchy – WP7 List behavior



Anyone that has an iPhone has undoubtedly been delighted when scrolling through lists for the first time. Aside from the kinetic scrolling, the resistance and elasticity characteristics make for a really nice fluid user experience. These effects are partly based on basic physics principles and partly faked by the animation framework of the phone.

If you”re like me, you”ve probably driven yourself mad by pulling, pushing and flicking your phone to death trying figure out how to re-create these effects.

And if the inertia, elasticity, and resistance weren”t enough WP7 has introduced a new subtly that takes the delight one step further. The scrunch effect. (See video below) Not only does the vertical offset of the list change when you scroll past the end of it, the items within the list box also scale in size. This, for lack of a better label, creates a “scrunch” effect…where all the items appear to get squished together as you pull down the list.

Unfortunately, some of these subtleties don”t ship by default with the windows phone controls. So with some help from my college kmarshall we cranked out some of the interactions and packaged them up in a behavior.

Building it.

By default, the lists in the WP7 sdk have inertia built in so we don”t have to worry about that. However, to get the elasticity effect when scrolling past the end of the list we had to do some digging. In general,we transform the list”s Y-axis Position at a third the rate of the manipulation delta. Then on the manipulation completed event we just animate the list back to its original Y position.

clip_image002

Then to recreate the “scrunch” effect we scale each listbox item at a ratio that is proportionate to the cumulative manipulation on the Y-axis. The key to this effect is making sure the RenderTransformFromOrigin of the listbox item is at (.5,1). This will ensure that the item will scale from the bottom and not from the center.

clip_image004

Putting this all together you get this:

DOWNLOAD THE CODE:  HERE

 NOTE: For added fun, kmarshall insisted this behavior work with virtualized lists…so it does.

UPDATE: I know I promised code for my WP7 jump list. Well…we are building the “real deal” for a project, so when I do release the code, it will be close to production quality. It will be worth the wait…trust me.

Cheers,

Erik Klimczak  | eklimczak@claritycon.com | twitter.com/eklimcz

0 comments , permalink


19

Jul 10

WP7 Gesture Recognizer and Behavior / Triggers



Here is a quick gesture recognizer I wrote for the Windows Phone 7.  You can use the gesture recognizer standalone in code and attach to a UI element or you can also use the behavior + trigger.  The behavior attaches the gesture recognizer to a UI element and then you can add triggers for specific gesture events like Tap, DoubleTap, etc.

Here is a copy of the code.

   1:  <Grid x:Name="ContentGrid" Grid.Row="1" Background="#FF1F1f1F" Opacity=".1">
   2:       

   3:          <ci:GestureBehavior EnableDebugMode="True" />

   4:      
   5:      

   6:          <ci:GestureTrigger Gesture="Tap">
   7:              <cmd:EventToCommand Command="{Binding GestureRecognizedCommand}" PassEventArgsToCommand="True" />
   8:  
   9:          <ci:GestureTrigger Gesture="DoubleTap">
  10:              <cmd:EventToCommand Command="{Binding GestureRecognizedCommand}" PassEventArgsToCommand="True" />
  11:  
  12:          <ci:GestureTrigger Gesture="TapAndHold">
  13:              <cmd:EventToCommand Command="{Binding GestureRecognizedCommand}" PassEventArgsToCommand="True" />
  14:  
  15:          <ci:GestureTrigger Gesture="Flick">
  16:              <cmd:EventToCommand Command="{Binding GestureRecognizedCommand}" PassEventArgsToCommand="True" />
  17:  
  18:          <ci:GestureTrigger Gesture="TwoFingerTap">
  19:              <cmd:EventToCommand Command="{Binding GestureRecognizedCommand}" PassEventArgsToCommand="True" />
  20:  
  21:          <ci:GestureTrigger Gesture="Shape">
  22:              <cmd:EventToCommand Command="{Binding GestureRecognizedCommand}" PassEventArgsToCommand="True" />
  23:  
  24:          <ci:GestureTrigger Gesture="PressAndTap">
  25:              <cmd:EventToCommand Command="{Binding GestureRecognizedCommand}" PassEventArgsToCommand="True" />
  26:  
  27:          <ci:GestureTrigger Gesture="TwoFingerDoubleTap">
  28:              <cmd:EventToCommand Command="{Binding GestureRecognizedCommand}" PassEventArgsToCommand="True" />
  29:  
  30:          <ci:GestureTrigger Gesture="TwoFingerTapAndHold">
  31:              <cmd:EventToCommand Command="{Binding GestureRecognizedCommand}" PassEventArgsToCommand="True" />
  32:  
  33:          <!--<ci:GestureTrigger Gesture="Scale">
  34:              <cmd:EventToCommand Command="{Binding GestureRecognizedCommand}" PassEventArgsToCommand="True" />
  35:  
  36:          <ci:GestureTrigger Gesture="Rotate">
  37:              <cmd:EventToCommand Command="{Binding GestureRecognizedCommand}" PassEventArgsToCommand="True" />
  38:  
  39:          <ci:GestureTrigger Gesture="Pan">
  40:              <cmd:EventToCommand Command="{Binding GestureRecognizedCommand}" PassEventArgsToCommand="True" />
  41:          -->

  42:      
  43:  

.csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, “Courier New”, courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; }

I used MVVMlight in the sample to demonstrate how you can use the behavior/trigger to declare all the gestures in XAML without needed to wire up specific event handlers.  Initially I tried putting the triggers collection inside the behavior, but many existing trigger actions don”t work because they try to attach to the actual UI element and fail if they are declared inside the behavior.  The gesture trigger action looks for the gesture behavior attached to the element so there is only one gesture interpreter per element. Therefore you need the behavior on the element and a trigger for each gesture you want to handle.

The complete list of gestures recognized right now are:

Tap,
DoubleTap,
TapAndHold, (pressing and holding on an element for almost a second without lifting your finger)
PressAndTap, (press on an element and hold that finger while tapping with a second finger)
TwoFingerTap,
TwoFingerDoubleTap,
TwoFingerTapAndHold,
Shape,
Pan,
Flick,
Scale,
Rotate

To use some like rotate, press and tap or any of the other two finger gestures you”ll need a touchscreen or actual phone.  I haven”t use this in a real apps yet and it needs some more testing, but I think it”s a good start.  Performance in the emulator varies on the quality of your touchscreen, but it seems to work really well on an actual phone.  The Shape gesture is based on the $1 gesture recognizer at http://depts.washington.edu/aimgroup/proj/dollar/ I adapted the code to work on WP7.  Right now it just recognizes circle, rectangle, pigtail, check and question mark. You can use the sample app on that page to generate xml files to load any new / other shape gestures; there are already a bunch more included but the code needs to be altered to raise the events. I”m not sure how useful some of the shape gestures are but it seemed cool if you could recognize a question mark and pop up a help menu or use a lasso gesture to select multiple items. The scale/rotate/flick/pan gestures just return some arguments that can be used by some other code to actually manipulate the items.  Laurent Bugnion has a nice behavior specifically for manipulating items – http://geekswithblogs.net/lbugnion/archive/2010/07/12/multitouch-behavior-update-for-windows-phone-7-tools-beta.aspx This code is more focused on determing the actual gesture performed like pan vs flick or tap vs tap & hold.

Feel free to take any pieces of the code if it”s helpful to use in your own stuff. At some point it would be nice if the actual events were just built into items since the UI guidelines for the phone specifically mention some of these like tap and hold, double tap.  Seems less efficient if everyone has to write their own code for taphold or doubel tap and the timings aren”t consistent between applications.

Also here is a video of a demo – http://dl.dropbox.com/u/254416/gestures.mp4 It isn”t that exciting and you most likely need to just try it out instead.

0 comments , permalink


24

Jun 10

“That’s a HUGE List!” – WP7 Jump List



If you have been tinkering around with the Windows Phone 7 SDK you’ve probably noticed a handful of controls that seem to be missing. The obvious ones are the Panorama and Pivot controls. Fortunately, the phone runs Silverlight, and most of the controls that are missing are relatively easy to build. In addition there are a handful of people in the Silverlight Community that have created their own panorama and pivot controls, including this one built by Clarity. And these on CodePlex.

WP7 Missing Control: WP7 Jump List

Today I would like to share some techniques I used in recreating the “jump list” functionality that is shown in the Windows Phone 7 Features Video.

clip_image001

To see this feature in action watch this video (around 00:50) : http://www.youtube.com/watch?v=wlJ_fLPpmdM

The List

Some of Silverlight’s built in functionality made building this control a cinch. The basic List box scroll functionality in the WP7 SDK has touch and inertial already built in, so I didn’t have to do any physics or manipulation coding to get the smooth scrolling (like the back in the day with WPF). Phew…that gets us half way there.

Ironically, one of the challenging features was figuring out how to dynamically add the “touch tiles” into the list of contacts.

clip_image003

After I thought about it for a little while, I decided to go the brute force method and just use a nested ItemsControl (see below). I’m sure there are many different/better approaches to go about this, but that’s the beauty of Silverlight.

pic3

Flipping Tiles

The flipping of the jump tiles is easily done utilizing the Perspective 3D features. Check out this link for more information on how to use Perspective 3D.

clip_image007

First I added a User control that examines the underlying data list and generates a “jump tile” for each of the letters in the alphabet. Then to get the disabled visual style on the letters that didn’t have any entries I used a Value Converter that checks the count of the list and sets the IsEnabled Property accordingly.

pic5

Smooth Scroll List

First I added a dependency property that is linked to the ScrollToVericalOffset method on the scrollviewer. Because there is no VerticalOffset dependency property on scrollviewers in SL, we can simply create one to enable binding and animation, etc.

pic6

Then, once we know which letter to scroll to we can use the ever-so-handy TransformToVisual method to find the absolute position relative to the list of items. The transformToVisual method returns a MatrixTransform that gives us the Y-offset value and we simply plug that into the “to” value of the animator.

pic7

To do the actual animation I used the Artefact animator framework. I’ve recently, been playing around with it and I must say its pretty awesome. . The framework is inspired by the flash community and offers up Tweener like functionality for Silvelight. If you haven’t seen this before I recommend checking it out.

Commands and Behaviors

One of the challenges I faced when building this control was communicating between user controls in the visual tree. For this,I used the MVVM light toolkit. available HERE: . This toolkit simplifies some of the pains in adhering to the MVVM pattern. Specifically,the RelayCommand and the EventToCommand behavior came in handy for achieving the desired results.

Source Code

I’ll post the source code for this shortly. I need to clean it up a little bit and make it Blend happy (blendable?) . Stay posted for more WP7 goodness…

Cheers,

Erik Klimczak  | eklimczak@claritycon.com | twitter.com/eklimcz

0 comments , permalink


23

Jun 10

Building CTA Bus Tracker for WP7 – Part 1



Lots of public transit users at Clarity, and we’ve been working on a WP7 bus tracking app for both CTA and BART (San Fran’s mass transit agency and home to Clarity’s west coast spread) for several months…several years if you count Steve Holstad’s excellent (and since retired) WhereTheEl crowd-sourced transit tracking app and numerous not-quite-ready-for-prime-time prototypes on the iPhone. We were saving up our latest effort as the basis of a multi-post guide to developing a WP7 app, what happens when the developers start before the designers but Matt Hidinger’s post about *his* cool WP7 bus tracking app pushed up our publication date! Looks like we’re playing Elisha Gray to his Alexander Bell. Fortunately, I think this town is big enough for the both of us…

So here’s post 1.

The “Design Last” Approach

Being a full service creative and engineering shop we have a myriad of projects and timelines to hit. We win projects that require engineers and designers to work independently and simultaneously.

In a perfect world, our team could go through a process of brainstorming, info-architecture, wire framing, user testing, skinning, iterating…etc. before executing on that vision. In reality, we almost never get to work within a timeline (or budget) that allows us to stretch the design process until every pixel is perfectly placed. Such is life.

Sometimes, the development staff – often as a part of learning new technology – start building apps against the latest API or platform and come to the design staff: “I have this great app,but it could use some design love”. This is what we call the “Design Last” approach. The team jumps into skinning/styling within the constraints of the app’s functionality. We don’t skip the usability/IA aspects,but we do them in the opposite order and with a different context.

I’m not necessarily promoting a “Design Last” philosophy, but it often helps getting prototypes and proof of concepts out the door, and all the design in the world can’t predict the “right” answers to some software problems. Fortunately, the Microsoft development stack makes this type of work relatively painless.

Bus Tracker v.00001

With the all the hype of the WP7 platform our engineers have been pumping out some really cool stuff.  Several months ago, the CTA released an official API. Some of our developers went to work, and we find ourselves in the “design last” approach. Below is a video showing an early release of a bus tracker proof of concept. In the following posts I’ll walk through the process of transforming this functional application into a WP7 app and how we meld in the Metro design, information architecture, usability concepts, etc.

Key Features

Some features we’ve been kicking around that will hopefully find their way into the final release of the app:

  • View all routes, or routes near your current location using WP7′s location API
  • Glance-view live tiles for saved stops arrival times (stops you use frequently)
  • “My Ends” – Find your way to a destination. Choosing “home” will find the nearest stop to your current location and find the fastest bus route(s) to your destination.
  • Ability to show all stops, or stops nearest you
  • Traffic and Transit alerts
  • A Compass to help you orient yourself

Sneak peak of Part 2

In my next post, I’ll highlight some of the key steps taken during the design phase and how they aligned with the heavily transit inspired “metro” design principals. And I’ll give my unbiased opinion on why I think WP7 is the BEST platform for the CTA bus tracker.

Below are a couple of images of some of the initial wire framing and flow documents that will eventually become the blueprint for the enhanced functionality and interaction.

sketch

wireframe_shot

CTA RIDERS:  What is one feature that you wish you had in your existing CTA app?  Your feedback could find its way into the next WP7 CTA app…

Best,

Erik Klimczak  | eklimczak@claritycon.com | twitter.com/eklimcz

0 comments , permalink


21

Jun 10

Powermote: WP7 remote control for PowerPoint



This is a preview of a quick app I built for Windows Phone 7 to remotely control a PowerPoint presentation from a WP7 device.

The app consists of a PowerPoint add-in that hosts a WCF service. The add-in creates a ribbon menu item to connect to the phone. Clicking “Connect to Phone” sends a push notification to the phone via the Microsoft Push Notification Service. The phone then sends a request to the WCF service hosted in PowerPoint to request data about the presentation along with URIs for the slides images that the add-in saves out as thumbnails. It”s definitely easier to build office add-ins with VS2010 and Office 2010.

image

On the phone you can use a swipe gesture or the buttons to change slides . It also includes a timer and displays the notes for the slide. Here is video of the application controlling a presentation.

[ higher quality video]

I have several other applications in the works that have a similar model of WCF services and push notifications. One is for remotely controlling media center (or streaming media center content to the phone) and the other is a collection of browser add-ins that push links to the phone and hyperlinks phone numbers to enable dialing through the phone from your desktop.

0 comments , permalink


11

May 10

Windows Phone 7 + Azure….and a couple of nuggets…



I recently gave a talk about Windows Phone 7 at a Bizpark Camp in San Francisco.  The camp had two focuses: Azure and Windows Phone 7.  My presentation covered WP7 portion of the camp.  During my presentation I highlighted the phone platform and talked about some of the differentiators from design, technology and a business standpoint.

slides_pic

Whenever I watch presentations or go to tech meet-ups I feel like I get the most value when I can walk away with a few “nuggets” that I wouldn’t necessarily have known about otherwise.  That said, I tried to add a few resources into my presentation that should be helpful when building WP7 apps.

Nuggets

Seeing that the camp was focused on Azure and WP7 I decided to augment my presentation with a code sample.  The intention was to give some insight on how to approach building WP7 applications that talk to Azure.  Some colleges of mine here at Clarity have posted a sample on codeplex focused on getting up and running with WP7 and Azure..you can check it out HERE.   The project is not a “hello” world app, and is targeted at people who have some experience with the platform and a working knowledge of silverlight.

Also, during my presentation I mentioned some limitations with the current phone sdk.  Our sample code on contains workarounds for the following:

#1 Panorama Control

#2  “Tilt” effect

#3   Animating Frame

#4   Sample architecture (leveraging MVVM light)  and coding patterns.

Note: For the sample phone project we used an azure token that will expire in the next couple of months.  When that happens…in the downloads section of the codeplex project there a link to a local development fabric that can be used for local development

Presentation

Admittedly, the slide deck is pretty design heavy, and doesn’t contain much text.  This was semi-intentional to encourage people to come out to the camps and hear it first hand.  There is some additional info found the “notes” of the PPTX.

Don’t forget to check out the full presentation at the Chicago Bizspark Camp on May 21st here at the Clarity Office.  Or on June 4th in  Los Angeles.

You can DOWNLOAD the Slides here:  PPTXPDF or view it inline below.

View more presentations from eklimcz.

Cheers!

Erik Klimczak  | eklimczak@claritycon.com | twitter.com/eklimcz

0 comments , permalink


25

Apr 10

Extreme Makeover, Phone Edition: Digjicom’s mediat



Extreme-Makover-Phone-Edition

Mobile Makeover

For many companies the first foray into Windows Phone 7 (WP7) may be in porting their existing mobile apps. It is tempting to simply transfer existing functionality, avoiding the additional design costs. Readdressing business needs and taking advantage of the WP7 platform can reduce cost and is essential to a successful re-launch. To better understand the advantage of new development lets examine the upgrade of a mobile app for a conceptual cable company Digjicom.

Before

Digjicom has a great mobile app that provides several key features. The ability to browse the lineup using a guide, a client for Digjicom email accounts, on demand gallery, and much more. We will leverage these and build on them using some of the incredible WP7 features.

After

With the proliferation of DVRs (Digital Video Recorders) and a variety of media devices (TV, PC, Mobile) content providers are challenged to find creative ways to build their brands. Every client touch point must provide both value added services as well as opportunities for marketing and up-sale; WP7 makes it easy to focus on those opportunities. The new app is an excellent vehicle for presenting Digjicom”s newly rebranded TV, Voice, and Internet services. These services now fly under the banner of mediat and have been expanded to provide the best experience for Digjicom customers. The Windows Phone 7 app will increase the surface area of this service revolution.

digjicomt-home

lineup

The home menu is simplified and highlights Digjicom”s “Triiiplay”: Voice, TV, and Internet. The inbox has been replaced with a “messages” view, and message management is handled by a WP7 hub. The hub presents emails,tweets,and IMs from Digjicom and other viewers the user follows on Twitter.  The “popular” view orders shows based on the users viewing history and current cable package. The first show “Glee” is both popular and participating in a conceptual co-marketing effort, so it receives prime positioning. The second spot goes to a hit show on a premium channel, in this example HBOs “The Pacific,” encouraging viewers to upgrade for this premium content. The remaining spots are ordered based on viewing history and popularity. Tapping the play button moves the user to the theatre where they can watch previews or full episodes streaming from Lancast. Tapping an “extra” presents the user with show details as well as interactive content that may be included as part of co-marketing efforts.

Glee-Main-digjicom

Co-Marketing with Dynamic Content

The success of Digjicom”s services are tied to the success of the networks and shows it purveys, making co-marketing efforts essential. In this concept FOX is co-marketing its popular show Glee. A customized panorama is updated with the latest “gleeks” tweets, streaming HD “episodes”, and “extras” featuring photos and video of the cast. If WP7 apps can be dynamically extended with web hosted .xap files, including sandboxed partner experiences would enable interactive features such as the “Gleek Peek,” in which a viewer can select a character from a panorama to view the actors profile. This dynamic inline experience has a tailored appeal to aspiring creatives and is technically possible with Windows Phone 7.

Quinn-Gleek-Peak

Summary

The conceptual Digjicom mobile app for Windows Phone 7 highlights just a few of the incredible experiences and business opportunities that can be unlocked with this latest mobile solution. It is critical that organizations recognize and take full advantage of these new capabilities. Simply porting existing mobile applications does not leverage these powerful tools; re-examining existing applications and upgrading them to Windows Phone 7 will prove essential to the continued growth and success of your brand.

5 comments , permalink