Civis landing page re-design ( UX/UI Design )
Civis is a platform to empower citizens by helping them give their voices for the upcoming policies that the government is going to implement in the future.
The Challenge
It is an NGO so they don't have many resources so our development resources were also limited. It's a platform that involves the government policies so it's a complicated platform that has to be made simple to understand by every user who lands on the landing page that what this platform is capable of. ( So designing it in a simple and clean way was very important )
The Design Process.
Current design of landing page.
The current flow of the landing page :
1. Video of what Civis does.
2. Shows what are the active policies which require people feedback.
3. Then user review.
4. The last section is the media release.
Problem
User feedback and data from the Fullstoryapp
1. The website takes a lot of time to load as the video is heavy. Because of that issue, when the user is coming for the first time to the platform, they are not able to see anything. It is a blank white space and they scroll down to the section of policies and user reviews. The user clearly doesn't know what is Civis for as the video takes so much time to load till that time user is gone from the website without knowing what is the platform.
2.The clear reason why the user needs the Civis platform is missing from the landing page. ( visually it is missing to see the advantage )
3. There is no navigation for the user to explore the platform, there is only login and sign-up which a new user wouldn't do unless they know what is the platform.
4. Users also have a problem that how to use Civis they are not clear how to use it and if they use it what is the process after that.
5. Fullstoryapp showed that user spends so much time on the landing page figuring out that what it is they drop off from the platform without using it.
Solution
1.The structure of the website has to be changed. In order for the information to be delivered to the user properly.
2. Need to visually show why Civis is important to the user.
3. Proper Navigation for the website.
4. Video size has to be reduced and also if it is not loading in time there should be content for the user to see in order to know what is Civis. ( Removing the dependency from the video )
5. Letting users know the steps that how Civis actually work.
Ideas
1. In India, many government websites are poor in design and have a lot of content because of that its hard to use them and look for content. So, I am going to be using more of Visuals in it for the users to understand the platform better.
2. Giving it a more fluid look.
3. Simple and clean look for the user to understand Civis.
Wireframe Design
Prototyping ( Final Design )
Results
1. It was one of my projects where I had valuable data to improve the user experience and make a good decision in order to improve the platform.
2. Visuals actually make a difference in the user experience.
3. I used illustrations from a free resource library called Undraw. I will be removing these illustrations in the next phase and will be replacing them with the original illustrations.
4. Users review for the new design = It is simple to see and understand why I need Civis platform rather than going to the government website and doing it by myself.