Interactive Roadmap —
Annual Operating Plan
London College of Communication (LCC) runs an Annual Operating Plan (AOP) which outlines its goals and outcomes for the current and coming year. It also provides all documents and links for staff to get to in one place.
Currently, the APO is almost unusable due to its interaction, design and language used. Myself alongside a team of students were asked to re-design this into a 'roadmap' system that is understandable and to works efficiently for staff members working at LCC.
Due to the scale of this project, we were specifically focusing on a phase one outcome.
Final Interactive Roadmap Prototype of Phase 1
Website
{"items":["0745e067-5839-4935-87c9-489f4dfdfafb","84c5624c-9ec8-4b68-b589-60666fa91b66"],"styles":{"galleryType":"Strips","groupSize":1,"showArrows":true,"cubeImages":true,"cubeType":"fit","cubeRatio":1.3333333333333333,"isVertical":false,"gallerySize":45,"collageAmount":0.8,"collageDensity":1,"groupTypes":"1","oneRow":true,"imageMargin":5,"galleryMargin":0,"floatingImages":0,"chooseBestGroup":true,"smartCrop":false,"hasThumbnails":false,"enableScroll":true,"isGrid":false,"isSlider":true,"isColumns":false,"isSlideshow":false,"cropOnlyFill":true,"fixedColumns":0,"enableInfiniteScroll":true,"isRTL":false,"minItemSize":120,"rotatingGroupTypes":"","rotatingCubeRatio":"","gallerySliderImageRatio":1.3333333333333333,"numberOfImagesPerRow":3,"numberOfImagesPerCol":1,"groupsPerStrip":0,"borderRadius":0,"boxShadow":0,"gridStyle":1,"mobilePanorama":false,"placeGroupsLtr":false,"viewMode":"preview","thumbnailSpacings":5,"galleryThumbnailsAlignment":"bottom","isMasonry":false,"isAutoSlideshow":false,"slideshowLoop":false,"autoSlideshowInterval":4,"bottomInfoHeight":0,"titlePlacement":"SHOW_ON_HOVER","galleryTextAlign":"center","scrollSnap":true,"itemClick":"expand","fullscreen":true,"videoPlay":"auto","scrollAnimation":"NO_EFFECT","scrollDirection":1,"overlayAnimation":"NO_EFFECT","arrowsPosition":0,"arrowsSize":23,"watermarkOpacity":40,"watermarkSize":40,"useWatermark":true,"watermarkDock":{"top":"auto","left":"auto","right":0,"bottom":0,"transform":"translate3d(0,0,0)"},"loadMoreAmount":"all","defaultShowInfoExpand":1,"allowLinkExpand":true,"expandInfoPosition":0,"allowFullscreenExpand":true,"fullscreenLoop":false,"galleryAlignExpand":"left","addToCartBorderWidth":1,"addToCartButtonText":"","slideshowInfoSize":200,"playButtonForAutoSlideShow":false,"allowSlideshowCounter":false,"hoveringBehaviour":"APPEARS","thumbnailSize":120,"magicLayoutSeed":1,"imageHoverAnimation":"NO_EFFECT","imagePlacementAnimation":"NO_EFFECT","calculateTextBoxWidthMode":"PERCENT","textBoxHeight":0,"textBoxWidth":200,"textBoxWidthPercent":50,"textImageSpace":10,"textBoxBorderRadius":0,"textBoxBorderWidth":0,"loadMoreButtonText":"Load More","loadMoreButtonBorderWidth":1,"loadMoreButtonBorderRadius":0,"imageInfoType":"NO_BACKGROUND","itemBorderWidth":0,"itemBorderRadius":0,"itemEnableShadow":false,"itemShadowBlur":20,"itemShadowDirection":135,"itemShadowSize":10,"imageLoadingMode":"BLUR","expandAnimation":"NO_EFFECT","imageQuality":90,"usmToggle":false,"usm_a":0,"usm_r":0,"usm_t":0,"videoSound":false,"videoSpeed":1,"videoLoop":true,"gotStyleParams":true,"selectedLayout":"4|bottom|1|fit|false|1|true","allowSocial":false,"allowDownload":false,"allowTitle":false,"allowDescription":false,"loveButton":false,"loveCounter":false,"showVideoPlayButton":true,"galleryImageRatio":2,"sharpParams":{"quality":90,"usm":{}},"galleryHorizontalAlign":"center","galleryVerticalAlign":"center","imageLoadingWithColorMode":"PICKED_COLOR","imageRatioType":"FIXED","numberOfDisplayedItems":3,"itemBorderColor":{"themeName":"color_15","value":"rgba(65,65,65,1)"},"itemShadowOpacityAndColor":{"themeName":"color_15","value":"rgba(65,65,65,0.2)"},"textBoxBorderColor":{"themeName":"color_15","value":"rgba(65,65,65,1)"},"titleDescriptionSpace":6,"textsVerticalPadding":0,"textsHorizontalPadding":0,"textBoxFillColor":{"themeName":"color_12","value":"rgba(232,230,230,1)"},"alwaysShowHover":false,"isStoreGallery":false,"previewHover":false,"calculateTextBoxHeightMode":"MANUAL","galleryLayout":4,"useCustomButton":false,"customButtonText":"","itemOpacity":{"themeName":"color_14","value":"rgba(153,153,151,0.6)"},"itemFont":{"style":{"bold":false,"italic":false,"underline":false},"family":"proxima-n-w01-reg","preset":"Heading-M","editorKey":"font_5","size":25,"fontStyleParam":true,"displayName":"Basic Heading","value":"font:normal normal normal 25px/1.4em proxima-n-w01-reg,sans-serif;"},"itemFontSlideshow":{"family":"avenir-lt-w01_85-heavy1475544","displayName":"Basic Heading","style":{"bold":false,"italic":false,"underline":false},"size":22,"preset":"Custom","editorKey":"font_5","fontStyleParam":true,"value":"font:normal normal normal 22px/27px avenir-lt-w01_85-heavy1475544,sans-serif;"},"itemDescriptionFontSlideshow":{"family":"avenir-lt-w01_35-light1475496","displayName":"Paragraph 2","style":{"bold":false,"italic":false,"underline":false},"size":15,"preset":"Custom","editorKey":"font_8","fontStyleParam":true,"value":"font:normal normal normal 15px/18px avenir-lt-w01_35-light1475496,sans-serif;"},"itemDescriptionFont":{"family":"avenir-lt-w01_35-light1475496","displayName":"Paragraph 2","style":{"bold":false,"italic":false,"underline":false},"size":15,"preset":"Custom","editorKey":"font_8","fontStyleParam":true,"value":"font:normal normal normal 15px/18px avenir-lt-w01_35-light1475496,sans-serif;"},"itemFontColor":{"themeName":"color_11","value":"rgba(255,255,255,1)"},"itemFontColorSlideshow":{"themeName":"color_15","value":"rgba(65,65,65,1)"},"itemDescriptionFontColor":{"themeName":"color_11","value":"rgba(255,255,255,1)"},"itemDescriptionFontColorSlideshow":{"themeName":"color_15","value":"rgba(65,65,65,1)"},"loadMoreButtonFont":{"family":"proxima-n-w01-reg","displayName":"Paragraph 2","style":{"bold":false,"italic":false,"underline":false},"size":15,"preset":"Body-M","editorKey":"font_8","fontStyleParam":true,"value":"font:normal normal normal 15px/1.4em proxima-n-w01-reg,sans-serif;"},"loadMoreButtonFontColor":{"themeName":"color_15","value":"rgba(65,65,65,1)"},"loadMoreButtonColor":{"themeName":"color_11","value":"rgba(255,255,255,1)"},"loadMoreButtonBorderColor":{"themeName":"color_15","value":"rgba(65,65,65,1)"},"arrowsColor":{"themeName":"color_11","value":"rgba(255,255,255,1)"},"oneColorAnimationColor":{"themeName":"color_11","value":"rgba(255,255,255,1)"},"responsive":false,"targetItemSize":45,"isAccessible":false,"allowLeanGallery":false,"layoutsVersion":2,"selectedLayoutV2":4,"isSlideshowFont":false,"externalInfoHeight":0,"externalInfoWidth":0},"container":{"top":"","bottom":"","left":"","right":"","width":980,"height":276,"position":"","avoidGallerySelfMeasure":true,"galleryWidth":990,"galleryHeight":281,"scrollBase":0}}
Mobile
{"items":["fc91cc90-b9e6-4e4b-9167-ed91c94dbd04","646be4aa-9948-4dc5-900e-9ca871324cd7","8f386156-60b9-425b-bacd-6d0157a00678"],"styles":{"groupSize":3,"showArrows":true,"cubeImages":false,"cubeType":"fill","cubeRatio":1,"isVertical":false,"gallerySize":35,"collageAmount":0.8,"collageDensity":1,"groupTypes":"1,2h,2v,3t,3b,3l,3r","oneRow":false,"imageMargin":3,"galleryMargin":0,"floatingImages":0,"chooseBestGroup":true,"smartCrop":false,"hasThumbnails":false,"enableScroll":true,"isGrid":false,"isSlider":false,"isColumns":false,"isSlideshow":false,"cropOnlyFill":false,"fixedColumns":0,"enableInfiniteScroll":true,"isRTL":false,"minItemSize":120,"rotatingGroupTypes":"","rotatingCubeRatio":"","gallerySliderImageRatio":1.7777777777777777,"numberOfImagesPerRow":3,"numberOfImagesPerCol":1,"groupsPerStrip":0,"borderRadius":0,"boxShadow":0,"gridStyle":0,"mobilePanorama":false,"placeGroupsLtr":false,"viewMode":"preview","thumbnailSpacings":5,"galleryThumbnailsAlignment":"bottom","isMasonry":false,"isAutoSlideshow":false,"slideshowLoop":false,"autoSlideshowInterval":4,"bottomInfoHeight":0,"titlePlacement":"SHOW_ON_HOVER","galleryTextAlign":"center","scrollSnap":false,"itemClick":"expand","fullscreen":true,"videoPlay":"hover","scrollAnimation":"NO_EFFECT","scrollDirection":0,"overlayAnimation":"NO_EFFECT","arrowsPosition":0,"arrowsSize":23,"watermarkOpacity":40,"watermarkSize":40,"useWatermark":true,"watermarkDock":{"top":"auto","left":"auto","right":0,"bottom":0,"transform":"translate3d(0,0,0)"},"loadMoreAmount":"all","defaultShowInfoExpand":1,"allowLinkExpand":true,"expandInfoPosition":0,"allowFullscreenExpand":true,"fullscreenLoop":false,"galleryAlignExpand":"left","addToCartBorderWidth":1,"addToCartButtonText":"","slideshowInfoSize":200,"playButtonForAutoSlideShow":false,"allowSlideshowCounter":false,"hoveringBehaviour":"APPEARS","thumbnailSize":120,"magicLayoutSeed":80724.99724687354,"imageHoverAnimation":"NO_EFFECT","imagePlacementAnimation":"NO_EFFECT","calculateTextBoxWidthMode":"PERCENT","textBoxHeight":0,"textBoxWidth":200,"textBoxWidthPercent":50,"textImageSpace":10,"textBoxBorderRadius":0,"textBoxBorderWidth":0,"loadMoreButtonText":"Load More","loadMoreButtonBorderWidth":1,"loadMoreButtonBorderRadius":0,"imageInfoType":"NO_BACKGROUND","itemBorderWidth":0,"itemBorderRadius":0,"itemEnableShadow":false,"itemShadowBlur":20,"itemShadowDirection":135,"itemShadowSize":10,"imageLoadingMode":"BLUR","expandAnimation":"NO_EFFECT","imageQuality":90,"usmToggle":false,"usm_a":0,"usm_r":0,"usm_t":0,"videoSound":false,"videoSpeed":1,"videoLoop":true,"gotStyleParams":true,"selectedLayout":"0|bottom|80724.99724687354|fill|false|0|true","allowSocial":false,"allowDownload":false,"allowTitle":false,"allowDescription":false,"loveButton":false,"loveCounter":false,"showVideoPlayButton":true,"galleryImageRatio":2,"sharpParams":{"quality":90,"usm":{}},"galleryHorizontalAlign":"center","galleryVerticalAlign":"center","imageLoadingWithColorMode":"PICKED_COLOR","imageRatioType":"FIXED","numberOfDisplayedItems":3,"itemBorderColor":{"themeName":"color_15","value":"rgba(65,65,65,1)"},"itemShadowOpacityAndColor":{"themeName":"color_15","value":"rgba(65,65,65,0.2)"},"textBoxBorderColor":{"themeName":"color_15","value":"rgba(65,65,65,1)"},"titleDescriptionSpace":6,"textsVerticalPadding":0,"textsHorizontalPadding":0,"textBoxFillColor":{"themeName":"color_12","value":"rgba(232,230,230,1)"},"alwaysShowHover":false,"isStoreGallery":false,"previewHover":false,"calculateTextBoxHeightMode":"MANUAL","galleryLayout":0,"useCustomButton":false,"customButtonText":"","itemOpacity":{"themeName":"color_14","value":"rgba(153,153,151,0)"},"itemFont":{"style":{"bold":false,"italic":false,"underline":false},"family":"proxima-n-w01-reg","preset":"Heading-S","editorKey":"font_6","size":22,"fontStyleParam":true,"displayName":"Small Heading","value":"font:normal normal normal 22px/1.4em proxima-n-w01-reg,sans-serif;"},"itemFontSlideshow":{"family":"avenir-lt-w01_85-heavy1475544","displayName":"Basic Heading","style":{"bold":false,"italic":false,"underline":false},"size":22,"preset":"Custom","editorKey":"font_5","fontStyleParam":true,"value":"font:normal normal normal 22px/27px avenir-lt-w01_85-heavy1475544,sans-serif;"},"itemDescriptionFontSlideshow":{"family":"avenir-lt-w01_35-light1475496","displayName":"Paragraph 2","style":{"bold":false,"italic":false,"underline":false},"size":15,"preset":"Custom","editorKey":"font_8","fontStyleParam":true,"value":"font:normal normal normal 15px/18px avenir-lt-w01_35-light1475496,sans-serif;"},"itemDescriptionFont":{"family":"proxima-n-w01-reg","style":{"bold":false,"italic":false,"underline":false},"size":15,"preset":"Body-M","editorKey":"font_8","fontStyleParam":true,"displayName":"Paragraph 2","value":"font:normal normal normal 15px/1.4em proxima-n-w01-reg,sans-serif;"},"itemFontColor":{"themeName":"color_11","value":"rgba(255,255,255,1)"},"itemFontColorSlideshow":{"themeName":"color_15","value":"rgba(65,65,65,1)"},"itemDescriptionFontColor":{"themeName":"color_11","value":"rgba(255,255,255,1)"},"itemDescriptionFontColorSlideshow":{"themeName":"color_15","value":"rgba(65,65,65,1)"},"loadMoreButtonFont":{"family":"proxima-n-w01-reg","displayName":"Paragraph 2","style":{"bold":false,"italic":false,"underline":false},"size":15,"preset":"Body-M","editorKey":"font_8","fontStyleParam":true,"value":"font:normal normal normal 15px/1.4em proxima-n-w01-reg,sans-serif;"},"loadMoreButtonFontColor":{"themeName":"color_15","value":"rgba(65,65,65,1)"},"loadMoreButtonColor":{"themeName":"color_11","value":"rgba(255,255,255,1)"},"loadMoreButtonBorderColor":{"themeName":"color_15","value":"rgba(65,65,65,1)"},"arrowsColor":{"themeName":"color_11","value":"rgba(255,255,255,1)"},"oneColorAnimationColor":{"themeName":"color_11","value":"rgba(255,255,255,1)"},"responsive":false,"targetItemSize":675,"isAccessible":false,"allowLeanGallery":false,"layoutsVersion":2,"selectedLayoutV2":0,"isSlideshowFont":false,"externalInfoHeight":0,"externalInfoWidth":0},"container":{"top":"","bottom":"","left":"","right":"","width":626,"height":968,"position":"","avoidGallerySelfMeasure":true,"galleryWidth":632,"galleryHeight":968,"scrollBase":0}}
Initial Understanding + Analysis of the AOP
We have divided the AOP into the information it contains.
The PDF document presents one initial page which displays an overview of the six main strategies of the college
By clicking on one of the sections, the user is directed to the following pages, where each category is more detailed. The information is presented only as lines of text, lacking any perception of hierarchy, definition and relevance.
Initial Prototype of Strands
