Project:
Team: โ
Contributors: โ
TL;DR: Website Application Design
โ โ
Status: โ
Shipping: โ
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) Website Design & Development
User Experience Research & Design
User Research Analysis Approach Documentation
Wireframes
Reusable Wireframe components
Prototype
Reusable Prototype Components The complete Laspec Design System including all of the above
Website Design & Development
Signup & Registration System
Security & Privacy
Testing
Optimization for Search Engines
Signoff, launch and training
Walk you through the new website. 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
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.
Launch Checklist
Make sure you answer all of the questions below and involve necessary stakeholders.
Instructions if "Yesโ (or unsure)
โ `