Inside Windows Phone Apps – Shazam

Application:

Shazam

Interviewee:

James Morse, Creative Director

About the team:

www.matchboxmobile.com

Can you tell us about the app?

The app is available on iOS, Android & Windows Phone 7®. Shazam can “listen” to any track and then feedback with name, artist & purchase options.

Can you tell us a little bit about yourself?

I’m Creative Director at Matchbox Mobile. Based in Brighton we rapidly translate brave and inventive concepts into tangible, creative realities – whatever the platform.

What led you into design?

I’ve been designing for a wide range of disciplines for over 17 years. In 1999 I began to focus on user interface and user experience design in the emerging PDA and smartphone markets.

What led you to focus on mobile?

Early mobile applications I was exposed to were scaled down versions of desktop apps offering a poor user experience. Rather than seeing the small screen as “lack of real estate” I saw an opportunity to create unique designs that make the most of mobile devices and their built-in capabilities.

Do you design for any other platforms? How does the experience with WP7 compare?

I’ve designed for almost all mobile platforms. WP7 makes it easy for designers: There’s plenty of detailed design documentation available as well as free icon assets and design templates. ‘Blend’ (part of the WP7 SDK) is very easy to learn and visually not that different to Photoshop, when development is underway our designers are able to access the project, tweak the UI in Blend, add transitions and check back in ready for the developers to continue from where they left off.

There are some big differences when designing for mobile, what do you think this application does well?

Being a very simple UI, porting Shazam to mobile is a relatively straightforward task. What I think the app has done well is to integrate with Zune leveraging the native WP7 music services.

Does the design reflect the brand and/ parent site? How does it do this? If not why?

There is a common brand theme among the Shazam mobile apps, although each adhering to it’s respective platform. As Shazam is a mobile service, the website is there – primarily – to provide visibility of the mobile apps, so differs visually from the mobile apps.

What do you think of the ability to dynamically change the Panorama background image with animation, is this an example of good/bad design?

I like the ability to change the Panorama background, this allows for subtle personalization. When used correctly the black opaque layer (applied between the text and the background image) insures clear visibility of both content and background image.

Is having design guidelines a good thing? Are they too restrictive?

Difficult to answer, but in the case of WP7 I think it’s a good thing as they started with a good design foundation. Metro was well thought out and well documented for both designers and developers. There’s still room for originality and creativity without breaking Metro’s design language.

What do you think of the typography? Would something else work better in this design?

I like the move towards typography. We still need iconography to tell a story quickly (and internationally), but mobile design in recent years has become bogged down with drop shadows, glossy buttons. The typographical approach strips away the unnecessary layers and focuses on the raw content.

Please give a design tip for WP7

Read the Metro guidelines, they’re your friend. Avoid the urge to use gradients and drop shadows. Be honest with your design.

——————————————————————————————————————————————–

Build your own app

Been inspired? We’ve put together a step-by-step guide to building a Windows Phone 7 app. You will find helpfull tips, tricks and free downloads to get you started.

Firstly, download the free tools here

Step 1: Designing your App
Step 2: Laying out elements in Expression Blend
Step 3: App styles
Step 4: Adding the glossy elements

Published by Sara Allison

Sara is the editor of Ubelly - when not heads down scouring Ubelly articles for typos (and not always catching them), she's scouting for new writing talent. Give her a shout @SaraAllison if you've got something to say about development/design and want to be heard.

One Comment So Far, what do you think?

  1. Pingback:Designing through DreamSpark - Microsoft UK Students - Site Home - MSDN Blogs

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>