Data Meter Widget Design Project


Published on

UXI - 12/27/2011

Published in: Technology
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Data Meter Widget Design Project

  1. 1. Designing a Widget forVerizon Wireless AppUser Experience Consultant: Aya Izraely-Levi Client: Verizon Wireless
  2. 2. Outline• MyVerizon• The Data Meter• Android Widget• Design Process – Designing for understanding• Operating in a large corporation and impact on decision making and bottom line design
  3. 3. MyVerizon Self Serve ModelAll images in this presentation areprototypes and are not actual screens ofthe final product
  4. 4. Basic Flow and Interactions • Overview panel carousel • Optimized for reviewing status and taking action
  5. 5. Initial Requirements Business: No more only unlimited data packages The Data MeterLegal: Notifications to UX: Help usersusers before overage understand their data usage
  6. 6. Concept Widget launches the On click app in appropriate context: Data Usage Overview PanelUsage Details Data Packages
  7. 7. MyVerizon Interaction Pattern• Added Data Usage overview panel within the carousel
  8. 8. Android WidgetA widget can display an apps most timely or relevant information at a glance on a users home screen.Impact: Immediate dynamic info on top level 1x4 2x2 2x4
  9. 9. Designing for Understanding• Richard Soul Wurman: “Making information understandable”• Edward Tufte: “Help the viewer think about the information rather than the design”
  10. 10. Why is it Hard to Understand Data Usage?• Unlike minutes: Not in direct proportion to usage time• Download –unlike- Upload• WiFi or network ?• Verizon related activities?• Apps run in the background?• Not to mention roamingVisualizations that support understanding the above were designed in additional pages of the app
  11. 11. Widget SpecsGoal: Communicate status• Usage – Info: Usage / allowance – Color• As of (date)
  12. 12. Designing a 4x1 Widget - 1All images in this presentation areprototypes and are not actual screens ofthe final product
  13. 13. Designing a 4x1 Widget - 1Branding people Click to refresh are happy indication White on Yellow: Handle to Legibility issues encourage a click On high usage: becomes a big red blob
  14. 14. Designing a 4x1 Widget - 2
  15. 15. Designing a 4x1 Widget - 2Data icon: Branding people not as happy Status color is being reinforced Increased size of usage info Shorter text + date (mm/dd/yy)
  16. 16. Lets Compare: 1,2,and 3123
  17. 17. Lets Compare: 1,2,and 312 2 images too much: Verizon Wireless branding with the data icon3 Note the time stamp in addition to the date
  18. 18. 4x1 Vs. 1x1• Afforded more details to be displayed and an indication to click to update• Users recognized the 4x1 as a different element than app – New technology – users are still learning, single cell images on screen are recognized as apps – Even our graphic designers produced these app icons as widget designs
  19. 19. Boxed into the 1x1 Cell Minimizing the specs
  20. 20. Boxed into the 1x1 Cell Minimizing the specs Temporary No color direction
  21. 21. Boxed into the 1x1 Cell Minimizing the specs Temporary No color directionFinalDesign
  22. 22. Widget Design - Lessons Learned• Carefully consider buttons on widget: For our 1x1 – none, respect the minimal tapping space required and define buttons• Make it Simple! Display the most important element and make sure it’s clearly displayed• Provide Visual design that supports the details In our case: Color and Size supported the numerical info• Think about the next step after the click: What’s the user’s context? Sending the user to the default app landing page or a specific context in the app?• Test, Test & Test the design for all use cases: So many devices/sizes/resolutions…The proof is in the pudding We had to test that digits fit into the widget and be legible in all usage scenarios
  23. 23. Within a Large Corporation: Lots of Voices and Agendas• What units we talk? To be consistent with the corp or clearer to user in this context?• 3G widget is updated only upon click (only 4G is real time) Not what would be expected of a widget Even upon click data is synched and therefore updated only 3 times a day• Why would users use a data meter for 3G where currently all plans are unlimited?• Temporary “No colors” direction: When corp do not want to communicate a red-light to users
  24. 24. Good Ideas are (Sometimes) Not Relevant
  25. 25. Thank you ~~Thanks to the Verizon Wireless Dev and Marketing Product teams and RGA for the visual design