Among the many gorgeous applications on Windows Phone 7, surely Cocktail Flow has to be right out at the front. The Cocktail Flow team will take us through the evolution of their application, the challenges, design decisions and solutions they came up with.

2. Creating a Beautiful WP7 Application GergelyOrosz @GergelyOrosz http://bit.ly/GergelyOrosz gergely@gergelyorosz.com

3. GergelyOrosz Silverlight / WPF / WP7 Visiblox: performant WP7 / SL / WPF charting component Cocktail Flow: WP7 application Developed with Distinction Ltd

4. What Makes an App Great Designing Cocktail Flow Creating a Beautiful WP7 Application

5. What Makes an App Great Designing Cocktail Flow Creating a Beautiful WP7 Application

6. What is Cocktail Flow? Bartending app 2nd (UK) & 4th (US) highest rated app Over 30.000 users

7. What Makes an App Great?

8. What is Cocktail Flow? Bartending app Focus on strong visuals Lots of useful features Updated regularly

9. What is Cocktail Flow? Cocktail Flow is an app which is dedicated to bring the experience of sitting in a bar and drinking beautiful cocktails to your mobile.

10. What makes a great app? Great functionality Great experience New categories of apps Tools Experiences

11. Top rated apps on the platform IloMilo Cocktail Flow 4th & Mayor TuneIn Radio Thumba Photo Editor Shazam Bubble Jump Netflix

12. Top rated apps –Experience or Tools IloMilo 4th & Mayor Cocktail Flow NinjaBoy+ Urban Dictionary 7 Bank of America Shazam TuneIn Radio

13. Top rated free apps –Experience or Tools 4th & Mayor Krashlander Free NinjaBoy+ Urban Dictionary 7 Bank of America Shazam TuneIn Radio

14. Top rated paid apps –Experience or Tools IloMilo Cocktail Flow Fable: Coin Gold Krashlander Fruit Ninja Triangula Flight Control

15. We believe the future is a world of great experiences.

16. Tools are easy to replace.Experiences are harder.

17. What Makes an App Great Designing Cocktail Flow Creating a Beautiful WP7 Application

18. Designing Cocktail Flow Metro Recap Getting Started Planning Inspiration The Process Designing Design Decisions Performance

19. Recap (what is Metro?) Metro is clean Metro is easy to navigate Metro helps you make decisions faster Metro is alive in motion

20. Reflecting on WP7 Tools should be metro

21. Reflecting on WP7 Experiences should embrace metro Innovate on top of metro Plug headphones

22. Designing Cocktail Flow - Planning Experience High reach Early adopters

23. Designing Cocktail Flow - The Process Full visual plans Rapid prototyping & iteration

24. Designing Cocktail Flow - The Process

25. Designing Cocktail Flow - Inspiration WP7 != iPhone, Android Design guidelines for Windows Phone- MSDN YouTube videos of demo apps USGA Golf Errr..?

26. Designing Cocktail Flow – DesignDecisions Don’t stick with black Differentiate the app from the OS. Feels „cleaner”

27. Designing Cocktail Flow – DesignDecisions Spice up the UI Use gradients Gives „life”, „depth” to the scene

28. Designing Cocktail Flow – DesignDecisions Spice up the UI Templated buttons Gradients, typography, icons Users should recognize it’s a button

29. Designing Cocktail Flow – DesignDecisions Spice it up with images Using images in menu items

30. Designing Cocktail Flow – DesignDecisions Spice it up with images Use subtle background images Differentiates the app from the OS. Adds an extra touch

31. Designing Cocktail Flow – DesignDecisions Spice it up with images Background images Dominant images for headers

32. Designing Cocktail Flow – Design Decisions Vary typography Font sizes, font style

33. Designing Cocktail Flow – DesignDecisions Vary typography Font sizes, font style Segoe WP Bold, Light, Semibold.. Helps to focus, less so boring

34. Designing Cocktail Flow – DesignDecisions Embrace Metro in Motion Cocktails flow in from the right Familiar but refreshing (and memorable)

35. Designing Cocktail Flow – Performance Numerous performance issues Page transitions were slow Some animations were slow Load times were slow Virtualized list was slow

36. Designing Cocktail Flow – Resolving Perf. Page transitions were slow Took them out Some animations were slow Optimised them to be more gpu friendly Load times were slow „Loading” screens. Users are more patient. Virtualized list (ListBox) was very slow Paginated lists. No better solution found.

37. Designing Cocktail Flow -Summary Don’t stick with black Spice up the UI Gradients, templated buttons Spice it up with images Background images, images for menu items Vary typography Font sizes, colours, styles Embrace Metro in motion Optimize performance

38. What Makes an App Great Designing Cocktail Flow Creating a Beautiful WP7 Application

39. Creating a Beautiful Application Create experiences Tools are good until a better one is out Content (& functionality) is king. Don’t ignore chrome though. Users won’t tell you but they love (reasonable) chrome Understand, use and embrace Metro You’ll probably need a designer to embrace it

40. Creating a Beautiful Application Create a fluent user experience Navigation Easily discoverable Usability Intuitive to use Observe how people use it without guidance Performance People notice performance issues, don’t notice if there aren’t any

41. Creating a Beautiful Application - summary Build experiences, not tools Content, functionality, chrome Use & embrace Metro Create fluent user experiences

42. © 2008 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.