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 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
Notes• Personaswerecreated
basedonseveralworkse-sionswithkeyLimestake-holders.
User Personas
Personal Vertical
Page 4
Page 5
NotesContenthasbeenreorganizedtobetterreflectneedsofusersandtoreduceredundancy.
Design• ProductSectionsnowhavea
homepagewheretheprod-uctlinecanbeexplained,shortercontentcanliveandpromotionscanbeintro-duced.
Sitemap for Personal Vertical
Page 6
NotesHomepagemusthelpuserswhohaveataskinmindtocompletethattaskeasilyaswellassupportLimeinpro-motingproducts.
Design• Atabbedmarqueeallows
usersmorecontrolofpro-motionstheyseeandpre-ventspromotionsattheendofthemarqueefrombeingoverlooked
• Navigationhasbeenre-named.
• Emphasisonclaritybysim-plifyinginterfacewhencom-paredtoexistinginterface
Personal 0.0.0: Homepage
Page 7
NotesOpeninganimationofdrop-downsshouldbedownfromthetopataround500ms.Sameforclose.
Personal 0.0.0: Homepage showing drop down menus
Page 8
NotesEachproductsectionhasneed-edmoreexplanationsowehavegiveneachsectionalandingpage
Design• Simplegraphics• Contemporarypagedesign
Personal 3.0.0: Typical Section Landing Page (Shown in Browser View)
Page 9
NotesThepageisdividedintoeasilyassimilatedandhighlygraphi-calproductorserviceexplana-tions.
Design• Inclusionofgraphicalvisual-
izationsorprocesseswouldbehelpfulforthisaudience.
• Pageshouldnotbesolongastorequirenavigationtools.
Personal 3.0.0: Typical Section Landing Page (Shown in Full)
Page 10
NotesSubsectionsonthecurrentsiteareclutteredwithtabsthatfragmentcontentthatcouldbebetterunderstoodifplacedtogether.
Foreachsectionwehaveor-ganizedthetabcontentintoasingletallpagewithstickynavi-gationonthelefthandside
Design• Stickynavigationelement
onlefthelpstonavigatetallpage
• Righthandcolumnsupportspromotionsandessentialcontentsuchaswheretobuyphoneandbasicfeaturesofproducts.
Personal 3.3.0 - Typical Subsection Page (Shown in Browser View)
Page 11
NotesThepageisdividedintoeasilyassimilatedandhighlygraphi-calproductorserviceexplana-tions.
Promotionsarelocatedinthesubsectionstheypertaintoratherthaninaseparate“Promotions”section.
Design• Contentisinblocksbuiltand
arrangedinCMS.
Personal 3.3.0 - Typical Subsection Page (Shown in Full)
Page 12
NotesPromotionsarelocatedwithintheirrelatedsubsectionsratherthaninaseparate“Promotions”section.
Design• FAQisshowncollapsed.
Personal 3.3.0: Navigating Down Typical Subsection
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
NotesNavigationoflargetablesisreplacedwithdropdownselec-torswhereverpossible.Selec-tionshowsonlythedesiredinformation.
Design• Stickynavigationelement
onlefthelpstonavigatetallpage
• Pagecontentbelowtableresultsmovesdynamicallyupanddowntoaccomodatesize.
Personal 3.3.0: Navigating Down Typical Subsection
Page 15
NotesThispageshowsbothanall-textblockandablockwithatable.
Whennavigationoflargeta-blesisnotpossiblewithdropdownselectortablesshouldbeshownassimplyaspossible.
Design• Stickynavigationelement
onlefthelpstonavigatetallpage
Personal 3.3.0: Navigating Down Typical Subsection
Page 16
NotesTherewillnowbeasingleplacetochoosephones.Prepaidandpostpaidsectionswilllinktothissectionratherthanhavingphoneandplanselectorssepa-ratelywithinthem.
Design Patterns• ClearfacettedSearch
Personal 3.1.0 - Select Phone: Phones Subsection Page (Shown in Browser View)
Page 17
Personal 3.1.0: Phones Subsection Page (Shown in Full)
Page 18
NotesInthecurrentsiteitisdifficulttounderstandthefeaturesofaselectedphoneortosaveinfor-mationformakingapurchase.
Wehavefixedthiswithastan-dardproductdetailpage.
Design• Roomforfeaturecontent• Simpleformallowsconsum-
ertopostinformationaboutphonetotheiremailforlaterreviewandtoLimesalesrepresentativestocompletetransaction.
Personal 3.1.0 - Phone Detail Page
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
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
NotesNewsispresentedinachrono-logicalcolumnthatiseasytonavigatebyyearaswellassearch.
Design• Simplesinglefacetsearch
(year)• Introductioncopyallows
marketingtoreinforcemes-saging.
Personal 8.1.3: News Page
Page 22
NotesNewsarticleispresentedinaneasytoreadformat.
Design• Simplelayout• ClearlinkbacktoNews
homepageallowsquickmovementbacktootherarticles.
Personal 8.1.3: News Detail Page
Business Vertical
Page 23
Page 24
Notes
Sitemap for Business Vertical
Page 25
NotesHomepagemusthelpuserswhohaveataskinmindtocompletethattaskeasilyaswellassupportLimeinpro-motingproducts.
Design• Atabbedmarqueeallows
usersmorecontrolofpro-motionstheyseeandpre-ventspromotionsattheendofthemarqueefrombeingoverlooked
• Navigationhasbeenre-named.
• Emphasisonclaritybysim-plifyinginterfacewhencom-paredtoexistinginterface
Business 0.0.0: Homepage
Diaspora Vertical
Page 26
Page 27
Notes
Sitemap for Diaspora Vertical
Page 28
NotesHomepagemusthelpuserswhohaveataskinmindtocompletethattaskeasilyaswellassupportLimeinpro-motingproducts.
Design• Atabbedmarqueeallows
usersmorecontrolofpro-motionstheyseeandpre-ventspromotionsattheendofthemarqueefrombeingoverlooked
• Navigationhasbeenre-named.
• Emphasisonclaritybysim-plifyinginterfacewhencom-paredtoexistinginterface
Diaspora 0.0.0: Homepage
Mobile
Page 29
Page 30
NotesContentisarchitectedtofloweasilyasthewebsiteisseenacrossdifferentplatforms,fromdesktoptotablettomobile.
Design• Bootstrapgridunderliesall
pagedesigns.
Mobile: Page Level Content Architecture.
Page 31
NotesMobileinterfacecaterstotheuniqueandpressingneedsofthemobileusertoTopUpandquicklyfindsaleslocationsaswellasnavigatetocontent.
Design• Aflyoutmanagesprimary
settingsandprimarysectionlevelnavigationwhileon-screennavigationsupportsrapiddrilldownsintoinfor-mation.
Mobile: Navigation to Subsection Content
Page 32
NotesMobileinterfacecaterstotheuniqueandpressingneedsofthemobileusertoTopUpandquicklyfindsaleslocationsaswellasnavigatetocontent.
Design• Aflyoutmanagesprimary
settingsandprimarysectionlevelnavigationwhileon-screennavigationsupportsrapiddrilldownsintoinfor-mation
Mobile: Navigation within Subsection content
Page 33
Thank You
Top Related