making a database user friendly

Client:  Canadian Council for Public Private Partnerships       Project Date:  2016
About the Project
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.
My Role
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.
About the Project

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.

My Role

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.

from old to new

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.

OLD Homepage

NEW Homepage

designing for mobile

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

designing for mobile - snapshot pages

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.

Animated Screen: This shows how the sticky secondary navigation works. As the user scrolls down the page, the secondary navigation appears just below the browser bar. If the user taps on this navigation bar, it slides open to reveal the names of the various sections on the page. Clicking on one of the names will jump the user down to that section.

list pages

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

it's the little things...

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

the beginning of the process

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.

related works

Want to see more?  Let’s go back to my  Portfolio