Loup County, Nebraska Website Redesign
Project Brief
For this project I was asked to do a complete redesign of the Loup County, Nebraska website. While I was given a lot of artistic freedom for this project, the guidelines specified I would need the following five pages:
1. The Loup County home page
2. A voter information page that helps users learn where their voting precinct is located
3. A drivers test page showing the hours and place to take the written drivers test, and any materials that might be needed to do so
4. A photo history page showing a photo history of the county, including a visual gallery
5. A building permit page where county residents can apply for a building permit, see a county zoning map, and download information and permits
The Current Loup County Website
Above are images of what the current website looks like for Loup County Nebraska. It is very simple, a little outdated, and has very little information readily available to the user.
Information Architecture Research
Information architecture is the practice of organizing information and content in a way that makes it effective. In my research I found these 8 principles from CareerFoundry to be extremely helpful.
Objects: Content should be treated as a living, breathing thing. It has lifecycles, behaviors, and attributes.
Choices: Less is more. Keep the number of choices to a minimum.
Disclosure: Show a preview of information that will help users understand what kind of information is hidden if they dig deeper.
Exemplars: Show examples of content when describing the content of the categories.
Front Doors: Assume that at least 50% of users will use a different entry point than the home page.
Multiple Classifications: Offer users several different classification schemes to browse the site’s content.
Focused Navigation: Keep navigation simple and never mix different things.
Growth: Assume that the content on the website will grow. Make sure the website is scalable.
Typography in Web Design
Most people are very aware that typography plays a significant role in design but few people know that there are actual rules that should be followed in order for the typography a design to be effective. To become a designer, I was required to take a course completely devoted to the use of typography in design so of course I know it is significant. That being said, the way typography is used in web design has it's own set of rules and principles because of the way the content is viewed and how the audiences engages with it. While some principles overlap, there are distinct differences between the rules for typography in printed design and design for the web.
I found this infographic from QuickSprout to be very thorough and a great summary of the principles I learned in my research.
Scenarios
Scenario 1:
You have just recently moved to Loup County, Nebraska from out of state and you are in need of a new driver's license; use the website to make an appointment to take the written driver's test.
Scenario 2:
The November elections are approaching, use the website to find the voting precinct where you should go to vote.
Scenario 3:
You are ready to add electrical to the tiny house on your property you are building for your mother-in-law; use the website to find the proper electrical permit before you start.
Scenario 4:
Your 8th grade son has been assigned a project in history about life in Loup County after World War I, use the website to find photos and info about the mayor from the 1920s.
Research and Sketching
This project felt very broad and overwhelming at first so I started by breaking down my research and sketching into the different scenarios I would try to accomplish. The following are screenshots of sites and elements I found intriguing or inspiring in some way for my own design.
These are from my first round of sketches where I was just trying to narrow down my focus and figure out what the overall style and feel of the website would be.
Flowchart and Wireframes
Creating this flowchart helped to clarify and organize my thoughts around how I wanted to accomplish my scenarios. This made it much simpler to begin assembling my wireframes. Next time I think I will do a rough draft of this before sketching to help clarify that process as well.
I created these wireframes to give myself an outline of how I would like this website to be laid out. I used an image from google as a placeholder for the illustration I planned to do with a similar style but more of a rural, country theme. My plan is for this illustration to be the central point of unity throughout the website. Pieces and elements throughout will tie back to this main illustration.
Each of these pages represents the first step to each of my scenarios.
User Testing 1
Because my wireframes are so simple at this stage, my user testing was mainly to test if my different elements were in the expected locations for my users. I tested a 38 year old male, a 45 year old female, and a 62 year old female. They all had trouble with the homepage because my navigation is small and nondescript. I think I can improve this by repeating these navigation options within the body of the page. They also struggled with the driving page but that is because it is not complete.
At this point in the project I started working on the transitions and interactions that would occur on the webpage. I also created a mobile version of my design so that it would be responsive.
A Major Shift
At this point in the project I started adding the illustrations and images and I thought I wanted it to be mostly icons and illustrations. I also had a dedicated page for each scenario. After getting feedback from user testing and peers, I took a hard look at the design and realized there was a lot of information I was including that was completely unnecessary. I looked at each scenario individually and narrowed it down to just what I needed and found that, with a little creativity, most of the experiences could be included on just the homepage.
Scenario 1:
You have just recently moved to Loup County, Nebraska from out of state and you are in need of a new driver's license; use the website to make an appointment to take the written driver's test.
For scenario 1, The user flips through a series of sliders to make their appointment for the driver's test and is rewarded with a tiny icon animation at the end to confirm it is complete.
Scenario 2:
The November elections are approaching, use the website to find the voting precinct where you should go to vote.
For the second scenario, all of the voting information is readily available. The user knows that the VOTE square is interactive by the color change when they hover over it and then a large map of the county fills the screen as they find their voting precinct.
Scenario 3:
You are ready to add electrical to the tiny house on your property you are building for your mother-in-law; use the website to find the proper electrical permit before you start.
The third scenario has icons that enlarge and are labeled when hovered over. When clicked, a popup appears explaining the type of permit and a button to download.
Scenario 4:
Your 8th grade son has been assigned a project in history about life in Loup County after World War I, use the website to find photos and info about the mayor from the 1920s.
Lastly, scenario 4 takes them to a separate page with an interactive time wheel that turns when you select your date. The photos enlarge when hovered over and a popup with more information appears when the photo is clicked on.
Desktop Prototype from Figma: Desktop Prototype
Mobile Prototype from Figma: Mobile Prototype
Final Remarks
As you can see my redesign of the Loup County, Nebraska website completes all of the tasks that I was asked to include and is more modern and interactive than the original site. I wanted to create an engaging, interactive experience for the users of this site and I believe that I accomplished this goal.
The link to view this video presentation: Video Presentation
Credits:
<a href="https://www.vecteezy.com/free-vector/social-media-icons">Social Media Icons Vectors by Vecteezy</a>
<a href="https://www.freepik.com/free-psd/digital-device-screen-mockup-vector-with-laptop-smartphone-with-gradient-wallpapers_17611603.htm#query=computer%20mockup&position=6&from_view=keyword">Image by rawpixel.com</a> on Freepik
Image by <a href="https://www.freepik.com/free-psd/web-template-american-food-with-burger_7797487.htm#query=computer%20mockup&position=0&from_view=keyword">Freepik</a>
<a href="https://www.freepik.com/free-psd/laptop-screen-mockup_9141336.htm#query=website%20mockup&position=23&from_view=keyword">Image by rezaazmy</a> on Freepik
Icons:
Shashank singh, Thanga Vignesh, DinsoftLab, Tippawan Sookruay, Ranah Pixel Studio, rdesign, Chacha Sikes, Scott Dunlap, AomAm, Afdalul Zikri, firdaus husyaeni, lalpawat, Adrien Coquet
