Security Journey

Web / UI / UX

The Need

In reference to the outdated UC Davis Security resource website (seen below), most students we interviewed said that they had a difficult time navigating through the large amount of links, and they weren't even sure if the information was specifically for them or another audience (teachers/staff). As a result, I was responsible with designing a new website that contained interactive content just for students and also appealed to the demographic that lived in Davis, CA.

The Research

Through focus groups, surveys, and usability tests, I was able to gauge an underlying consensus from students that have navigated the security webpage. Students did not want to see a plethora of links at their disposal; instead, they wanted concise and relevant information presented to them in a language that they could understand (no tech jargon!).

Old website

Wireframes

In this project, my first step was to analyze the current security homepage and filter out any irrelevant or outdated info. Since the website hadn't been adequately updated in nearly a decade, many resources had become dead links or the department info was no longer current.

Based on the resources that were still being maintained, I designed service catalog icons that would be part of a step-by-step checklist for a student who was new to computer security.

security icons

After presenting the website wireframes to the IT group, one thing that was noticeably lacking was the sense of a UC Davis identity. These mockups, while they did present content in a more organized layout, could have been designed as any other university's website.

security mockup

The Solution

In order to provide a sense of community for UC Davis users that navigate the security page, I thought of incorporating landmarks and sites unique to the city of Davis. With as much as 20% of Davis' residents riding bikes, I wanted the visual journey to also be based on a bike path throughout the city. Using the analogy of properly equipping and maintaining a bike, I connected it to the similarities in securing a computer or laptop.

Security Journey

Using a parallax scrolling effect, the bike and cityscape illustrations provided a visual narrative which made the security content more enticing and relatable for the student audience.

View the live website here.

Resources

Brackets code editor, jQuery Parallax plugin by Ian Lunn, Adobe Illustrator, UX focus group data, City of Davis sights and sounds