Categories
Development Intranets UI Design

Woods Bagot intranet

UI design and front-end development for SharePoint 2016

Woods Bagot Ltd, a global architecture & design firm, wanted to upgrade their corporate intranet with more capability, better collaboration, easier content management, an updated UI, and to harness the power of Office 365.

UI design and front end development

  • Using personas created following an exhaustive UX interview process, I designed wireframes using Axure to categorise the unique and challenging requirements of this large global design firm.
  • I then designed high-fidelity mock-ups of responsive page templates for the entire intranet, satisfying the customer and gaining acceptance from the board. These designs successfully merged a restrained neutral palette with vivid highlights.
  • Presented visual concepts to key stakeholders, gaining unanimous approval.
  • During the agile development phase, I coded HTML, SASS and jQuery on Bootstrap with the Knockout JS framework to implement a component-based front end to a SharePoint 2016 intranet, including bespoke APIs and libraries.
  • The page templates implemented an early version of light theme and dark theme.

Woods Bagot Intranet Home - Desktop
Home page – desktop
Woods Bagot Intranet - News Item
News article – desktop

Woods Bagot Intranet - Sector landing page
Sector page – desktop
Woods Bagot intranet - landing page
Landing page – desktop

Responsive view

Woods Bagot Intranet Home - Tablet
Home page for tablet
Woods Bagot Intranet Home - Mobile
Home page for mobile

UX design

  • Produced a large set of wireframes using Axure RP to improve UX and confirm requirements.
Woods Bagot wireframe - sector
Sector page wireframe
Woods Bagot wireframe - projects table
Projects table page wireframe
Woods Bagot wireframe - news landing page
News wireframe

Personas

  • Developed a series of UX personas to assist in defining user stories and gaining executive approval for the intranet project.
  • Created a single page persona document for each, with Adobe InDesign.
Woods Bagot Persona 3
Persona
Woods Bagot Persona 4
Persona