Skip to content

icon picker

LASPEC Product Requirements & Documentation
Intelnet Consulting
Intelnet Consulting
Intelnet Consulting
Intelnet Consulting
Website Application Design
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

Firstly, we’ll work together to establish goals for the website and how they fit into the wider organizational goals.
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.
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.
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.
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.
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.
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)
Website Design & Development
Security & Privacy

User Experience Research & Design
User Research
User Personas
User Stories
User Story Mapping
User Research Analysis Approach Documentation

Reusable Wireframe components
The wireframe itself

Reusable Prototype Components
Color Scheme Styles
Fonts and text styles
The complete Laspec Design System including all of the above

Website Design & Development
Logo - Vectorisation
Landing Page
Main Content
Events Module
Notifications Systems
Signup & Registration System
Administration Backend

Security & Privacy
Encryption - SSL
Data Input Validation
Software Updates

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
User Persona
User Stories
Key Players, Processes & Information Flow

Design Documents

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

Project Issue and Status Tracker

Key Milestones

Overall Project Milestones.
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
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 😅 🎆
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
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.
Instructions if "Yes” (or unsure)
User Experience
Will website UI be based on user story to feature mappings?
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.
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?
Possibly, with regard to overall layout however changes which based on wireframe components will not. Discuss with Design Lead for more info
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
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
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.
Are you introducing new Search Engine Optimisation requirements apart from technical SEO ?
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?
The Client will provide most of the data, and provide data usage and privacy policies


Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
) instead.