User Experience Documentation - Lime.com
-
Upload
mark-waldo -
Category
Internet
-
view
114 -
download
0
Transcript of User Experience Documentation - Lime.com
![Page 1: User Experience Documentation - Lime.com](https://reader034.fdocuments.us/reader034/viewer/2022051520/5887b7841a28ab817a8b59fd/html5/thumbnails/1.jpg)
Lime.com RedesignUser Experience DocumentationVersion 2.1.1 July 1, 2014
THE & Partnership
2nd floor
75 Spring Street
New York NY 10012
www.chiandpartnersny.com
![Page 2: User Experience Documentation - Lime.com](https://reader034.fdocuments.us/reader034/viewer/2022051520/5887b7841a28ab817a8b59fd/html5/thumbnails/2.jpg)
Contents
User Personas 3
Personal Vertical 4Sitemap for Personal Vertical 5Personal 0.0.0: Homepage 6Personal 0.0.0: Homepage showing drop down menus 7Personal 3.0.0: Typical Section Landing Page (Shown in Browser View) 8Personal 3.0.0: Typical Section Landing Page (Shown in Full) 9Personal 3.3.0 - Typical Subsection Page (Shown in Browser View) 10Personal 3.3.0 - Typical Subsection Page (Shown in Full) 11Personal 3.3.0: Navigating Down Typical Subsection 12Personal 3.3.0: Navigating Down Typical Subsection. [FAQ is Open] 13Personal 3.3.0: Navigating Down Typical Subsection 14Personal 3.3.0: Navigating Down Typical Subsection 15Personal 3.1.0 - Select Phone: Phones Subsection Page (Shown in Browser View) 16Personal 3.1.0: Phones Subsection Page (Shown in Full) 17Personal 3.1.0 - Phone Detail Page 18Personal 3.1.0 - Select Plan: Phones Subsection Page (Shown in Browser View) 19Personal 3.1.0 - Select Plan: Phones Subsection Page (Shown in Full View) 20Personal 8.1.3: News Page 21Personal 8.1.3: News Detail Page 22
Business Vertical 23Sitemap for Business Vertical 24Business 0.0.0: Homepage 25
Diaspora Vertical 26Sitemap for Diaspora Vertical 27Diaspora 0.0.0: Homepage 28
Mobile 29Mobile: Page Level Content Architecture. 30Mobile: Navigation to Subsection Content 31
![Page 3: User Experience Documentation - Lime.com](https://reader034.fdocuments.us/reader034/viewer/2022051520/5887b7841a28ab817a8b59fd/html5/thumbnails/3.jpg)
Page 3
Notes• Personaswerecreated
basedonseveralworkse-sionswithkeyLimestake-holders.
User Personas
![Page 4: User Experience Documentation - Lime.com](https://reader034.fdocuments.us/reader034/viewer/2022051520/5887b7841a28ab817a8b59fd/html5/thumbnails/4.jpg)
Personal Vertical
Page 4
![Page 5: User Experience Documentation - Lime.com](https://reader034.fdocuments.us/reader034/viewer/2022051520/5887b7841a28ab817a8b59fd/html5/thumbnails/5.jpg)
Page 5
NotesContenthasbeenreorganizedtobetterreflectneedsofusersandtoreduceredundancy.
Design• ProductSectionsnowhavea
homepagewheretheprod-uctlinecanbeexplained,shortercontentcanliveandpromotionscanbeintro-duced.
Sitemap for Personal Vertical
![Page 6: User Experience Documentation - Lime.com](https://reader034.fdocuments.us/reader034/viewer/2022051520/5887b7841a28ab817a8b59fd/html5/thumbnails/6.jpg)
Page 6
NotesHomepagemusthelpuserswhohaveataskinmindtocompletethattaskeasilyaswellassupportLimeinpro-motingproducts.
Design• Atabbedmarqueeallows
usersmorecontrolofpro-motionstheyseeandpre-ventspromotionsattheendofthemarqueefrombeingoverlooked
• Navigationhasbeenre-named.
• Emphasisonclaritybysim-plifyinginterfacewhencom-paredtoexistinginterface
Personal 0.0.0: Homepage
![Page 7: User Experience Documentation - Lime.com](https://reader034.fdocuments.us/reader034/viewer/2022051520/5887b7841a28ab817a8b59fd/html5/thumbnails/7.jpg)
Page 7
NotesOpeninganimationofdrop-downsshouldbedownfromthetopataround500ms.Sameforclose.
Personal 0.0.0: Homepage showing drop down menus
![Page 8: User Experience Documentation - Lime.com](https://reader034.fdocuments.us/reader034/viewer/2022051520/5887b7841a28ab817a8b59fd/html5/thumbnails/8.jpg)
Page 8
NotesEachproductsectionhasneed-edmoreexplanationsowehavegiveneachsectionalandingpage
Design• Simplegraphics• Contemporarypagedesign
Personal 3.0.0: Typical Section Landing Page (Shown in Browser View)
![Page 9: User Experience Documentation - Lime.com](https://reader034.fdocuments.us/reader034/viewer/2022051520/5887b7841a28ab817a8b59fd/html5/thumbnails/9.jpg)
Page 9
NotesThepageisdividedintoeasilyassimilatedandhighlygraphi-calproductorserviceexplana-tions.
Design• Inclusionofgraphicalvisual-
izationsorprocesseswouldbehelpfulforthisaudience.
• Pageshouldnotbesolongastorequirenavigationtools.
Personal 3.0.0: Typical Section Landing Page (Shown in Full)
![Page 10: User Experience Documentation - Lime.com](https://reader034.fdocuments.us/reader034/viewer/2022051520/5887b7841a28ab817a8b59fd/html5/thumbnails/10.jpg)
Page 10
NotesSubsectionsonthecurrentsiteareclutteredwithtabsthatfragmentcontentthatcouldbebetterunderstoodifplacedtogether.
Foreachsectionwehaveor-ganizedthetabcontentintoasingletallpagewithstickynavi-gationonthelefthandside
Design• Stickynavigationelement
onlefthelpstonavigatetallpage
• Righthandcolumnsupportspromotionsandessentialcontentsuchaswheretobuyphoneandbasicfeaturesofproducts.
Personal 3.3.0 - Typical Subsection Page (Shown in Browser View)
![Page 11: User Experience Documentation - Lime.com](https://reader034.fdocuments.us/reader034/viewer/2022051520/5887b7841a28ab817a8b59fd/html5/thumbnails/11.jpg)
Page 11
NotesThepageisdividedintoeasilyassimilatedandhighlygraphi-calproductorserviceexplana-tions.
Promotionsarelocatedinthesubsectionstheypertaintoratherthaninaseparate“Promotions”section.
Design• Contentisinblocksbuiltand
arrangedinCMS.
Personal 3.3.0 - Typical Subsection Page (Shown in Full)
![Page 12: User Experience Documentation - Lime.com](https://reader034.fdocuments.us/reader034/viewer/2022051520/5887b7841a28ab817a8b59fd/html5/thumbnails/12.jpg)
Page 12
NotesPromotionsarelocatedwithintheirrelatedsubsectionsratherthaninaseparate“Promotions”section.
Design• FAQisshowncollapsed.
Personal 3.3.0: Navigating Down Typical Subsection
![Page 13: User Experience Documentation - Lime.com](https://reader034.fdocuments.us/reader034/viewer/2022051520/5887b7841a28ab817a8b59fd/html5/thumbnails/13.jpg)
Page 13
NotesAtypicalproductblockshow-ingtextandimage.FAQisalsoopen.Subsectionscanbeopenedandclosedasdesired.
Design• FAQisshownopened• ContentbelowFAQsmoves
dynamicallyupanddowntoaccomodatesize.
• Text• Image
Personal 3.3.0: Navigating Down Typical Subsection. [FAQ is Open]
![Page 14: User Experience Documentation - Lime.com](https://reader034.fdocuments.us/reader034/viewer/2022051520/5887b7841a28ab817a8b59fd/html5/thumbnails/14.jpg)
Page 14
NotesNavigationoflargetablesisreplacedwithdropdownselec-torswhereverpossible.Selec-tionshowsonlythedesiredinformation.
Design• Stickynavigationelement
onlefthelpstonavigatetallpage
• Pagecontentbelowtableresultsmovesdynamicallyupanddowntoaccomodatesize.
Personal 3.3.0: Navigating Down Typical Subsection
![Page 15: User Experience Documentation - Lime.com](https://reader034.fdocuments.us/reader034/viewer/2022051520/5887b7841a28ab817a8b59fd/html5/thumbnails/15.jpg)
Page 15
NotesThispageshowsbothanall-textblockandablockwithatable.
Whennavigationoflargeta-blesisnotpossiblewithdropdownselectortablesshouldbeshownassimplyaspossible.
Design• Stickynavigationelement
onlefthelpstonavigatetallpage
Personal 3.3.0: Navigating Down Typical Subsection
![Page 16: User Experience Documentation - Lime.com](https://reader034.fdocuments.us/reader034/viewer/2022051520/5887b7841a28ab817a8b59fd/html5/thumbnails/16.jpg)
Page 16
NotesTherewillnowbeasingleplacetochoosephones.Prepaidandpostpaidsectionswilllinktothissectionratherthanhavingphoneandplanselectorssepa-ratelywithinthem.
Design Patterns• ClearfacettedSearch
Personal 3.1.0 - Select Phone: Phones Subsection Page (Shown in Browser View)
![Page 17: User Experience Documentation - Lime.com](https://reader034.fdocuments.us/reader034/viewer/2022051520/5887b7841a28ab817a8b59fd/html5/thumbnails/17.jpg)
Page 17
Personal 3.1.0: Phones Subsection Page (Shown in Full)
![Page 18: User Experience Documentation - Lime.com](https://reader034.fdocuments.us/reader034/viewer/2022051520/5887b7841a28ab817a8b59fd/html5/thumbnails/18.jpg)
Page 18
NotesInthecurrentsiteitisdifficulttounderstandthefeaturesofaselectedphoneortosaveinfor-mationformakingapurchase.
Wehavefixedthiswithastan-dardproductdetailpage.
Design• Roomforfeaturecontent• Simpleformallowsconsum-
ertopostinformationaboutphonetotheiremailforlaterreviewandtoLimesalesrepresentativestocompletetransaction.
Personal 3.1.0 - Phone Detail Page
![Page 19: User Experience Documentation - Lime.com](https://reader034.fdocuments.us/reader034/viewer/2022051520/5887b7841a28ab817a8b59fd/html5/thumbnails/19.jpg)
Page 19
NotesThetransitiontotheMyPlanin-terfaceisjarring,theinterfaceissimilarenoughtotheotherphoneselectortocreateconfu-sion,andtheinterfaceneedsimprovements
Design• Slidersusedconsistentlyto
makeselections.• Slidersandplaninforma-
tionorganizedtoalloweasylineofsitethroughessentialinformation.
• Formforcontactingsalesisintegratedintothepagesothereisnobreaktoamodal
• Dynamicallychangingplanandpricingislainoutmoreclearly.
Personal 3.1.0 - Select Plan: Phones Subsection Page (Shown in Browser View)
![Page 20: User Experience Documentation - Lime.com](https://reader034.fdocuments.us/reader034/viewer/2022051520/5887b7841a28ab817a8b59fd/html5/thumbnails/20.jpg)
Page 20
NotesThetransitiontotheMyPlanin-terfaceisjarring,theinterfaceissimilarenoughtotheotherphoneselectortocreateconfu-sion,andtheinterfaceneedsimprovements
Design• Slidersusedconsistentlyto
makeselections.• Slidersandplaninforma-
tionorganizedtoalloweasylineofsitethroughessentialinformation.
• Formforcontactingsalesisintegratedintothepagesothereisnobreaktoamodal
• Dynamicallychangingplanandpricingislainoutmoreclearly.
Personal 3.1.0 - Select Plan: Phones Subsection Page (Shown in Full View)
![Page 21: User Experience Documentation - Lime.com](https://reader034.fdocuments.us/reader034/viewer/2022051520/5887b7841a28ab817a8b59fd/html5/thumbnails/21.jpg)
Page 21
NotesNewsispresentedinachrono-logicalcolumnthatiseasytonavigatebyyearaswellassearch.
Design• Simplesinglefacetsearch
(year)• Introductioncopyallows
marketingtoreinforcemes-saging.
Personal 8.1.3: News Page
![Page 22: User Experience Documentation - Lime.com](https://reader034.fdocuments.us/reader034/viewer/2022051520/5887b7841a28ab817a8b59fd/html5/thumbnails/22.jpg)
Page 22
NotesNewsarticleispresentedinaneasytoreadformat.
Design• Simplelayout• ClearlinkbacktoNews
homepageallowsquickmovementbacktootherarticles.
Personal 8.1.3: News Detail Page
![Page 23: User Experience Documentation - Lime.com](https://reader034.fdocuments.us/reader034/viewer/2022051520/5887b7841a28ab817a8b59fd/html5/thumbnails/23.jpg)
Business Vertical
Page 23
![Page 24: User Experience Documentation - Lime.com](https://reader034.fdocuments.us/reader034/viewer/2022051520/5887b7841a28ab817a8b59fd/html5/thumbnails/24.jpg)
Page 24
Notes
Sitemap for Business Vertical
![Page 25: User Experience Documentation - Lime.com](https://reader034.fdocuments.us/reader034/viewer/2022051520/5887b7841a28ab817a8b59fd/html5/thumbnails/25.jpg)
Page 25
NotesHomepagemusthelpuserswhohaveataskinmindtocompletethattaskeasilyaswellassupportLimeinpro-motingproducts.
Design• Atabbedmarqueeallows
usersmorecontrolofpro-motionstheyseeandpre-ventspromotionsattheendofthemarqueefrombeingoverlooked
• Navigationhasbeenre-named.
• Emphasisonclaritybysim-plifyinginterfacewhencom-paredtoexistinginterface
Business 0.0.0: Homepage
![Page 26: User Experience Documentation - Lime.com](https://reader034.fdocuments.us/reader034/viewer/2022051520/5887b7841a28ab817a8b59fd/html5/thumbnails/26.jpg)
Diaspora Vertical
Page 26
![Page 27: User Experience Documentation - Lime.com](https://reader034.fdocuments.us/reader034/viewer/2022051520/5887b7841a28ab817a8b59fd/html5/thumbnails/27.jpg)
Page 27
Notes
Sitemap for Diaspora Vertical
![Page 28: User Experience Documentation - Lime.com](https://reader034.fdocuments.us/reader034/viewer/2022051520/5887b7841a28ab817a8b59fd/html5/thumbnails/28.jpg)
Page 28
NotesHomepagemusthelpuserswhohaveataskinmindtocompletethattaskeasilyaswellassupportLimeinpro-motingproducts.
Design• Atabbedmarqueeallows
usersmorecontrolofpro-motionstheyseeandpre-ventspromotionsattheendofthemarqueefrombeingoverlooked
• Navigationhasbeenre-named.
• Emphasisonclaritybysim-plifyinginterfacewhencom-paredtoexistinginterface
Diaspora 0.0.0: Homepage
![Page 29: User Experience Documentation - Lime.com](https://reader034.fdocuments.us/reader034/viewer/2022051520/5887b7841a28ab817a8b59fd/html5/thumbnails/29.jpg)
Mobile
Page 29
![Page 30: User Experience Documentation - Lime.com](https://reader034.fdocuments.us/reader034/viewer/2022051520/5887b7841a28ab817a8b59fd/html5/thumbnails/30.jpg)
Page 30
NotesContentisarchitectedtofloweasilyasthewebsiteisseenacrossdifferentplatforms,fromdesktoptotablettomobile.
Design• Bootstrapgridunderliesall
pagedesigns.
Mobile: Page Level Content Architecture.
![Page 31: User Experience Documentation - Lime.com](https://reader034.fdocuments.us/reader034/viewer/2022051520/5887b7841a28ab817a8b59fd/html5/thumbnails/31.jpg)
Page 31
NotesMobileinterfacecaterstotheuniqueandpressingneedsofthemobileusertoTopUpandquicklyfindsaleslocationsaswellasnavigatetocontent.
Design• Aflyoutmanagesprimary
settingsandprimarysectionlevelnavigationwhileon-screennavigationsupportsrapiddrilldownsintoinfor-mation.
Mobile: Navigation to Subsection Content
![Page 32: User Experience Documentation - Lime.com](https://reader034.fdocuments.us/reader034/viewer/2022051520/5887b7841a28ab817a8b59fd/html5/thumbnails/32.jpg)
Page 32
NotesMobileinterfacecaterstotheuniqueandpressingneedsofthemobileusertoTopUpandquicklyfindsaleslocationsaswellasnavigatetocontent.
Design• Aflyoutmanagesprimary
settingsandprimarysectionlevelnavigationwhileon-screennavigationsupportsrapiddrilldownsintoinfor-mation
Mobile: Navigation within Subsection content
![Page 33: User Experience Documentation - Lime.com](https://reader034.fdocuments.us/reader034/viewer/2022051520/5887b7841a28ab817a8b59fd/html5/thumbnails/33.jpg)
Page 33
Thank You