Scribd
Upload
37 views17 pages

DPC Closeout Deck - 24th Playback

IBM Garage worked with Highways England to develop a digital product catalogue (DPC) using IBM's agile methodology. They delivered an MVP web app with search and download capabilities for design engineers in 7 weeks. Future phases aim to add user accounts, object uploading, and application review features to improve procurement processes.

Uploaded by

Abhishek Sharma
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
37 views17 pages

DPC Closeout Deck - 24th Playback

IBM Garage worked with Highways England to develop a digital product catalogue (DPC) using IBM's agile methodology. They delivered an MVP web app with search and download capabilities for design engineers in 7 weeks. Future phases aim to add user accounts, object uploading, and application review features to improve procurement processes.

Uploaded by

Abhishek Sharma
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 17

IBM Garage

Highways England
DPC MVP Closeout Deck
24th April 2020
Project Overview
Highways England worked with IBM Garage in an engagement to
solve an opportunity they identified.

IBM Garage is IBM’s consultancy with a startup DNA. We


empower small and large companies to disrupt and transform by
delivering solutions in the minimum possible time using the IBM
Garage Method.

2 7 2 1
Week research Week design & Developers Designer
spike development

IBM Garage 2
Project Opportunity
We will improve
the experience of how product needs are communicated across
teams, how products are chosen, and how asset details are
recorded and managed

For
Design Consultants, Contractors, Product Manufacturers and Asset
Maintenance

The user(s) struggle today because


• There is a lack of standardisation in products
• There isn’t a consistent approach to procurement across projects
• There is a lack of consistent design across schemes

This would be good for Highways England because


• Procurement decisions can be informed with more data, leading
to a spend decrease in creating the right contracts
• It would help to optimise maintenance and asset lifecycle
management
• It will enable earlier design and encourage further use of REM
• It will give benchmarks in terms of standards in asset cost and
productivity norms
IBM Garage 3
MVP Original

We will provide
Design Engineer, Rob

With
A web-based interface to access the download part of DPC

With the ability to


• Perform a simple product search
• Find selected products from suppliers (retaining walls &
MS4 gantries)
• Download objects to use the BIM models in designs

IBM Garage 4
‘Download’ MVP Extended

We will provide
Design Engineer, Rob

With
A web-based interface to access the download part of DPC

With the ability to


• See instructions on how to get started
• Perform a simple product search
• Browse for objects using discipline categories
• Find selected products from suppliers (including a wide
range of objects)
• See a detailed specification of an object
• Download objects to use the BIM models in designs (in the
form of datasheets and CAD models)

Grey text = Original MVP


Black text = Extended MVP

IBM Garage 5
‘Download’ Hypothesis Extended

We will validate the assumption that


• Design Engineers will adopt and trust the tool
• Data seen by Design Engineers in the tool is accurate

We will know we have arrived when we observe


• _ number of Design Engineers use the tool _ number of
times during the prelim design phase on a project
• _number of downloads for BIM models and datasheets
during the prelim design phase on _ number of projects

IBM Garage 6
‘Upload’ MVP Extended

We will provide
Supplier, Michael

With
An interface to access the DPC

With the ability to


• see instructions on how to get started
• download a data template sheet
• upload a completed datasheet

IBM Garage 7
‘Upload’ Hypothesis Extended

We will validate the assumption that


• Suppliers will upload product objects
• Suppliers will share accurate information for their products

We will know we have arrived when we observe


• _ number of Suppliers downloading the template sheets
• _ number of accurate data sheet uploads from Suppliers

IBM Garage 8
User Flows

Draft
Early
user
designs
flow guides
of ‘Download’
for the ‘Download’ (above) and ‘Upload’ (below) paths

IBM Garage 9
Design Iterations

Draft designs of the ‘Download’ path, including the basket feature

IBM Garage 10
UI Design and Development
As Highways England is a government agency, the design process
started with visual observations from a variety of public service
websites, such as NHS and Government Digital Service. gov.uk
provided a lot of design inspiration as it is known for its simple
methods of displaying information and clear step-by-step
approach to complex processes. The Highways England Design
System document was also used to ensure brand consistency
when developing a new digital brand language.

To keep the REM and DPC streams consistent, a shared


component library was built: a repository of all shared
components and guidance on how to use each component. The
sharing of components sped up the development process.

IBM Garage 11
User Testing “It was easy to find what you were
To ensure the designs we created were adding user value we looking for.”
validated them through testing with people working on
schemes.

In each session we got the user to complete different tasks


“It would speed up process of
and observed how they navigated around the web app, along having to wait for to hear back from
with asking questions about their experience and how it can
be improved. someone [about details of objects].”
The user feedback was frequently used to steer the direction
of design and development.
“It was self explanatory - quite
straight forward to use.”
3 11
Rounds of Users
user testing Tested
“[The styling is] very similar to REM,
and it’s very recognisable as it is
similar to the government website.”
IBM Garage 12
The Digital Product Catalogue

IBM Garage 13
The Web App
Some of the key features of the ‘download’ section are:

• Landing page with information about the DPC

• Home page with a search bar and discipline categories to


browse all objects on the DPC

• Results page to review all the objects available under a


search

• Product details to review a specification of the object

• Download feature to download datasheets and models if


available

44 13
Screens designed Shared components

IBM Garage 14
Technical
The pair delivered a Web app built using React and GraphQL,
linked to a Java Spring Boot backend to manage a Postgres
database.
Some of the technical achievements were:
• Creating a visually appealing app, reflective of the designs
• Providing a clean API to access the data which enables
object data to be displayed in meaningful way in the front-
end
• Building and using a shared component library with the
REM project to ensure a consistent user experience
• Deploying on Red Hat OpenShift to align Highways
England’s cloud strategy

146 49
Pushes to User stories
production completed

IBM Garage The developers pair programmed remotely 15


Current State and Future Plan
Delivered MVP Next Phase * Post-production Phases *
7 weeks 10 weeks
1 designer, 2 developers 1 designer, 2 developers, 1 architect

Download Objects • User accounts and login Review Applications


• Information on how to get started Download Objects • Ensure DPC users are using the most up-
• Search for objects • Filter and sort by results to-date model versions in designs
• Browse objects by discipline category • Receive suggestions on object • Track ‘Golden-thread objects’ and
• View results downloads discarded objects through the design
• Read object specification • View download history process
• Download datasheet and models Upload Objects Procurement
Upload Objects • Complete an online form • View a list of objects in the ‘Golden
• Download a data template • Submit all attachments for review Thread’ used by scheme workers
• Upload datasheet for review • View uploaded objects
Review Applications
• View applications and accept / reject * Production ready, built on Azure

Designed Built User tested

IBM Garage Note, this slide is a draft plan which could change. 16
Relevant Links
App Link: https://dpc.heauksdevremcluster-73f22e0aaf0f43ec17fca4c02487547a-0000.eu-gb.containers.appdomain.cloud/
dpc/

Invision Link (design mock-ups): https://ibm.invisionapp.com/share/EMNZYOK2DUF

Shared component library: https://shared.heauksdevremcluster-73f22e0aaf0f43ec17fca4c02487547a-0000.eu-


gb.containers.appdomain.cloud/styleguide/

For access, please contact Panagiotis Kilikidis or Faris Mahder at Jacobs.

IBM Garage 17

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy