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.
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
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
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