UX presentation.

1. Lime.com Redesign
User Experience Documentation
Version 2.1.1 July 1, 2014
THE & Partnership
2nd floor
75 Spring Street
New York NY 10012
www.chiandpartnersny.com

2. Contents
User Personas 3
Personal Vertical 4
Sitemap for Personal Vertical 5
Personal 0.0.0: Homepage 6
Personal 0.0.0: Homepage showing drop down menus 7
Personal 3.0.0: Typical Section Landing Page (Shown in Browser View) 8
Personal 3.0.0: Typical Section Landing Page (Shown in Full) 9
Personal 3.3.0 - Typical Subsection Page (Shown in Browser View) 10
Personal 3.3.0 - Typical Subsection Page (Shown in Full) 11
Personal 3.3.0: Navigating Down Typical Subsection 12
Personal 3.3.0: Navigating Down Typical Subsection. [FAQ is Open] 13
Personal 3.3.0: Navigating Down Typical Subsection 14
Personal 3.3.0: Navigating Down Typical Subsection 15
Personal 3.1.0 - Select Phone: Phones Subsection Page (Shown in Browser View) 16
Personal 3.1.0: Phones Subsection Page (Shown in Full) 17
Personal 3.1.0 - Phone Detail Page 18
Personal 3.1.0 - Select Plan: Phones Subsection Page (Shown in Browser View) 19
Personal 3.1.0 - Select Plan: Phones Subsection Page (Shown in Full View) 20
Personal 8.1.3: News Page 21
Personal 8.1.3: News Detail Page 22
Business Vertical 23
Sitemap for Business Vertical 24
Business 0.0.0: Homepage 25
Diaspora Vertical 26
Sitemap for Diaspora Vertical 27
Diaspora 0.0.0: Homepage 28
Mobile 29
Mobile: Page Level Content Architecture. 30
Mobile: Navigation to Subsection Content 31

3. Page 3
Notes
• Personas were created
based on several work se-
sions with key Lime stake-
holders.
User Personas

4. Personal Vertical
Page 4

5. Page 5
Notes
Content has been reorganized
to better reflect needs of users
and to reduce redundancy.
Design
• Product Sections now have a
home page where the prod-
uct line can be explained,
shorter content can live and
promotions can be intro-
duced.
Sitemap for Personal Vertical

6. Page 6
Notes
Home page must help users
who have a task in mind to
complete that task easily as
well as support Lime in pro-
moting products.
Design
• A tabbed marquee allows
users more control of pro-
motions they see and pre-
vents promotions at the end
of the marquee from being
overlooked
• Navigation has been re-
named.
• Emphasis on clarity by sim-
plifying interface when com-
pared to existing interface
Personal 0.0.0: Homepage

7. Page 7
Notes
Opening animation of drop-
downs should be down from the
top at around 500ms. Same for
close.
Personal 0.0.0: Homepage showing drop down menus

8. Page 8
Notes
Each product section has need-
ed more explanation so we have
given each section a landing
page
Design
• Simple graphics
• Contemporary page design
Personal 3.0.0: Typical Section Landing Page (Shown in Browser View)

9. Page 9
Notes
The page is divided into easily
assimilated and highly graphi-
cal product or service explana-
tions.
Design
• Inclusion of graphical visual-
izations or processes would
be helpful for this audience.
• Page should not be so long
as to require navigation
tools.
Personal 3.0.0: Typical Section Landing Page (Shown in Full)

10. Page 10
Notes
Subsections on the current
site are cluttered with tabs that
fragment content that could
be better understood if placed
together.
For each section we have or-
ganized the tab content into a
single tall page with sticky navi-
gation on the left hand side
Design
• Sticky navigation element
on left helps to navigate tall
page
• Right hand column supports
promotions and essential
content such as where to buy
phone and basic features of
products.
Personal 3.3.0 - Typical Subsection Page (Shown in Browser View)

11. Page 11
Notes
The page is divided into easily
assimilated and highly graphi-
cal product or service explana-
tions.
Promotions are located in the
subsections they pertain to
rather than in a separate
“Promotions” section.
Design
• Content is in blocks built and
arranged in CMS .
Personal 3.3.0 - Typical Subsection Page (Shown in Full)

12. Page 12
Notes
Promotions are located within
their related subsections rather
than in a separate
“Promotions” section.
Design
• FAQ is shown collapsed.
Personal 3.3.0: Navigating Down Typical Subsection

13. Page 13
Notes
A typical product block show-
ing text and image. FAQ is also
open. Sub sections can be
opened and closed as desired.
Design
• FAQ is shown opened
• Content below FAQs moves
dynamically up and down to
accomodate size.
• Text
• Image
Personal 3.3.0: Navigating Down Typical Subsection. [FAQ is Open]

14. Page 14
Notes
Navigation of large tables is
replaced with drop down selec-
tors wherever possible. Selec-
tion shows only the desired
information.
Design
• Sticky navigation element
on left helps to navigate tall
page
• Page content below table
results moves dynamically
up and down to accomodate
size.
Personal 3.3.0: Navigating Down Typical Subsection

15. Page 15
Notes
This page shows both an all-
text block and a block with a
table.
When navigation of large ta-
bles is not possible with drop
down selector tables should be
shown as simply as possible.
Design
• Sticky navigation element
on left helps to navigate tall
page
Personal 3.3.0: Navigating Down Typical Subsection

16. Page 16
Notes
There will now be a single place
to choose phones. Prepaid and
post paid sections will link to
this section rather than having
phone and plan selectors sepa-
rately within them.
Design Patterns
• Clear facetted Search
Personal 3.1.0 - Select Phone: Phones Subsection Page (Shown in Browser View)

17. Page 17
Personal 3.1.0: Phones Subsection Page (Shown in Full)

18. Page 18
Notes
In the current site it is difficult
to understand the features of a
selected phone or to save infor-
mation for making a purchase.
We have fixed this with a stan-
dard product detail page.
Design
• Room for feature content
• Simple form allows consum-
er to post information about
phone to their email for later
review and to Lime sales
representatives to complete
transaction.
Personal 3.1.0 - Phone Detail Page

19. Page 19
Notes
The transition to the MyPlan in-
terface is jarring, the interface
is similar enough to the other
phone selector to create confu-
sion, and the interface needs
improvements
Design
• Sliders used consistently to
make selections.
• Sliders and plan informa-
tion organized to allow easy
line of site through essential
information.
• Form for contacting sales is
integrated into the page so
there is no break to a modal
• Dynamically changing plan
and pricing is lain out more
clearly.
Personal 3.1.0 - Select Plan: Phones Subsection Page (Shown in Browser View)

20. Page 20
Notes
The transition to the MyPlan in-
terface is jarring, the interface
is similar enough to the other
phone selector to create confu-
sion, and the interface needs
improvements
Design
• Sliders used consistently to
make selections.
• Sliders and plan informa-
tion organized to allow easy
line of site through essential
information.
• Form for contacting sales is
integrated into the page so
there is no break to a modal
• Dynamically changing plan
and pricing is lain out more
clearly.
Personal 3.1.0 - Select Plan: Phones Subsection Page (Shown in Full View)

21. Page 21
Notes
News is presented in a chrono-
logical column that is easy to
navigate by year as well as
search.
Design
• Simple single facet search
(year)
• Introduction copy allows
marketing to reinforce mes-
saging.
Personal 8.1.3: News Page

22. Page 22
Notes
News article is presented in an
easy to read format.
Design
• Simple layout
• Clear link back to News
homepage allows quick
movement back to other
articles.
Personal 8.1.3: News Detail Page

23. Business Vertical
Page 23

24. Page 24
Notes
Sitemap for Business Vertical

25. Page 25
Notes
Home page must help users
who have a task in mind to
complete that task easily as
well as support Lime in pro-
moting products.
Design
• A tabbed marquee allows
users more control of pro-
motions they see and pre-
vents promotions at the end
of the marquee from being
overlooked
• Navigation has been re-
named.
• Emphasis on clarity by sim-
plifying interface when com-
pared to existing interface
Business 0.0.0: Homepage

26. Diaspora Vertical
Page 26

27. Page 27
Notes
Sitemap for Diaspora Vertical

28. Page 28
Notes
Home page must help users
who have a task in mind to
complete that task easily as
well as support Lime in pro-
moting products.
Design
• A tabbed marquee allows
users more control of pro-
motions they see and pre-
vents promotions at the end
of the marquee from being
overlooked
• Navigation has been re-
named.
• Emphasis on clarity by sim-
plifying interface when com-
pared to existing interface
Diaspora 0.0.0: Homepage

29. Mobile
Page 29

30. Page 30
Notes
Content is architected to flow
easily as the website is seen
across different platforms, from
desktop to tablet to mobile.
Design
• Bootstrap grid underlies all
page designs.
Mobile: Page Level Content Architecture.

31. Page 31
Notes
Mobile interface caters to the
unique and pressing needs of
the mobile user to TopUp and
quickly find sales locations as
well as navigate to content.
Design
• A fly out manages primary
settings and primary section
level navigation while on-
screen navigation supports
rapid drill downs into infor-
mation .
Mobile: Navigation to Subsection Content

32. Page 32
Notes
Mobile interface caters to the
unique and pressing needs of
the mobile user to TopUp and
quickly find sales locations as
well as navigate to content.
Design
• A fly out manages primary
settings and primary section
level navigation while on-
screen navigation supports
rapid drill downs into infor-
mation
Mobile: Navigation within Subsection content

33. Page 33
Thank You