Diageo - Mosaic - Intranet portal User Interaction Design Proposal

Size: px

Start display at page:

Download "Diageo - Mosaic - Intranet portal User Interaction Design Proposal"

Gabriella Washington
6 years ago
Views:

Diageo - Mosaic - Intranet portal User Interaction Design Proposal The purpose of

offline screen shots of current application.

1 Diageo - Mosaic - Intranet portal User Interaction Design Proposal 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.

2 Scope 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

3 Navigation Based on reviewing the existing page flow, the proposed navigation as follows: 0.0 Home 1st Level Operations Business Organisation Communities Newsroom Resources 2nd Level Global Business Service Our presence / Units History & Heritage Global Directory Human Resource Product Supply Structure Guidelines Finance Values Library Sales & Marketing Procurement Glossary Legal & Security Performance

Diageo Mosaic _ x https://intranet.diageo/home Search... Mosaic Look up Group activity In Market Samita Share Price Lorem ipsum dolor sit amet, consectetur adipisicing elit.

ipsum dolor sit amet, consectetur adipisicing elit.lorem ipsum dolor sit amet, consectetur adipisicing elit.

...more SEP 18 19 20 21 22 23 24 25 26 1 2.

Global Directory Guidelines Library Glossary Today's discussion board Lorem ipsum dolor sit amet consectetur adipisicing elit.

..more view more in newsroom >> Watch / Listen 2012 Annual Report Launch Shareholders or employees in certain share schemes or.

..more Emerging Markets Drive Sales and Profits at Diageo Buoyed by strong growth in emerging markets, particularly by its Scotch whisky brands.

4 Diageo Mosaic _ x Search... Mosaic Look up Group activity In Market Samita Share Price Lorem ipsum dolor sit amet, consectetur adipisicing elit. Operations Global Business Service Human Resource Finance Sales & Marketing Legal & Security Business Our Presence / Units Product Supply 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....more SEP Organisation History & Heritage Highlights New s Events My Community Structure Values Procurement In Focus In Industry In Press Performance Communities Newsroom Resources Global Directory Guidelines Library Glossary Today's discussion board Lorem ipsum dolor sit amet consectetur adipisicing elit.? comments AGM documents Proxy form Shareholders or employees in certain share schemes or...more Performance Report Shareholders or employees in certain share schemes or...more view more in newsroom >> Watch / Listen 2012 Annual Report Launch Shareholders or employees in certain share schemes or...more Competitors Report Shareholders or employees in certain share schemes or...more Emerging Markets Drive Sales and Profits at Diageo Buoyed 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 Lorem ipsum Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. My Documents Wireframe - Landing page Comments view Brands view more in media center >> My Favorites External Links Performance Summary in current year Lorem ipsum dolor sit amet consectetur adipisicing elit.lorem ipsum dolor sit amet consectetur adipisicing elit. view more in business >> Footer (TBD) 1200 px Prime viewing area : 880 px Menu and navigation area : 320 px

Diageo Mosaic _ x Mosaic Search... Look up Group activity In Market Samita Share Price Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Performance Home >> Human Resource Look at Information Location: Select Location System: Select System Our Initiation Policy: Select Policy Service: Select Service Filter Lorem ipsum dolor sit amet,

Lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, adipisicing elit.lorem ipsum dolor sit amet, consectetur adipisicing elit.

5 Diageo Mosaic _ x Mosaic Search... Look up Group activity In Market Samita Share Price Lorem ipsum dolor sit amet, consectetur adipisicing elit. Operations Global Business Service Human Resource Finance Sales & Marketing Legal & Security Business Our Presence / Units Product Supply Organisation History & Heritage Structure Values Procurement Performance Home >> Human Resource Look at Information Location: Select Location System: Select System Our Initiation Policy: Select Policy Service: Select Service Filter 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.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. 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 Communities Training Programe Newsroom Resources Global Directory Guidelines Library Glossary Today's discussion board 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 Wireframe - Inner page Lorem ipsum dolor sit amet consectetur adipisicing elit.? comments Page fold (at 900px) Comments Brands view Corporate Relations 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.lorem ipsum dolor sit amet consectetur adipisicing elit.lorem ipsum dolor sit amet consectetur adipisicing elit. Employee Engagement Lorem 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, Related Links ipsum dolor sit amet, consectetur adipisicing elit.lorem ipsum dolor sit amet, read more >> read more >> Other Programes Lorem ipsum dolor sit amet consectetur adipisicing elit.lorem ipsum dolor sit amet consectetur adipisicing elit. Lorem ipsum dolor sit amet consectetur adipisicing Footer (TBD) 1200 px Prime viewing area : 880 px Menu and navigation area : 320 px

6 Visual Design - Landing page

7 Visual Design - Specification

8 Visual Design - Specification...

9 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.

10 A 5% Master page Layout 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. Customization While 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% B C D 25% 55% 20% B C Left navigation - Fixed layout throughout the application but the content will change depends on pages Horizontal space approx. 25% Main 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% 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% E Footer- Fixed corporate footer Vertical space approx: TBD E

11 A Header ( Visual web part ) List of UI controls may use Logo : Image 1 Notification overlay : CSS DIV Re-usable component Search Box: Auto suggest text box 4 Magnifier icon will come through CSS Buttons: Style can be achieved through CSS3 2 Customizable by user What is customizable? Button appearance and label Re-usable component 3

separator line - Static image e) Arrow graphics - Static image f) Background texture - CSS 3 pattern *Visual style can be controlled through CSS.

12 Left navigation - Web part 1 Share lookup: Web part - Dynamic text, visual style controlled through CSS. May need to add hyper link B 25% Navigation: Web part - (Navigation may expand / vary ) Re-usable a) Navigation title - Dynamic text b) hyper link - Dynamic text c) Number box - Dynamic text d) separator line - Static image e) Arrow graphics - Static image f) 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 text b) Subtitle - Dynamic text (May be a random text) c) Text box - Dynamic text area d) Comment Button- HTML button e) View link- Hyper link *Visual style can be controlled through CSS. BRAND: Web part - Thumbnail based external image link Re-usable 5 External links: Web part - Thumbnail based external image link Re-usable

Main content area 1 Timeline Slider: Web part AJAX Component can be Re-usable 2 Top story: Web part Re-usable a b d e f c This section contains: a) Section header - Dynamic text b) Body text -

c) Thumbnail image - Dynamic image d) Button - Reusable CSS button e) Pagination dots : if more than one top story (Reusable) f) Notification overlay - Reusable DIV same as header section C a1

3 Highlights: Web part Re-usable a1) In focus : Highlight sub-container - Customizable and reusable a2) In Industry: Highlight subcontainer - Customizable and reusable a3) In press - Highlight

13 Main content area 1 Timeline Slider: Web part AJAX Component can be Re-usable 2 Top story: Web part Re-usable a b d e f c This section contains: a) Section header - Dynamic text b) Body text - should be limited by number of character to balance the layout. c) Thumbnail image - Dynamic image d) Button - Reusable CSS button e) Pagination dots : if more than one top story (Reusable) f) Notification overlay - Reusable DIV same as header section C a1 a2 a3 This section displays several highlights sub containers among them 3 are visible at one time. 3 Highlights: Web part Re-usable a1) In focus : Highlight sub-container - Customizable and reusable a2) In Industry: Highlight subcontainer - Customizable and reusable a3) In press - Highlight sub-container - Customizable and reusable b b) Pagination dots : if more than one top story (Reusable) Customizable subsection title background and icon Customizable article title ( limited to number of characters ) Number of view overlay - Reusable Image thumbnail : Customizable with fixed size Customizable article content ( limited to number of characters ) Rating star : reusable component Button : reusable component

Main content area- 2 a This section contains: 4 Watch and listen: Web part with dynamic streaming Re-usable a b d b d f c c a)

Pagination dots : if more than one top story (Reusable) Customizable sub header with character limit C Customizable photo/video

need to use a grid/table component Re-usable c d b a) Section header - Dynamic text b) Section subtitle (Reusable) c) HTML 5

14 Main content area- 2 a This section contains: 4 Watch and listen: Web part with dynamic streaming Re-usable a b d b d f c c a) Section header - Dynamic text b) Video with playback control or image carousel (Reusable) c) Photo/video news section d) Pagination dots : if more than one top story (Reusable) Customizable sub header with character limit C Customizable photo/video article with character limit Reusable image/video carousel a This section contains: 5 Graph and chart component Web part May need to use a grid/table component Re-usable c d b a) Section header - Dynamic text b) Section subtitle (Reusable) c) HTML 5 Chart and graph component (interactive javascript based) d) Pagination dots : if more than one top story (Reusable)

Right Content area - Web part Right content area- Variable layout. It may not be present in all pages by default.

Content will not change in all pages. a Horizontal space approx.

May need to add hyper link a) Alert and notification overlay - Reusable b) Title - Dynamic text c) Email and

program c a) Title - Dynamic text b) Sub title- Dynamic text c) Thumbnail image, Name and designation - Dynamic

a b 4 My document : Web part - included document upload functionality a) Title - Dynamic text b) Document name,

15 Right Content area - Web part 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. a Horizontal space approx. 20% c 1 2 My info: Web part - Visual style controlled through CSS. May need to add hyper link a) Alert and notification overlay - Reusable b) Title - Dynamic text c) and other information - Dynamic text My Notification: Web part - a b a b d D 3 My community: Web part - included chat program c a) Title - Dynamic text b) Sub title- Dynamic text c) Thumbnail image, Name and designation - Dynamic text and image d) Chat box e) Status bubble - dynamic image e d *Visual style can be controlled through CSS. a b 4 My document : Web part - included document upload functionality a) Title - Dynamic text b) Document name, icon and separator - Dynamic text and image c) Upload box - HTML file upload component c a b *Visual style can be controlled through CSS. 5 My Favourite : Web part - a) Title - Dynamic text b) Document name, icon and separator - Dynamic text and image

16 Other components 1 Footer component 2 Feedback component 3 Lazy loader 3 Customs scrollbar 4 tool tip 5 Success and failure toaster 6 Vertical time line bar

17 Summary of page elements Global UI components ( applicable to all pages ) Sl. No 1 2 Name Button Check box 3 Drop down 4 Radio 5 Text box and text area 6 File upload 7 Hyperlink 8 Image link 9 Search box 10 Notification overlay 11 tool tip 12 Accordion 13 Video box 14 Carousel 15 Alert/Notification message toaster 16 light box / Modal po pup 17 Scrollbar 18 Lazy loader 19 Feedback ribbon 20 Timeline slider 21 Pagination bubble 22 Separator 23 Thumbnails 24 Print window 25 Progress bar / loader Global webparts Sl. No 1 2 Custom web parts Header Left nav 3 Global Discussion board 4 Image hyperlink ( Both Brand and External link ) 5 Top story 6 Highlight 7 Watch and Listen 8 Report 9 User profile 10 Community 11 Community chat 12 My Document 13 My Favourite 14 Carousel 15 Inner page content area template - We may need to create 2-3 type depends on content Reusable Yes Yes OOTB Yes If required YES If required - YES If required reuse fully or partially YES TBD TBD TBD If required YES If required YES If required reuse fully or partially

18 End of document

why DiggSpace? Easy to Setup & Manage Attractive and inviting for all employees Office 365 Integration Drive the adoption of Office 365

why DiggSpace? Easy to Setup & Manage Attractive and inviting for all employees Office 365 Integration Drive the adoption of Office 365 why DiggSpace? Engage with all Employees Support Change Management thru effective corporate information sharing increasing employee engagement and performance Easy to Setup & Manage Attractive and inviting