user experience documentation - lime.com

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

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 1Personal 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

Notes• Personaswerecreated

basedonseveralworkse-sionswithkeyLimestake-holders.

User Personas

Personal Vertical

NotesContenthasbeenreorganizedtobetterreflectneedsofusersandtoreduceredundancy.

Design• ProductSectionsnowhavea

homepagewheretheprod-uctlinecanbeexplained,shortercontentcanliveandpromotionscanbeintro-duced.

Sitemap for Personal Vertical

NotesHomepagemusthelpuserswhohaveataskinmindtocompletethattaskeasilyaswellassupportLimeinpro-motingproducts.

Design• Atabbedmarqueeallows

usersmorecontrolofpro-motionstheyseeandpre-ventspromotionsattheendofthemarqueefrombeingoverlooked

• Navigationhasbeenre-named.

• Emphasisonclaritybysim-plifyinginterfacewhencom-paredtoexistinginterface

Personal 0.0.0: Homepage

NotesOpeninganimationofdrop-downsshouldbedownfromthetopataround500ms.Sameforclose.

Personal 0.0.0: Homepage showing drop down menus

NotesEachproductsectionhasneed-edmoreexplanationsowehavegiveneachsectionalandingpage

Design• Simplegraphics• Contemporarypagedesign

Personal 3.0.0: Typical Section Landing Page (Shown in Browser View)

NotesThepageisdividedintoeasilyassimilatedandhighlygraphi-calproductorserviceexplana-tions.

Design• Inclusionofgraphicalvisual-

izationsorprocesseswouldbehelpfulforthisaudience.

• Pageshouldnotbesolongastorequirenavigationtools.

Personal 3.0.0: Typical Section Landing Page (Shown in Full)

NotesSubsectionsonthecurrentsiteareclutteredwithtabsthatfragmentcontentthatcouldbebetterunderstoodifplacedtogether.

Foreachsectionwehaveor-ganizedthetabcontentintoasingletallpagewithstickynavi-gationonthelefthandside

Design• Stickynavigationelement

onlefthelpstonavigatetallpage

• Righthandcolumnsupportspromotionsandessentialcontentsuchaswheretobuyphoneandbasicfeaturesofproducts.

Personal 3.3.0 - Typical Subsection Page (Shown in Browser View)

NotesThepageisdividedintoeasilyassimilatedandhighlygraphi-calproductorserviceexplana-tions.

Promotionsarelocatedinthesubsectionstheypertaintoratherthaninaseparate“Promotions”section.

Design• Contentisinblocksbuiltand

arrangedinCMS.

Personal 3.3.0 - Typical Subsection Page (Shown in Full)

NotesPromotionsarelocatedwithintheirrelatedsubsectionsratherthaninaseparate“Promotions”section.

Design• FAQisshowncollapsed.

Personal 3.3.0: Navigating Down Typical Subsection

NotesAtypicalproductblockshow-ingtextandimage.FAQisalsoopen.Subsectionscanbeopenedandclosedasdesired.

Design• FAQisshownopened• ContentbelowFAQsmoves

dynamicallyupanddowntoaccomodatesize.

• Text• Image

Personal 3.3.0: Navigating Down Typical Subsection. [FAQ is Open]

NotesNavigationoflargetablesisreplacedwithdropdownselec-torswhereverpossible.Selec-tionshowsonlythedesiredinformation.



• Pagecontentbelowtableresultsmovesdynamicallyupanddowntoaccomodatesize.


NotesThispageshowsbothanall-textblockandablockwithatable.

Whennavigationoflargeta-blesisnotpossiblewithdropdownselectortablesshouldbeshownassimplyaspossible.




NotesTherewillnowbeasingleplacetochoosephones.Prepaidandpostpaidsectionswilllinktothissectionratherthanhavingphoneandplanselectorssepa-ratelywithinthem.

Design Patterns• ClearfacettedSearch

Personal 3.1.0 - Select Phone: Phones Subsection Page (Shown in Browser View)

Personal 3.1.0: Phones Subsection Page (Shown in Full)

NotesInthecurrentsiteitisdifficulttounderstandthefeaturesofaselectedphoneortosaveinfor-mationformakingapurchase.

Wehavefixedthiswithastan-dardproductdetailpage.

Design• Roomforfeaturecontent• Simpleformallowsconsum-

ertopostinformationaboutphonetotheiremailforlaterreviewandtoLimesalesrepresentativestocompletetransaction.

Personal 3.1.0 - Phone Detail Page

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)

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)

NotesNewsispresentedinachrono-logicalcolumnthatiseasytonavigatebyyearaswellassearch.

Design• Simplesinglefacetsearch

(year)• Introductioncopyallows

marketingtoreinforcemes-saging.

Personal 8.1.3: News Page

NotesNewsarticleispresentedinaneasytoreadformat.

Design• Simplelayout• ClearlinkbacktoNews

homepageallowsquickmovementbacktootherarticles.

Personal 8.1.3: News Detail Page

Business Vertical

Notes

Sitemap for Business Vertical






Business 0.0.0: Homepage

Diaspora Vertical

Notes

Sitemap for Diaspora Vertical






Diaspora 0.0.0: Homepage

Mobile

NotesContentisarchitectedtofloweasilyasthewebsiteisseenacrossdifferentplatforms,fromdesktoptotablettomobile.

Design• Bootstrapgridunderliesall

pagedesigns.

Mobile: Page Level Content Architecture.

NotesMobileinterfacecaterstotheuniqueandpressingneedsofthemobileusertoTopUpandquicklyfindsaleslocationsaswellasnavigatetocontent.

Design• Aflyoutmanagesprimary

settingsandprimarysectionlevelnavigationwhileon-screennavigationsupportsrapiddrilldownsintoinfor-mation.

Mobile: Navigation to Subsection Content

NotesMobileinterfacecaterstotheuniqueandpressingneedsofthemobileusertoTopUpandquicklyfindsaleslocationsaswellasnavigatetocontent.

Design• Aflyoutmanagesprimary

settingsandprimarysectionlevelnavigationwhileon-screennavigationsupportsrapiddrilldownsintoinfor-mation

Mobile: Navigation within Subsection content

Thank You

user experience documentation - lime.com

Internet