User Experience Documentation - Lime.com
0 likes422 views
The document provides user experience documentation for redesigning the Lime.com website. Key changes to the design include reorganizing content to reduce redundancy and better reflect user needs, adding section landing pages to explain product lines, simplifying interfaces, and structuring content for easy navigation on desktop, tablet, and mobile. The redesigned navigation and content architecture aim to help users complete tasks easily while supporting Lime's marketing goals.
![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](https://image.slidesharecdn.com/limeuxpresentationv2-161029031241/85/User-Experience-Documentation-Lime-com-2-320.jpg)
![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]](https://image.slidesharecdn.com/limeuxpresentationv2-161029031241/85/User-Experience-Documentation-Lime-com-13-320.jpg)
User Experience Documentation - Lime.com
- 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
- 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
- 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
- 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