Passport Services Redesign

This project was undertaken during my time as a Graphic Designer working at UCI Transportation and Distribution Services.

Duration: 1 day

Tools Used: Paper, Adobe XD

The Problem

I served as the sole designer of this project. Though I had creative freedom, I was directed by my supervisor to adhere to typical UCI design guidelines.

Project Role

UCI Transportation and Distribution Services was looking to update and modernize some of the websites it manages. In this case, I was tasked with redesigning UCI's Passport Services website. The original site is pictured below.

Ramping Up & Design Evaluation

Before working on a design, I decided to look at other well-designed UCI websites for inspiration. Cross referencing other highly trafficked UCI websites would also help to create a more cohesive online identity for the university as a whole, rather than independent departments with different styles.

Two highly trafficked UCI websites are uci.edu and studentcenter.uci.edu (pictured to the right). I noted that both of these sites utilize images that span the entire screen. I also noted a few sections contain images beneath a low opacity shape and text. I much liked these conventions, and decided to note them for use in my wireframe, and eventually the Adobe XD file.

Other than that, the Passport Services website as it was also felt a little plain and archaic — almost similar to pure HTML. Let's see what we can do to fix that!

The Wireframe

Using the ideas gathered from other UCI websites, I rearranged some of the information on the original website.

Some primary changes I'd like to highlight are:

Modernized navbar
Header image spans width of entire site
"SCHEDULE" button moved on top of image
Cards host important information (Location and Hours)
Three pages near bottom standardized

After this basic outline, it was time to stylize it and turn it into a proper mockup.

The Mockup

I chose the text on top of the main header image by assessing what was important to the department at the time. When the mockup was created, this was something that UCI Passport Services wanted to highlight, so it deserved a spot at the very top of the page. I also added a dark, low-opacity shape behind the text to increase readability.

Location and hours are two things users would likely come to the page to learn. Since I foresaw this as a particularly common reason for visiting the website, I added two large icons to serve as visual cues for this information, allowing users to find the information more quickly. I also chose sleek, rounded iconography to add to the modern look of the page.

Lastly, near the bottom of the page, I superimposed the text over the images and stretched it across the width of the page to make the site appear more condensed. This allows a user to scroll less while still seeing the same important information. Note that I changed "Location and Hours" from the original page to "Directions and Parking" in the redesign. Because this project was meant to be an overhaul of the entire website, my supervisor approved this change because she agreed that location and hours is important enough information to host on the home page. Also note that I swapped the positions of "Application Forms" and "Directions and Parking" (formerly "Location and Hours") from the original page. The reasoning for this is that visually, it was more appealing to have the more colorful image in the center, with the two duller images on either side. This helped play into a sense of visual symmetry.

Reflection & What's Next?

As this was a low-priority project for the department, I was not given the opportunity to revisit this project and design the other pages. However, if I were given more time, I likely would have added interactivity to buttons and other elements to make the site feel more dynamic and engaging. For example, it would have been interesting to have the background images of the three pages near the bottom become darker in their "mouse over" states. This would not only make the site more interesting, but it would be very important for improving accessibility by increasing contrast.