SlideShare ist ein Scribd-Unternehmen logo
1 von 105
UX-UI
Building a desirable cloud
       application




 April ’12 - A presentation at Microsoft Greece
who is talking
Panos Kontopoulos
GM & Partner at WEDIA
www.mentalblock.gr
www.wedia.gr
@pkontopoulos
UX-UI. Building a desirable cloud application
Software Engineering lover
Business and Marketing

Singular - ERP Architect
Intarget - Internet 1.0 agency
Microsoft - Services and Web
Strategy
Wedia - Complex, Popular, Hand
Crafted web sites
UX-UI. Building a desirable cloud application
UX-UI. Building a desirable cloud application
unique users per
 2.400.000   month


50.000.000   pageviews per month



     6.500   hits/sec



  220.000    articles in 3 years



 1.350.000   comments
UX-UI. Building a desirable cloud application
UX-UI. Building a desirable cloud application
UX-UI. Building a desirable cloud application
UX-UI. Building a desirable cloud application
UX-UI. Building a desirable cloud application
share some thoughts

a new generation of
applications
on the cloud
web based
device agnostic
share some thoughts

why there’s more than
features
why design matters
why user experience
matters
share some thoughts

about your competition
unless everybody in the
room

is building a Greek
Accounting software
application
(limited to Greek Tax
System)
your competition

is world wide
UX-UI. Building a desirable cloud application
UX-UI. Building a desirable cloud application
UX-UI. Building a desirable cloud application
UX-UI. Building a desirable cloud application
UX-UI. Building a desirable cloud application
UX-UI. Building a desirable cloud application
UX-UI. Building a desirable cloud application
UX-UI. Building a desirable cloud application
UX-UI. Building a desirable cloud application
wait, there is ROI
UX-UI. Building a desirable cloud application
UX-UI. Building a desirable cloud application
UX-UI. Building a desirable cloud application
UX-UI. Building a desirable cloud application
but first things, first
have you realized ?
UX-UI. Building a desirable cloud application
UX-UI. Building a desirable cloud application
all you have is your web site

      a landing page
UX-UI. Building a desirable cloud application
ooops, I just forgot

you have also a coming soon
            page
UX-UI. Building a desirable cloud application
UX-UI. Building a desirable cloud application
UX-UI. Building a desirable cloud application
UX-UI. Building a desirable cloud application
so let’s get back to your

     landing page
UX-UI. Building a desirable cloud application
UX-UI. Building a desirable cloud application
UX-UI. Building a desirable cloud application
UX-UI. Building a desirable cloud application
UX-UI. Building a desirable cloud application
UX-UI. Building a desirable cloud application
UX-UI. Building a desirable cloud application
UX-UI. Building a desirable cloud application
don’t forget the features page
UX-UI. Building a desirable cloud application
UX-UI. Building a desirable cloud application
and the pricing page
UX-UI. Building a desirable cloud application
UX-UI. Building a desirable cloud application
don’t forget the reminders
UX-UI. Building a desirable cloud application
and your customer feedback
UX-UI. Building a desirable cloud application
UX-UI. Building a desirable cloud application
UX-UI. Building a desirable cloud application
getting inside your application
UX-UI. Building a desirable cloud application
UX-UI. Building a desirable cloud application
UX-UI. Building a desirable cloud application
UX-UI. Building a desirable cloud application
UX-UI. Building a desirable cloud application
UX-UI. Building a desirable cloud application
UX-UI. Building a desirable cloud application
UX-UI. Building a desirable cloud application
mega
menu
s
faceted
navigati
     on
UX-UI. Building a desirable cloud application
blank
 slate
the queen of all, the web form
UX-UI. Building a desirable cloud application
UX-UI. Building a desirable cloud application
UX-UI. Building a desirable cloud application
UX-UI. Building a desirable cloud application
UX-UI. Building a desirable cloud application
speaking of tools and processes
meet the personas
UX-UI. Building a desirable cloud application
UX-UI. Building a desirable cloud application
UX-UI. Building a desirable cloud application
travel through user journeys
Goal: To buy the items in my basket!
              Basket!               New or existing!   Delivery details!                                    Payment!             Confirmation!
                                                           New customer!


                 List of selected           Select

Add product                                                    Enter name and                                    Enter credit
                    items and              checkout
                                  Enter address
                                                                                                  !                                     Confirm!
 to basket
         !                                                      email address
                                                                            !                                    card details!
                     quantities
                              !             option!




                                                           Existing customer!

                    Edit basket
                              !

                                                                            Select save
                                             Login!                          name and
                                                                              address!




                                                                           Add new name
                                                                            and address
                                                                                      !




                                                           Notes!
                                                           Several existing customers find it easier to
                                                           checkout as a new customer as they don’t
                                                           remember their username and password and
                                                           find managing address fiddly. We should aim to
                                                           make this much simply with the next release
                                                           and enhance the process for repeat customers.!
and of course wireframe

  until you agree on
 what will be designed
UX-UI. Building a desirable cloud application
UX-UI. Building a desirable cloud application
UX-UI. Building a desirable cloud application
UX-UI. Building a desirable cloud application
UX-UI. Building a desirable cloud application
UX-UI. Building a desirable cloud application
speaking of mobile devices
say hello to responsive design
UX-UI. Building a desirable cloud application
UX-UI. Building a desirable cloud application
UX-UI. Building a desirable cloud application
food for thought
UX-UI. Building a desirable cloud application
THANK YOU!
 panos@wedia.gr
 @pkontopoulos

Weitere ähnliche Inhalte

Mehr von Panos Kontopoulos

Wedia Social Media presentation at DigitalDays
Wedia Social Media presentation at DigitalDaysWedia Social Media presentation at DigitalDays
Wedia Social Media presentation at DigitalDaysPanos Kontopoulos
 
Wedia at AllThingsFacebook 2012
Wedia at AllThingsFacebook 2012Wedia at AllThingsFacebook 2012
Wedia at AllThingsFacebook 2012Panos Kontopoulos
 
Financial Services Web Strategies
Financial Services Web StrategiesFinancial Services Web Strategies
Financial Services Web StrategiesPanos Kontopoulos
 
Blogging @Microsoft in Greek for Greek Bloggers Camp '07
Blogging @Microsoft in Greek for Greek Bloggers Camp '07Blogging @Microsoft in Greek for Greek Bloggers Camp '07
Blogging @Microsoft in Greek for Greek Bloggers Camp '07Panos Kontopoulos
 

Mehr von Panos Kontopoulos (6)

Wedia Social Media presentation at DigitalDays
Wedia Social Media presentation at DigitalDaysWedia Social Media presentation at DigitalDays
Wedia Social Media presentation at DigitalDays
 
Wedia at AllThingsFacebook 2012
Wedia at AllThingsFacebook 2012Wedia at AllThingsFacebook 2012
Wedia at AllThingsFacebook 2012
 
Social Media Snack 092008
Social Media Snack 092008Social Media Snack 092008
Social Media Snack 092008
 
MSLaunch08-iteam profile
MSLaunch08-iteam profileMSLaunch08-iteam profile
MSLaunch08-iteam profile
 
Financial Services Web Strategies
Financial Services Web StrategiesFinancial Services Web Strategies
Financial Services Web Strategies
 
Blogging @Microsoft in Greek for Greek Bloggers Camp '07
Blogging @Microsoft in Greek for Greek Bloggers Camp '07Blogging @Microsoft in Greek for Greek Bloggers Camp '07
Blogging @Microsoft in Greek for Greek Bloggers Camp '07
 

Kürzlich hochgeladen

Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdfPedro Manuel
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfDaniel Santiago Silva Capera
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAshyamraj55
 
AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarPrecisely
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8DianaGray10
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...DianaGray10
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfinfogdgmi
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7DianaGray10
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXTarek Kalaji
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Websitedgelyza
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureEric D. Schabell
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UbiTrack UK
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemAsko Soukka
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostMatt Ray
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1DianaGray10
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxMatsuo Lab
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1DianaGray10
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsSafe Software
 
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDELiveplex
 

Kürzlich hochgeladen (20)

Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdf
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
 
AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity Webinar
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdf
 
20230104 - machine vision
20230104 - machine vision20230104 - machine vision
20230104 - machine vision
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBX
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Website
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability Adventure
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystem
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptx
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
 
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
 

UX-UI. Building a desirable cloud application

Hinweis der Redaktion

  1. \n
  2. \n
  3. Introductions\n
  4. my delicious tag cloud \n
  5. \n
  6. my work\n
  7. part of our portfolio \n
  8. some impressive numbers for gazzetta.gr\n
  9. \n
  10. mobile apps \n
  11. viral web videos\n
  12. \n
  13. facebook social games \n
  14. \n
  15. \n
  16. \n
  17. \n
  18. \n
  19. sometime ago I was looking for an agile supporting service to host our projects \n
  20. several options are available\n
  21. you can tell in the very first seconds some things about them \n
  22. definitely design counts \n
  23. \n
  24. number of search results for ux \n
  25. a first definition\n
  26. \n
  27. \n
  28. \n
  29. \n
  30. there is scientific background\n
  31. \n
  32. so user experience is about how someone looks at your company, brand, service, products in total \ntake le web for example, it’s more than a conference, it’s an experience \n
  33. \n
  34. there is no software in cloud applications\n
  35. there are no salesmen \n
  36. no boxes and cds\n
  37. \n
  38. \n
  39. \n
  40. \n
  41. \n
  42. \n
  43. added virality\n
  44. \n
  45. \n
  46. excellent examples \n
  47. \n
  48. \n
  49. \n
  50. \n
  51. \n
  52. colors are important \n
  53. \n
  54. \n
  55. \n
  56. \n
  57. \n
  58. \n
  59. \n
  60. \n
  61. \n
  62. \n
  63. \n
  64. \n
  65. \n
  66. looking for a crm? \n
  67. not exactly what I had in mind :-( \n
  68. I would prefer something closer to what I use everyday\n
  69. tags and beautiful buttons on the sidebar \n
  70. hot links, color usage and space, less is more \n
  71. look what we have done in Wedia \n
  72. look what we have done in Wedia \n
  73. some UI patterns, new kind of menus \n
  74. \n
  75. \n
  76. \n
  77. \n
  78. \n
  79. \n
  80. \n
  81. \n
  82. you can find inspiration\n
  83. you can find inspiration\n
  84. \n
  85. \n
  86. \n
  87. \n
  88. software platforms already incorporate them \n
  89. \n
  90. \n
  91. \n
  92. examples from our projects \n
  93. \n
  94. information architecture and let the designer free\n
  95. \n
  96. \n
  97. \n
  98. \n
  99. \n
  100. \n
  101. \n
  102. everybody says so\n
  103. \n
  104. \n
  105. \n