The other day, I published a post that contended that every developer has at least some responsibility for the design of the apps they’re working on, particularly if they don’t have the luxury of working with full-time designer on their project. The post also looked at some of the history of the Metro design language, and how the work that Microsoft is doing with Metro style apps in Windows 8, and the guidance we provide, can help developers build great apps.
As developers, too often we don’t feel like we’re getting anything done until we start writing code, but when it comes to designing a great application, just cracking open Visual Studio and going to town isn’t going to give you the results that you want. I’ve had the privilege of sitting in on some training provided by the UX Evangelists in my organization, which included a great recommendation for how to get started on the right foot, and that’s to figure out the answer to the question “What is my app best at?” And it’s important to be able to answer this question succinctly and simply. Once you have a “best at” statement, it will guide you in identifying and prioritizing the core scenarios and features that support that “best at” statement.
Without a “best at” statement, the temptation may be strong to throw in every feature you can think of in an effort to outdo your competitors in a contest of who can come up with the longest bulleted list of features. This is not a recipe for success in a Windows 8 Metro style app. Why? Because it’s virtually impossible for an app to be “best at” everything, so being selective about the features you focus on is more likely to lead you to success.
##
A Practical Example
To illustrate the importance of this and other steps in the process of designing a Metro style app, I’m going to follow the process myself publicly, here on my blog. As many of my readers may be aware, I run a site called Community Megaphone, which is devoted to the promotion and discovery of tech-related events in the United States. Here’s a screenshot of the Community Megaphone home page:
Keep in mind, this is a web site designed by a developer, and it shows. It evolved from one of the built in starter kit templates for ASP.NET, with a healthy dose of jQueryUI, plenty of custom code, and a bit of hackery, and I’d be the first to admit that the site could use a UI refresh.
But what it lacks in style, it partially makes up for in flexibility including the fact that all approved events are available as part of an OData feed, which allows the data to be consumed in either ATOM-Pub format, or as JSON, making it pretty simple to build an app around the data. In fact, I already have a working prototype app that consumes the feed and displays it based on the Grid application template.
What I don’t want to do, however, is simply try to replicate the web site as a Metro style app. While it might be possible to port a lot of the HTML and JavaScript used in the site into a Metro style app, this approach would be a major missed opportunity.
Instead, I want to start by determining what the “best at” statement for the Community Megaphone app will be.
What Not To Do
If you’ve attended any of my recent talks on Windows 8, you’ve probably seen me demo a prototype of a Community Megaphone app. While this app has some nice improvements over the website, it really doesn’t yet take full advantage of what Metro has to offer.
For example, the presentation of the events, using maps from Bing for the background image of the tiles, is a useful way of bringing that information to the surface, compared to the website, where map data is buried beneath the accordion sliders. And the use of the SVG logo in the background is a nice touch, but the current app is still clearly adapted from the Grid application template, and there’s probably a lot more I could do in terms of branding and differentiation.
In short, the current prototype is fine as a demo, but it does not fulfill the potential of what it could be, and I’ve found myself struggling to figure out what features to add next, beyond the basic databinding of the event information from the OData feed.
##
The Statement
So after spending some time thinking it over, here is the “best at” statement for the Community Megaphone app:
Community Megaphone is the best Windows 8 Metro style app for finding and sharing developer and IT Pro events in the US.
The statement is clear, to the point, and easily understood.
Using the Statement to Derive Feature Priorities
Looking back at the Community Megaphone website, and keeping in mind my chosen “best at” statement, I can immediately start eliminating some of the things that the website does as unnecessary for the app. For example, listing blogs is completely peripheral to the “best at” statement, and so can be left out. Likewise, listing podcast episodes for the Community Megaphone podcast might potentially be interesting for the app’s audience, but it isn’t directly related to the “best at” statement, so it won’t make the first cut of features. So what are the critical features? Here’s an initial list of what I think is needed to support the “best at” statement above:
- Display all upcoming events
- Display events by location
-
Enable searching for events
- Enable sharing of events
How this Helps
So what have I gained by going through the process of creating a “best at” statement? By using my “best at” statement to help prioritize features, I can avoid spending time planning and developing functionality that isn’t essential to the purpose of the app. And without extra unneeded functionality, I’ll have more time to spend looking at both the primary functionality, as well as on the user experience by which I will deliver this functionality.
In future posts, I’ll walk through how some of the features above map to capabilities in the Windows 8 Metro style app platform, and also show the approach that I will take to coming up with a compelling design for the Community Megaphone app.
-
- Display events by location