User Interaction Design Proposal Diageo - Mosaic - Intranet portal The purpose of this document is to propose a better and improved user experience of the current system. The UI mock ups and flowcharts appearing in this document are based on available offline screen shots of current application. They may not exactly match with detail requirements and need more accurate analysis while developing the actual system. Interactions and design framework therefore should be treated as conceptual.
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
User Interaction Design ProposalDiageo - Mosaic - Intranet portal
The purpose of this document is to propose a better and improved user experience of the current system. The UI mock ups and flowcharts appearing in this document are based on available offline screen shots of current application. They may not exactly match with detail requirements and need more accurate analysis while developing the actual system. Interactions and design framework therefore should be treated as conceptual.
A. User experience goal
Mosaic is an intranet portal which is a collection of private information within an organization. This is to facilitate communication between people or work groups to improve the data sharing capability and overall knowledge base of an organization's Employees.
Area of improvements :
There are three significant areas Mosaic needs quite a broad UX improvement:
- Redesigning of Information Architecture (mainly navigation and interaction) - Clear and appropriate content /taxonomy - Minimalistic visual design and aesthetical improvement
The purpose of this project is to replace the existing Mosaic portal in order to address the current drawbacks, provide the foundation to support the future requirements for the Intranet.
B. Target User
- Diageo's Employee
- Stakeholders
- Diageo's Brand executives
Scope
Based on reviewing the existing page flow, the proposed navigation as follows:
Navigation
1st Level
2nd Level
0.0
Home
1.2
Business
1.1
Operations
1.3
Organisation
1.4
Communities
1.5
Newsroom
1.6
Resources
1.6.1
Global Directory
1.6.2
Guidelines
1.6.3
Library
1.6.4
Glossary
1.3.1
History & Heritage
1.3.2
Structure
1.3.3
Values
1.3.4
Procurement
1.3.5
Performance
1.1.1Global
Business Service
1.1.2
Human Resource
1.1.3
Finance
1.1.4
Sales & Marketing
1.1.5
Legal & Security
1.2.1
Our presence / Units
1.2.2
Product Supply
https://intranet.diageo/home Search...
Diageo Mosaic _ x
Mosaic
Footer (TBD)
1200 px
Prime viewing area : 880 px Menu and navigation area : 320 px
Share Price
Highlights New s Events
AGM documents 2012 - Proxy formShareholders or employees in certain share schemes or...more
Performance ReportShareholders or employees in certain share schemes or...more
In Focus
2012 Annual Report Launch
Shareholders or employees in certain share schemes or...more
Competitors ReportShareholders or employees in certain share schemes or...more
In Industry
Emerging Markets Drive Sales and Profits at DiageoBuoyed by strong growth in emerging markets, particularly by its Scotch whisky brands...more
Diageo Carbon Emissions and Water Usage Improve
Shareholders or employees in certain share schemes or...more
In Press
Watch / Listen
Performance Summary in current year
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
External Links
1 2 5......
Samita
Lorem ipsum dolor sit amet, consectetur adipisicing elit.Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Lorem ipsum
Top Stories
Annual Report 2012
Lorem ipsum dolor sit amet, consectetur adipisicing elit.Lorem ipsum dolor sit amet, consectetur adipisicing elit.Lorem ipsum dolor sit amet, consectetur adipisicing elit.Lorem ipsum dolor sit amet, consectetur adipisicing elit Shareholders or employees in certain share schemes or.
SEP 18 19 20 21 22 23 25 2624
OperationsGlobal Business Service
Human Resource
Finance
Sales & Marketing
Legal & Security
OrganisationHistory & Heritage
Structure
Values
Procurement
Performance
BusinessOur Presence / Units
Product Supply
ResourcesGlobal Directory
Guidelines
Communities
Newsroom
Library
Glossary
...more
1 2 5......
Today's discussion board
Lorem ipsum dolor sit amet consectetur adipisicing elit.?
comments
Comments view
Brands
My Community
My Documents
My Favorites
view more in media center >>
view more in newsroom >>
Lorem ipsum dolor sit amet consectetur adipisicing elit.Lorem ipsum dolor sit amet consectetur adipisicing elit.
view more in business >>
Look up Group activity In Market
Wireframe - Landing page
Search...
Diageo Mosaic _ x
Mosaic
Page fold (at 900px)
Footer (TBD)
1200 px
Prime viewing area : 880 px Menu and navigation area : 320 px
Share Price
Corporate Relations
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Related Links
Look up Group activity In Market Samita
Lorem ipsum dolor sit amet, consectetur adipisicing elit.Lorem ipsum dolor sit amet, consectetur adipisicing elit.Lorem ipsum dolor sit amet, consectetur adipisicing elit.Lorem ipsum dolor sit amet, consectetur adipisicing elit Shareholders or employees in certain share schemes or.
OperationsGlobal Business Service
Human Resource
FinanceSales & Marketing
Legal & Security
OrganisationHistory & Heritage
Structure
Values
Procurement
Performance
BusinessOur Presence / Units
Product Supply
ResourcesGlobal DirectoryGuidelines
Communities
Newsroom
Library
Glossary
Today's discussion board
Lorem ipsum dolor sit amet consectetur adipisicing elit.?
comments
Comments view
Brands
Lorem ipsum dolor sit amet consectetur adipisicing elit.Lorem ipsum dolor sit amet consectetur adipisicing elit.
read more >>
Home >> Human Resource
Look at Information
Location: Select Location
Service: Select Service FilterSystem: Select System
Policy: Select Policy
Our Initiation
Lorem ipsum dolor sit amet, consectetur adipisicing elit.Lorem ipsum dolor sit amet, consectetur adipisicing elit.Lorem ipsum dolor sit amet, consectetur adipisicing elit.Lorem ipsum dolor sit amet, consectetur adipisicing elit Shareholders or employees in certain share schemes or.Lorem ipsum dolor sit amet, consectetur adipisicing elit.Lorem ipsum dolor sit amet, consectetur adipisicing elit.Lorem ipsum dolor sit amet, consectetur adipisicing elit.Lorem ipsum dolor sit amet, consectetur adipisicing elit Shareholders or employees in certain share schemes or.
Training Programe
adipisicing elit.Lorem ipsum dolor sit amet, consectetur adipisicing elit.Lorem ipsum dolor sit amet, consectetur adipisicing elit Shareholders or employees in certain share schemes or
Lorem ipsum dolor sit amet, consectetur adipisicing elit.Lorem ipsum dolor sit amet, consectetur adipisicing elit.Lorem ipsum dolor sit amet, consectetur adipisicing elit.Lorem ipsum dolor sit amet,
Lorem ipsum dolor sit amet, consectetur adipisicing elit.Lorem ipsum dolor sit amet, consectetur adipisicing elit.Lorem ipsum dolor sit amet, consectetur adipisicing elit.Lorem ipsum dolor sit amet,
ipsum dolor sit amet, consectetur adipisicing elit.Lorem ipsum dolor sit amet, consectetur adipisicing elit.Lorem ipsum dolor sit amet,
Summary
Lorem ipsum dolor sit amet consectetur adipisicing elit.Lorem ipsum dolor sit amet consectetur adipisicing elit.Lorem ipsum dolor sit amet consectetur adipisicing elit.Lorem ipsum dolor sit amet consectetur adipisicing elit.
Employee EngagementLorem ipsum dolor sit amet consectetur adipisicing elit.Lorem ipsum dolor sit amet consectetur adipisicing elit.dolor sit amet, consectetur adipisicing elit.Lorem ipsum dolor sit amet, consectetur adipisicing elit.Lorem ipsum dolor sit amet,
ipsum dolor sit amet, consectetur adipisicing elit.Lorem ipsum dolor sit amet,
read more >>
Other ProgramesLorem ipsum dolor sit amet consectetur adipisicing elit.Lorem ipsum dolor sit amet consectetur adipisicing elit.
Lorem ipsum dolor sit amet consectetur adipisicing
Wireframe - Inner page
Visual Design - Landing page
Visual Design - Specification
Visual Design - Specification...
Rationalizing proposed design for MS SharePoint development
The purpose of this document is an effort of evaluating the propose design for development under MS SharePoint CMS environment. We are trying to rationalize various design modules and patterns into Sharepoint web parts, OOTB, Visual webparts either as reusable or customs component to be fit according to our proposal.
Master page LayoutA
B C D
E
25% 20%55%
5%What are master pages?Master pages are a feature of ASP.NET 2.0; they work the same way in Windows SharePoint Services 3.0 and Office SharePoint Server 2010 as they do in ASP.NET 2.0. Using master pages, you can create a single page template and then use that template as the basis for multiple pages, instead of having to build each new page from scratch.
CustomizationWhile the sample master pages are fully functional and usable out-of-the-box, they can also be custom tailored or built upon to suit as per the design. This is one of the main goals of these sample master pages, to provide an example of the site-wide design and functionality control you have when applying master pages to SharePoint sites
A Header - Fixed layout throughout the application Vertical space approx. 5%
BLeft navigation - Fixed layout throughout the application but the content will change depends on pagesHorizontal space approx. 25%
CMain content area- Variable layout ( at times it may extends till the right end in absence of right content area ) throughout the application and content will change in all pages. Should support lazy loading. Horizontal space approx. 55%
DRight content area- Variable layout. It may not be present in all pages by default. However use will able to bring it down by clicking of User name (Samita) button. Content will not change in all pages. Horizontal space approx. 20%
E Footer- Fixed corporate footerVertical space approx: TBD
A
B C D
25% 20%55%
5%
Header ( Visual web part ) A
List of UI controls may use
Logo : Image
Search Box: Auto suggest text box Magnifier icon will come through CSS
Buttons: Style can be achieved through CSS3Customizable by user What is customizable ? Button appearance and label Re-usable component
Notification overlay : CSS DIVRe-usable component
1
3
2
4
A
Left navigation - Web part
B
25%
Share lookup: Web part - Dynamic text, visual style controlled through CSS. May need to add hyper link
Navigation: Web part - (Navigation may expand / vary )Re-usable
a) Navigation title - Dynamic textb) hyper link - Dynamic textc) Number box - Dynamic textd) separator line - Static imagee) Arrow graphics - Static imagef) Background texture - CSS 3 pattern
*Visual style can be controlled through CSS.
Discussion board: Web part - A special POLL widget need to be build
a) Title - Dynamic textb) Subtitle - Dynamic text (May be a random text)c) Text box - Dynamic text aread) Comment Button- HTML buttone) View link- Hyper link
*Visual style can be controlled through CSS.
BRAND: Web part - Thumbnail based external image linkRe-usable
External links: Web part - Thumbnail based external image linkRe-usable
1
2
3
4
5
B
Main content area
C
Timeline Slider: Web part AJAXComponent can be Re-usable
1
2Top story: Web part Re-usable
This section contains: a) Section header - Dynamic textb) Body text - should be limited by number of character to balance the layout. c) Thumbnail image - Dynamic imaged) Button - Reusable CSS button e) Pagination dots : if more than one top story (Reusable)f) Notification overlay - Reusable DIV same as header section
a
bc
d
e
f
This section displays several highlights sub containers among them 3 are visible at one time.
a1) In focus : Highlight sub-container - Customizable and reusable
a2) In Industry: Highlight sub-container - Customizable and reusable
a3) In press - Highlight sub-container - Customizable and reusable
b) Pagination dots : if more than one top story (Reusable)
a1 a2 a3
b
Customizable subsection title background and icon
Customizable article title ( limited to number of characters )
Image thumbnail : Customizable with fixed size
Customizable article content ( limited to number of characters )
Rating star : reusable component
Button : reusable component
Number of view overlay - Reusable
3Highlights: Web part Re-usable
Main content area- 2
C
Watch and listen: Web part with dynamic streamingRe-usable
4
This section contains:
a) Section header - Dynamic textb) Video with playback control or image carousel (Reusable)c) Photo/video news sectiond) Pagination dots : if more than one top story (Reusable)
a
bc
d
f
5Graph and chart component Web part
May need to use a grid/table component Re-usable
a
b
c
d
Customizable sub header with character limit
Customizable photo/video article with character limit
Reusable image/video carousel
a
b
c
d
This section contains:
a) Section header - Dynamic textb) Section subtitle (Reusable)c) HTML 5 Chart and graph component (interactive javascript based)http://www.highcharts.com/demo/
d) Pagination dots : if more than one top story (Reusable)
Right Content area - Web part
D
Right content area- Variable layout. It may not be present in all pages by default. However use will able to bring it down by clicking of User name (Samita) button. Content will not change in all pages. Horizontal space approx. 20%
My info: Web part - Visual style controlled through CSS. May need to add hyper link
a) Alert and notification overlay - Reusable b) Title - Dynamic textc) Email and other information - Dynamic text
1
My Notification: Web part - 2
My community: Web part - included chat program
a) Title - Dynamic textb) Sub title- Dynamic textc) Thumbnail image, Name and designation - Dynamic text and imaged) Chat box e) Status bubble - dynamic image
*Visual style can be controlled through CSS.
3
My document : Web part - included document upload functionality
a) Title - Dynamic textb) Document name, icon and separator - Dynamic text and imagec) Upload box - HTML file upload component
*Visual style can be controlled through CSS.
4
My Favourite : Web part - a) Title - Dynamic textb) Document name, icon and separator - Dynamic text and image
5
a
b
c
d
e
a
b
c
d
a
a
b
c
a
b
Other components
Footer component1
Feedback component 2
Lazy loader 3
Customs scrollbar3
tool tip 4
Vertical time line bar
6
Success and failure toaster 5
Summary of page elements
Global UI components ( applicable to all pages )Sl. No12
NameButtonCheck box
3 Drop down4 Radio5 Text box and text area 6 File upload 7 Hyperlink8 Image link9 Search box10 Notification overlay11 tool tip12 Accordion 13 Video box14 Carousel 15 Alert/Notification message toaster
17 Scrollbar 18 Lazy loader 19 Feedback ribbon20 Timeline slider 21 Pagination bubble
16 light box / Modal po pup
22 Separator 23 Thumbnails 24 Print window25 Progress bar / loader
Global webparts Sl. No12
Custom web parts HeaderLeft nav
3 Global Discussion board4 Image hyperlink ( Both Brand and External link )5 Top story6 Highlight7 Watch and Listen8 Report9 User profile10 Community11 Community chat12 My Document13 My Favourite14 Carousel 15 Inner page content area template - We may need to
create 2-3 type depends on content
Reusable YesYesOOTBYesIf required YESIf required - YESIf required reuse fully or partiallyYESTBDTBDTBDIf required YESIf required YES
If required reuse fully or partially
End of document
Related Documents
