Skip to content
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:
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.
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 & Design
Wireframes
Prototype
Website Design & Development
Security & Privacy
Testing
Optimization for Search Engines
Signoff, launch and training
Key Flows & Documentation
.
โญ๏ธ Note: you can interact with the design filesUX Documents
UX Research Presentation
โ โ
โ
User Persona
โ โ โ
User Stories
โ โ โ
Key Players, Processes & Information Flow
โ โ โ
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
โ โ โ
Project Issue and Status Tracker
โ โ โ
Key Milestones
Overall Project Milestones.
Date
Milestone
Audience
Remarks
1
Mon, Jul 20
UX Research & Strategy ๐ฆ
All Stakeholders
User Experience Design - Major Milestone!!!
2
Wed, Jul 29
Design System๐ฅ
Design Team & PM
Getting user feedback - Major milestone for development and prototyping
3
Sun, Aug 16
Wireframing๐ถ
Design Team & PM
Finally got some scaffolding done ready for prototyping
4
Thu, Sep 10
Prototyping ๐
All Stakeholders
Big day to demo prototype!!!
5
Wed, Sep 16
Feature Mapping ๐ถ๏ธ
Design, Developer Teams & PM
Opportunity to prioritise what goes to production!!
6
Wed, Sep 16
Documentation ๐
All Stakeholders
This one sprint everybody wants nobody to do!!!
7
Tue, Sep 22
Development ๐
๐
Developers
Now the website is out of surgery and alive!!!!
8
Thu, Sep 24
Testing ๐
All Stakeholders
Moment of truth!
9
Mon, Sep 28
Handover ๐ฏ
PM & Project Owner
Finally we can shake hands...lol
10
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?
No
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?
No
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
โ
`
Want to print your doc?
This is not the way.
This is not the way.
Try clicking the โฏ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.