Municipal Motions
Municipal motions is a political web app that allows users to search calgary and edmonton motions and see voting details.
The no-ui dev build
The dev built out the functionality of the app without any consideration for UI. Below is a screenshot of the developed prototype that was given to me to punch up with design.
My immediate response is the information needs to be laid out in a legible way. Not only is padding an issue, I felt the filter box was taking up valuable space the table clearly needs. By creating a horizontal filter box above the table, I would have more room to display the content within the full width of the page.
Figma mockups
Below are drafts and variations of the app I built out in Figma. In addition to organizing the layout I added styling. The consideration for colour was to avoid palettes that overlapped with political parties that might presume bias. I feel the blue, yellow, grey palette matches the tone of the service being provided without associating with any Canadian political party.
Version 1 - This draft is pretty much taking the dev build and applying a proper UI over it; mostly styling and layout.
Version 2a - This version explores a tile display versus table. This design requires a user to click on a summary tile to see further voting details.
Version 2b - When a user clicks a summary tile, they would be taken to the motion details page to see all info.
Version 3 - A variation on the tile design where the tiles have been enlarged to show more information. This version allows for more “at-a-glance” viewing.
