The Canadian Council for Public Private Partnerships wanted to redesign their public facing database of project information so it was more accessible & relevant to their members and the public. This involved redesigning the database so it was responsive, including photos and graphic elements, and structuring some pages so they were layed out as easily exportable articles.
UX / UI / WIREFRAMING / design
I worked as the senior UX/UI designer for project. I created personas, work flows, wireframes, visual design screens and style guides. I was also one of the main points of contact for the client throughout the project, and often headed calls and creative presentations when needed.
Below are a few screenshots of the existing P3 database, followed by our redesign. It was an interesting test to redesign a website that was basically a large project database.
The original PD3 database website wasn't responsive, so it was challenging to design the new one for the smallest breakpoints. We wanted to keep as much functionality as possible, while ensuring the user experience was still straight forward on smaller screens. We used Invision to create a mobile prototype so the client team could see the website as a normal user would, and understand how different elements react.
OLD Project Snapshot page
NEW Project Snapshot page
Below is the mobile Project Snapshot page. Both Project and Partner Snapshot screens are long scrolling pages that are accessed when the user clicks or taps on a project/partner name. Showcasing detailed project or partner information - they include expandable sections and a sticky secondary navigation that allows the user to quickly jump to different areas on the page with ease.
Both Partner and Project list pages show a master list of projects or partner names the user can filter through. In the larger breakpoints, the filter menu expands down from a bar at the top of the map or page. On the smallest breakpoint, the filter menu expands up from an button anchored to the bottom of the browser.
Project List Page
Project List Page - Selection Filters
Partner List Page
Mobile view - Partner List and Project List pages. They were both structured similarly. The Filter panel for both slides up from the bottom.
A straightforward navigation, images & graphics, and an updated colour palette that draws the user's eye to important page elements were a few of the tools we used during the redesign.
Partner Snapshot Page
I also created a working style guide so everyone involved in the project was up to speed on the major (and minor) details, and clearly understood how each element functioned.
The various states of the main navigation
Icons and other elements
Before we even began thinking about a new design, we examined the old PD3 website, and talked to stakeholders and users. We then developed personas and work flows to aid us in the design process.