deb yan
deb yan
Fighting_06 Pofo E.png

Redesigning Bridg-it's Dashboard & Reports

 

Redesigning Bridg-it School's Dashboard & Reports

 
 

Original site home page (2014)

Redesigned desktop home page (2017)

Overview

After completing work on some of the icons in the original Reports interface, I pitched the redesign of the Reports system on the Bridg-it School platform using the themes we used in the Resource Center project. I wanted better integration of the icon visuals into the interface composition, and a clearer display of the user's progress when filing a report. New report types also needed to be added to the system as well.

The Dashboard (home page) was also refreshed, making all other pages and important information much more accessible than in the original design. Since the Bridg-it logo had a prominent orange color to it, I chose a dark blue as the main header color with more cool grays in this version.

Here you can see some examples of the designs I worked on to give the platform the look that it has today.

Initial Wireframes:

Designs that went into production:

Original desktop reporting interface (2014)

Original desktop reporting interface (2014)

Redesigned desktop reporting interface (2017)

Redesigned desktop reporting interface (2017)

Fighting_06 Pofo C.png

Mouseover states

For the What section

Fighting_06 Pofo E.png

More information

Displayed using a dynamic progress bar on the left

Original design, location of risk indication

Original design, location of risk indication

2017 redesign, moving risk indication to Who section

2017 redesign, moving risk indication to Who section

Adding unknown person with description

New icons for risky behavior reporting

New icons for risky behavior reporting

 

Location

4th page showing all school location icons designed by me

 

Original design for Submit Report

2017 redesign, with more descriptors and progress

 

Mobile Designs

 

We also needed to change how reports would be viewed on both desktop and mobile. I focused on keeping the colors used in the File Report section consistent with the View Report pages, while adding new functions and interaction elements to the system.

Original Reports list screen

Original Reports list screen

2017 Redesign of Reports list

2017 Redesign of Reports list

Marvel prototype of mobile View Report: