Johns Hopkins University

Campus Safety

Project Overview

Understanding a need to reach a target audience that was transitioning to being primarily mobile, the team at Hopkins was concerned that their existing experience  just wasn’t gonna cut it. You know why? Because they didn't have a mobile website!

Tools used
  • Axure
  • Adobe Photoshop
  • 2016
  • @SAI
homepage mockup of johns hopkins university campus safety website on laptop

Project Goals

Since the team at Campus Safety did not currently have a way to reach people on-the-go, the primary goal was to be able to ensure that a mobile experience could be served to both students and parents. Secondary to that, was to provide a refresh to the design of the desktop site. It hadn't been updated since the 90's ya'll.

Wireframe First

Working with a team, the first step was to do analytical research, competitive analysis, outline a Website Architecture (IA) as well as a component list. We also formulated a menu system, which determined a list of templates for important pages including; the homepage, landing page templates, and a few unique interior pages.

mobile mockup of interior pages of campus safety website design

Responsive Designs

After the wireframes were conducted, the design phase began. A mobile-first approach was taken while also keeping in mind that we need to think about tablets too. We also made sure that we utilized Hopkins University existing colors and fonts to build an experience that was clean and unobtrusive to the user.

tablet view of crime prevention tips page

We Want You TO Be Next

Reach Out.