My Design Challenge: Parking Services UVU
The Basics
Challenge
Look at the site overall and create a homepage that highlights its features. Think about the people who would likely use the site and what they need to have a good experience. Use responsive design so the site looks and reads the same on mobile, tablet, and desktop with minor design changes.
Role
UI Designer
Tools
Adobe XD, Google Forms
Duration
One week and two days. (time limit chosen by me)
The Process
1. Site Analysis
I looked at the site in its current form, started an organizational scheme for all the presented information, made printouts of each page, and determined the most critical information.
2. User Survey/Personas
Using the website's primary content, I surveyed 22 people through Google Forms to determine what users wanted to be displayed on the Parking Services homepage at UVU. Then, I based four personas on this information.
3. Wireframe
I formatted ideas about the most important for the wireframe from the survey information. Starting with a paper prototype, then moving to a vector prototype made in Adobe XD, and finally moving to annotate the paper and the digital copy of the desktop page.
4. Surface Composition
Added the content to both the desktop and mobile wireframes. This step included text and images.
Site Analysis
Knowing that the homepage would be related to the other pages currently on the parking services website, my first action was to study the website to find out what it was all about. From this analysis, I found that the main points that had to be covered were parking permits, citations and appeals, the rules of acceptable parking, and directions for the parking offices.
The next step was to print out all the pages and combine the things I thought were the most important. The photo on the left shows what the grouping looked like. At the top was an introduction to the page.
Below, individuals purchase permits in a specific order and determine the required type. Next was a parking map that correlated with the various permits. Then, citations and appeals information. Lastly, a physical address for the parking offices.
One thing you know as a designer is that your thoughts don't always align with what the people who use the site see. So, using what I found through my site analysis, I moved on to user surveys.
User Survey/Personas
Survey Content
Establishing Survey Participant's Base Information
- Have you been to UVU, or do you go to UVU? Have you used on-campus parking services?
- Age/Gender?
- UVU Status?
- Reason for your last visit?
Main Questions of the Survey
- Why do you visit the parking services information website when visiting UVU?
- The worst and best thing about www.uvu.edu/parking/?
- What are the most important things to include in a parking services homepage?
Results
From the survey information, I created lists, the first of which included current students, graduated students, employees, and visitors. I made four personas from these four things, starting with a written version.
A final version with color images and more information than on the written page came next.
The list below shows the order of the most critical items to include on the page.
Wireframe/Surface Composition
I started with paper wireframes, first for the desktop and then for the mobile. At this stage, I had to develop a design that would work as the beginning content. I used an idea-generating strategy called Crazy 8's. After I drew them, I asked two people for their opinions on their favorites in order 1–4. Here are the drawings and the results.
I was not completely satisfied with the options I had created, so, with a suggestion from one of the two people questioned, I did it again, this time with only a Crazy 4. This brainstorming activity is where I found that separating the content into the four categories of students, employees, visitors, and vendors did not work.
I went with the fourth and final idea at the bottom right because it separated itself into parking categories rather than persona categories.
Once this was established, I could draw my paper wireframes, starting with the desktop. I completed them with annotations to clarify design aspects further.
I transferred the same layout to mobile, making all the content one column.
From there, I moved into the digital wireframes, using pre-established design files for desktop sizing on Adobe XD. I wasn't quite as lucky to have the same mobile resources. I utilized the original site for the header and footer of the mobile version.
In the same file, I included the surface compositions as well.
Final Words
Doing something outside of schoolwork was an excellent experience. This article highlights my talents and abilities as a designer.
