LASPEC Project PRD

Explore

PRD: [LASP]

LASPEC Product Requirements & Documentation

Yuhki Yamashita

Intelnet Consulting

Project:

LASP

⁠

EDIT INFO

⁠

Team:

@TrippleX

⁠

Contributors:

⁠

TL;DR:

Website Application Design

⁠

Status:

@Designing

⁠

Shipping:

Sep 30, 2020

⁠

Problem Alignment

The Problem

The Lagos State Pension Commission as an agency of the Lagos State Government identified the need for a functional website to inform, educate and engage both with its pensioners and the public, and also to meet best national and international best practices for service delivery and ease of doing business.

However due to advancements in technology, search engine optimization, web user interface design and user experience requirements, social media engagement and accessibility support for multiple smart and mobile devices, it became apparent that the Lagos State Pension Commission existing website had to be upgraded to meet these and other current and future demands.

In addition the existing static website was not designed to accommodate dynamic update of information and administration personnel had no way to easily effect changes without recourse to engaging the services of a developer leading to delays, and often outdated information persisting on the existing website.

Finally since the existing website was not designed to meet mobile responsive best practices it presented poor user experience for mobile users who form majority of visitors to the website.

High-level Approach

Goals

Firstly, we’ll work together to establish goals for the website and how they fit into the wider organizational goals.

Discovery

Once we’ve established the goals of the website, we’ll then work to identify where the areas of priority lie. This can involve some or all of the following:

Data analysis – we will look at existing website data, including data sources, landing pages, content, layout, page speed, images etc. to understand where the biggest opportunities lie for improving the existing website

Design and Style Guide - we will come up with a style guide for each component of the user interface to ensure consistent look and feel for the website composing of fonts, buttons, links, headings etc.

User Experience – we will determine an optimized user journey and workflow for visitors to the website to ensure that they are able access content they require and take actions quickly. We use technologies such cookies to ensure smooth experience and tracking of user actions which would provide valuable data for future optimizations.

Security and Disaster recovery – we will investigate security requirements to protect the website from threats such as malware, adware, content injections and also ensure that visitor privacy, data and communications are protected according to international best practices.

Strategy

Once we’ve completed the discovery phase, we'll then come up with a strategy for your website. This will include information like what pages we'll have, how navigation will work, visual style, conversion paths, etc. This strategy will be driven by the insights gained from the Discovery stage, and will implement it using a project management plan which we will share with you to ensure timely delivery.

Wireframing

Once the strategy is agreed on, we'll then do a basic wireframe of your new website that will show the navigation, page layouts, copy, etc. This will allow you to understand how the site will look, its structure and what messages will be conveyed, and will allow us to iterate quickly until everyone is aligned.

Design

Once the wireframe is agreed on, we'll then turn the wireframe into a high-fidelity design that shows exactly how each page of the website will look. We will present this back to you as a prototype that will allow you visualize the website user interface. We'll then iterate and make any final changes in this stage before beginning development.

Development

Once the design has been agreed on and signed off, we'll then develop the website and administrative backend built on the WordPress CMS using the Elementor page builder. Using a CMS like WordPress combined with the Elementor page builder, makes it quicker for us to develop, and also makes it easy for you to update the website however you need.

Testing

Once major development stage of the front-end design and backend administrative portal has been completed we will move into testing the website during which you will have the opportunity to experience it live before launch and would will give us the opportunity to work out and resolve any bugs due to code

Optimization for Search Engines

During testing phase we will take cognizance of optimizations for search engines, by implementing basic technical SEO and integration with a maximum of three your organization’s social media channels

Signoff, launch and training

Once the testing phase is done, we'll jump on a video call and walk you through the new website. Once you've signed off on it, we'll push it live and archive your old website in case you need anything from it. Finally, we'll do a basic training session with your team so they understand how to edit the website when they need.

Goals & Success

Based on the above problem definition, our proposed solution meets three critical requirements.

Device responsive User Interface Design with organized layout optimized for speed security and SEO

Dynamically updated data using the best performance driven Content Management System available today

Custom built backend administration User Interface for staff of the agency to update contents of the front-end of the website

Secure scalable Virtual Private Server to host website files and assets

Data backup, recovery and maintenance

Since the agency already has a valid domain name, it will be reused and redirected to the new website on completion ensuring the existing website remains available until completion of the new one. Existing services, data and files of the old website will not be affected.

⁠

Solution Alignment

Key Features

The complete solution includes the following features

User Experience Research and design(UX)

Wireframes

Prototype

Website Design & Development

Security & Privacy

Testing

SEO

User Experience Research & Design

User Research

User Personas

User Stories

User Story Mapping

User Research Analysis Approach Documentation

Wireframes

Reusable Wireframe components

The wireframe itself

Prototype

Reusable Prototype Components

Color Scheme Styles

Fonts and text styles

Iconography

The complete Laspec Design System including all of the above

Website Design & Development

Header

Logo - Vectorisation

Banners

Navigation

Landing Page

Sub-Pages

Main Content

Links

Events Module

Notifications Systems

Footer

Actions

Layout

Signup & Registration System

Administration Backend

Security & Privacy

Encryption - SSL

Authentication

Data Input Validation

Software Updates

Backup

Testing

User Experience Testing

Functionality Testing

System Testing

Optimization for Search Engines

Technical SEO

Content SEO

Signoff, launch and training

Walk you through the new website.

Live Launch

Archive old website

Basic training session

Key Flows & Documentation

⭐️ Note: you can interact with the design files

UX Documents

UX Research Presentation

⁠

This link can't be embedded.⁠

⁠

User Persona

⁠

User Stories

⁠

Key Players, Processes & Information Flow

⁠

This link can't be embedded.⁠

⁠

Design Documents

Wireframe

⁠

Design System

⁠

Dark Theme

⁠

Open Issues & Key Decisions

We track open issues / key decisions here. Sometimes, certain decisions are made that might feel controversial; If you have any issues here’s the place to let everyone on the team know about it.

Project Road Map

⁠

This link can't be embedded.⁠

⁠

Project Issue and Status Tracker

⁠

Key Milestones

Overall Project Milestones.

Date

Milestone

Audience

Remarks

Mon, Jul 20

UX Research & Strategy 🦍

All Stakeholders

User Experience Design - Major Milestone!!!

Wed, Jul 29

Design System👥

Design Team & PM

Getting user feedback - Major milestone for development and prototyping

Sun, Aug 16

Wireframing🐶

Design Team & PM

Finally got some scaffolding done ready for prototyping

Thu, Sep 10

Prototyping 😁

All Stakeholders

Big day to demo prototype!!!

Wed, Sep 16

Feature Mapping 🕶️

Design, Developer Teams & PM

Opportunity to prioritise what goes to production!!

Wed, Sep 16

Documentation 🐒

All Stakeholders

This one sprint everybody wants nobody to do!!!

Tue, Sep 22

Development 😅 🎆

Developers

Now the website is out of surgery and alive!!!!

Thu, Sep 24

Testing 👓

All Stakeholders

Moment of truth!

Mon, Sep 28

Handover 💯

PM & Project Owner

Finally we can shake hands...lol

Wed, Sep 30

Launch! 🚀

Gradual ramp over the day to 100% of all users

It's the big day!

There are no rows in this table

⁠

Launch Checklist

Make sure you answer all of the questions below and involve necessary stakeholders.

Area

Question

Answer

Instructions if "Yes” (or unsure)

User Experience

Will website UI be based on user story to feature mappings?

Yes

Discuss with the PM. However a list of feature mappings will included in this documentation soon

Will UI components need to be tested against every UX use case?

UI components may address multiple User Stories hence only components with special accessibility requirements need be tested to save time.

Wireframes

Is the current Wireframe design final for prototyping?

The wireframe design will evolve during the prototyping development phases in order to allow for flexibility and unforseen requirements

Will changes to wireframe design components impact prototyping?

Yes

Possibly, with regard to overall layout however changes which based on wireframe components will not. Discuss with Design Lead for more info

Prototype

Are we running a Beta for this?

Yes..but discuss with the PM team.

Do we need an onboarding experience?

Possibly, because the UI interface maybe new to users and an onboarding strategy may be necessary. Confirm with the PM

Development

We are concerned about design handoff from the design team after prototyping. How is this going to be implemented?

Developers will have access to the design files on Figma, include relevant CSS code and component properties. See the PM

We estimate a minimum of 3 sprints to develop and code interfaces but the project plan reflects less. Can push components that will take time to build to beta release?

Please discuss this with the PM, however only standard & high priority features will need be released in version one

Testing

Are you introducing new functionality that will require post development testing?

The general expectation is that the development team builds these tests into code & API during development. Talk to the PM if you have questions.

Will push notifications be a requirement for the first release version?

Talk to the PM.

Will the complaints / issues components introduce new work on mobile or mobile web?

Talk to the PM.

SEO

Are you introducing new Search Engine Optimisation requirements apart from technical SEO ?

Yes

Content Optimization may be required in future, but discuss with the PM

Are we collecting any data that we did not already, or are we using any data in a manner that we did not already use it in?

Yes

The Client will provide most of the data, and provide data usage and privacy policies

⁠

Key Flows & Documentation

UX Documents

Design Documents

Open Issues & Key Decisions

Project Issue and Status Tracker

Key Milestones

Launch Checklist

Want to print your doc?
This is not the way.

Try clicking the ⋯ next to your doc name or using a keyboard shortcut (

CtrlP

) instead.