WEB / UI

UC Davis Security Landing Page

Security & Privacy parallax landing page for students, in mobile, tablet, and desktop screens

overview
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.

Old UC Davis IT landing page

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!).

Initial landing page wireframe and visual direction

initial 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.

Proposed iconography for first design iteration

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.

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.

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.


Security & Privacy parallax landing page for students on a tablet screen