Stratford Police Website

In the winter of 2016, I took part in an in-class contest to redesign the current Stratford Police Service (SPS) website for the city of Stratford, Ontario. My team and I wanted to show just enough creativity while still staying true to a classic and serious police vibe. In the end I think that is one of the main reasons we won out of  19 website designs.


For this project, the team worked very organically together while designing and testing the website. All five of us were involved in each part of the project. We all shared our perspectives and skills and taught each other new things. 

team

Team

Jensen Chadee

Megan Demaree

Tom Richards

Vivian Tian

Time Frame

10 Weeks

Goal

Create a fully functioning, well designed website

 

Phase Two: Sketch

Action items

  • Brainstorming: Brainstorm and discuss ideas for the website
  • Sketches: Finalize and draw out the best ideas that came out of your brainstorming. 
  • Visual Design: Create Style Tiles.
  • Make UI flow: Create each page and the elements in them. 
  • Vote: Finalize and vote of what the team likes best. 

Phase One: Understand

Action items

  • Client Analysis: What do the SPS need in a website? What are their hopes for the new website?
  • Design Audit: Review of existing site. What are the pros and cons of the site?
  • Competitive Analysis: Review other Police websites. 
  • Stakeholder Map: Who are the users?
  • User Research: Who are the users? What are their needs?
  • User Personas: Three distinct personas that represent our stakeholders. 

Phase Four: Final Prototype and Test  

Action items

  • Take feedback and update prototype
  • Create website assets
  • Create final site using Adobe Muse
  • User test with SPS and community members
  • User test with designers

Phase Three: Prototype and Test  

Action items

  • Create a simple wireframes prototype
  • User Test with SPS
  • User Test with community members
  • User Test with designers
 

Here is Some of the work we did that Led to the final site

  One of the   User Personas

One of the User Personas

  Stakeholder

Stakeholder

  One of the Wireframe we made

One of the Wireframe we made

  Home Page Before

Home Page Before

  Home Page After

Home Page After