MS Give Auction: A Case Study

The MS Give Auction allows employees to bid on items donated by other employees, with all profits going to charity

The existing give auction site was a web application developed in ASP.NET, but they wanted a better way to browse through items than the standard Search-View-Back-Repeat web model. Browsing on the web is a “lean-in” experience – you lean over your keyboard and mouse and specify exactly what will happen. The MS Give Auction was looking for more of a “lean-back” experience; just push a button or two and browse through all of the content without a lot of overhead. photoSuru has that experience – using the keyboard or a remote control to flip through items is a lot easier than searching, viewing, hitting the back button, and repeating that many times.

With the source code to photoSuru available, it was easy for them to take their existing website (which contained all of the data they needed) and transform photoSuru (which provided an occasionally-connected photo viewing experience) to make an occasionally-connected Auction item viewing experience.

All they needed to do was swap out the photoSuru branding with their own branding, generate feeds from their existing website, and add some features into photoSuru specific to the auction scenario. We’ll look at each of these in detail.

New Branding & Themes

Using the techniques described in the Application Visuals album, they made photoSuru their own:

• They replaced the application logo and splash screen with their own graphics
• They modified the gallery home templates in ScePhotoViewer\Resources\GalleryHomeResources to include the Hot Items section (a control they developed) as well as an area explaining the auction (text with a gradient background)
• They turned the rich text view on permanently (instead of using the standard photo view), removed the close button, and modified it to show a larger image of the item on the left and rich text describing the item on the right
• They created their own version of the ‘Dark’ theme by changing the arrow colors to a glassy blue
• They added their own controls at various points in the application; an auction fundraising total was added to the top navigation bar, a ‘Send Feedback’ link was added near the bottom of the window, along with other minor tweaks

Since viewing an auction item is about both the item – through a picture – and the words that describe it, the Auction Browser team decided to make the rich text viewer their primary item viewing experience.

They rearranged the default template to make the item image larger, added countdown, bid history, and bidding controls, and used the Auction item’s <link/> element to link the element to the web application’s location for that item, automatically hooking up the ‘View in Browser’ and the ‘B’ button commands to launch that page. They also added a small button to add the current item to the user’s watched items list; this button also made an asynchronous call to the web server to save this state in the web application so that they would see this change everywhere.

With those simple changes, it became a completely different application!

New Features

Since photoSuru wasn’t explicitly built for auctions, the Auction Browser team added a few new features to make it match their scenario.

A bidding control was added that allowed them to bid on items, right from within the application. This control launched from the item details view and allowed them to enter their information and bid amount; once the user clicked ‘Bid’, it would post these results to the server asynchronously.

Since prices change in an auction quite frequently, the auction team wrote a small piece of code that automatically updated an item’s price whenever it was displayed on screen; when PhotoViewerControl (which displayed the auction item) was viewed, it would make an asynchronous call with the identifier to a small web service; the web service would return this price so that it could be displayed. Prices were updated every 15 seconds using a timer that started when the control was loaded, and the new price was written back into the Auction item that was displayed; this automatically updated the price on the screen (thanks to WPF’s databinding logic) and cached the value for the duration the application was open. This granular update allowed them to get the majority of the data they needed via the Subscription Center synchronize process – so people could browse auction items offline – while also maintaining real-time data in between syncs when the user was online. All of this work occurred asynchronously, which meant the performance of the application was just as snappy as photoSuru; navigation between items occurred without any delays, even when holding down the left or right key, and the asynchronous updates meant the UI was responsive throughout the update process.

They also added a self-contained countdown timer for each item; by binding to the item’s expiry time and calculating a difference, they were able to add a ticking clock that showed the remaining time. And by using WPF’s DataTriggers, they could have easily changed the timer’s color or size based on the amount of time remaining.

Another new feature was the ability to filter by price; by using the Filter property on CollectionView, applied to all albums, they were able to filter out all of the products that were above the user’s price limit. And by binding the filter’s MaximumPrice property to a collection of radio buttons, they made it easy for users to change the maximum price they saw quite easily.

By listing the item’s categories in the Tags collection, they were able to use the tag explorer to provide a unique auction item browsing experience, allowing users to follow connections to related items.

A Hot Items gallery and album of items was added to the content feed, and using some of the size-aware controls that ship with photoSuru, including the RowScrollingPanel, they were able to create a list of hot items right on the gallery home in only a few lines of code. In the same way, they added ‘My Bids’ and ‘Watched Items’ galleries – and added dock-able panels on the side of the browser’s main windows to make them easy to access.

Since these galleries were very dynamic, they used a WCF service to generate them dynamically whenever they were requested:

The Hot Items gallery was generated dynamically for all users based on the most-bidded-upon items in the past hours

Both the My Bids and Watched Items galleries used Subscription Center’s authentication feature with the user’s default Windows Authentication credentials to request the application feeds so that these galleries could be generated on a per-user basis.

With photoSuru as a base, adding all of these features were relatively quick; each feature only took a few hours of work, and when put together with the photoSuru code, they made an auction browsing experience quite unlike their web application.

Database-Driven Feeds

Due to the highly dynamic nature of an auction, the Auction Browser team used WCF to generate the SCE feeds the auction browser needed:

• The WCF service had a method for each feed type it generated – Content (master) Feed, Gallery Feed, and Album Feed – that took parameters where necessary to generate the corresponding feed
• Images were saved on first usage to a temporary directory that was accessible to all clients so that they didn’t need to proxy these items through a service
• When a feed was generated, it was cached for 30 seconds to reduce load on the servers; they used the standard WCF mechanisms for caching
• Whenever an item changed, they bubbled up the timestamp of the change to the root subscription file; this allowed Subscription Center to keep every user’s machine up-to-date with the latest auction details, as well as allowing users to browse the auction offline or when away from the office.
• For data that was updated frequently – like the bid history and the current item price –web service calls were made to targeted functions in the WCF service, which allowed the browser to stay up to date without performing a full sync when online.

Auction Browser Recap

Just because photoSuru only does photos doesn’t mean it can’t be used for other content; by using the features that photoSuru provides, it’s easy to build rich media experiences that run in occasionally connected environments, regardless of the media being presented. It is much easier to browse around items – whether photos, auction items, or something different – using intuitive keyboard commands rather than pointing, clicking, and waiting on the web.

The auction browser is an excellent example of how photoSuru can be useful outside of the core photo viewing scenario; by adding a few features, it’s easy to make your own experience for online shopping, auction browsing, photo viewing – whatever it is that interests you.

photoSuru provides a ton of features that you won’t need to worry about, from navigation to searching, automatic updating to offline usage, and adaptive layout to fancy effects that you can use directly or incorporate into your application as you see fit. And you don’t need to use all of it – the auction browser team decided to disable the feed wizard and the slideshow features, and used the rich text viewer by default – only use what make sense, and leave the rest out.

Using photoSuru, you can cheaply provide a wholly different viewing experience for your users, but one that is intuitive and familiar. photoSuru leverages the back/forward navigation style that users are well used to, while also providing keyboard and remote navigation options to make it easy to browse around and look at content without leaning in and controlling the details.

Note

This document is also available from within photoSuru; simply open the ‘MS Give Auction Browser’ album in the ‘How To photoSuru’ subscription that installs with photoSuru.