The project
Build a platform where any citizen in Rio de Janeiro, São Paulo and Recife can propose and edit Bills to be voted by the city Council.
The problem
Most citizens don't know that they can propose new Bills and have a close relationship with their city councilmen. The platform must create this closeness, including reaching to politicians to participate.
Step 1 | The kickoff and personas
During the kickoff meeting, was stablished the main personas, the target audience, of the platform: The law-savvy citizen; The regular citizen; The politician; The admin. We started our politics benchmark research and the ideal flow was mapped in our requirements workshop with the development team.
Tools: Post-its, Google Draw, Cardboardit
Step2 | The wireframes
After the resolution of the user stories, I started developing the overall wireframe of the project and user flow. This step was repeated back and forward with the development team and the client, until an agreed flow was projected for each persona. (Below: part of admin wireframe flow)
Tools: Illustrator
Step 3 | Prototyping
With a good understanding of the user flow, I started developing prototypes , with some of the final visual design, to be tested among our heavy users and some politicians, part of our personas research. At this moment we started to think about the animations, and other interactions between the screen and the user.
Tools: Photoshop, In Vision
Step 4 | Visual Design
Working alongside the user flow, i started to conceive the visual language of the platform, with the communication strategy. Because it was a difficult subject, the visual style shouldn't be presumptuous or complicated. At this fase, the branding, naming, iconography and visual style was created.
Toos: Photoshop, Illustrator
Above: iconography
Above: Main color, call-to-action color and typography
Step 5 | The screens
I. Home
According to our research and data, the home is not the main door for most of the users, but it is, however, an important space for institucional content and overall understanding of the whole project. It was designed to be a window for the most popular and new bill projects, also focusing on communicate our objectives.
The user can:
• Login
• Start a bill project
• Support a project
• See projects open to collaboration
• See projects on legislative hands
• See victorious bills
• See the about page
II. About
A heavy content page, the about works as a FAQ and our mission statement. It uses strong illustration and icons to convey the proper message.
The user can:
• Login
• Read the mission statement
• Click and see the questions
III. Bill project
This is the most important page, and the one that the majority of users spend their time. The bill project page have a number of different moments, including:
• Staus A: Open for collaboration, no legislative adoption
• Status B: Open for collaboration, adopted by a legislator
• Status C: Closed for collaboration, adopted by a legislator, politic conduct in motion
• Status D: Closed for collaboration, adopted by a legislator, waiting for vote
• Status E: Closed for collaboration, adopted by a legislator, victory
• Status F: Closed for collaboration, adopted by a legislator, defeat
• Status G: Archived
Above: All possible status a project can have
All those states had to be designed and the flow thought to be as simple as possible for the user.
The user can:
• Collaborate on a project
• Support a project
• Share the page
• See the status
• Read the Bill
• See who proposed the bill
• See if it was adopted by a legislator and who
• See the legal conduct in the city council
• See who supports the bill
IV. Mobile app
The project was conceived to have an mobile presence, where the users could interact, support and edit the content of the bill in their cellphone.
Step 6 | Outreach communication
For the project to be successful, it was necessary an intense outreach effort with our 200k users. Using our social media, several promotional images were created to teach users how to use the platform and excite them to create their own Bills.
Facebook Effort | Cover images, memes and share posts
The results
The project MVP had a really good response from the public, but specially from the legislators who used the platform to validate their own projects with the population. Right after the launch the site had almost 20 active projects.
People talking about Legislando:
UOL | DIÁRIO DE PERNAMBUCO | A VOZ DO CIDADÃO | REVISTA EXAME | MOBILIZE
The Team Our Cities:
Igor Campos Lead Designer
Nícolas Iensen Lead Developer
Josias Schineider Developer
Leonardo Eloi Project Manager