PROJECT PITCH: MOBILE-FIRST WEBSITE REDESIGN
This project centers around redesigning the website for Loup County, Nebraska. The website is currently very information-heavy and is filled with extraneous links. The project isn't just about reorganizing and restructuring what currently exists, but it is meant to be a complete overhaul of the site. We have been tasked with creating a mobile-first design - one that will focus on function as well as a clean, streamlined page. While there is usually much more associated with a government page, the main focuses for this project will be:
- The Loup County home page
- A voter information page that helps users learn where their voting precinct is located
- 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
- A photo history page showing a photo history of the county, in the form of a visual gallery
- A building permit page where county residents can apply for a building permit, see a county zoning map, and download information and permits
SCENARIOS
Scenario #1: You want to add a deck to your single-family home. Use the webpage to find your project and download the appropriate PDF application.
Scenario #2: The May elections are coming up and you need to know where you need to go to vote. Use the webpage to find your voting precinct and then use the webpage to find out how to prepare for voting day.
Scenario #3: You just moved from a different state and you need to change your license. However, to do so, you need to take the State's driving test. Use the webpage to schedule your exam.
Scenario #4: Having just moved to Loup County, you want to know more about the local history. Use the webpage to discover the county's timeline and see what happened in 1919.
INFORMATION ARCHITECTURE
Information architecture is the focus how and where information is organized, specifically in reference to digital products. Individuals screens must be designed in such a way that users can easily navigate through the screens and find the information that they need. Content is the reason that people visit websites. While it's important to create valuable content, it's even more important to organize that information in an easy-to-find way. Time is considered to be the most valuable resource that a user has. The more time a user spends trying to find something on a webpage, the less likely they are to return in the future. Structuring information in an organized format allows every user to focus on their task and not on navigating through a website's wealth of information and subpages. In addition to this, there are a few more key principles to information architecture:
Cognitive Psychology
Psychology, at it's heart, is how the mind works, including how we perceive things. We need to be able to structure information in such a way that can be easily perceived and understood. In understanding how others think, we are able to anticipate their needs and their process as they move throughout a webpage.
Gestalt Principles
This primarily refers to how information is presented and visibly organized on a page. As important as minding perception is when we are designing, we have to remember that elements such as similarities, proximities, and symmetry all play together when viewed by the user.
Mental Models
Most people already have thoughts and assumptions in their mind the second they hear of something. The concept of mental models refers heavily to signifiers in the design world, as humans naturally have preconceived notions about certain objects, symbols, etc. Good designers need to anticipate existing mental models and weave them into the webpage to effectively communicate intentions and directions.
Cognitive Load
Every user only has so much energy that they are willing to invest in a product. Make it too difficult to interact with, they will lose interest and move on. For example, too much text on a page can be incredibly overwhelming and hard to visually digest. Users have to sort through everything they are seeing to find the information that matters most to them. Likewise, providing too many options can also be distracting. As a general rule, no more than seven choices should be presented at a time.
With all of these things in mind, IA focuses on three main things: users, context, and content. Balancing all of these three things is what makes a webpage (or any digital information design) successful. With the focus on users, that's where information architects bring in their knowledge of mental models and cognitive psychology. Content makes a webpage valuable. Context brings everything together in an understandable way.
Essentially, the work of an information architect is essential to accomplish anything of value with digital design. Carefully constructing how information is organized increases the overall functionality of a webpage, and makes it possible for the user to navigate successfully through any given task.
An example of website flow (photo 1) The three main focuses of Information Architecture (photo 2) Website architecture (photo 3)
TYPOGRAPHY ON THE WEB
Typography on the web functions very differently than digital text. Primarily, printed text cannot be altered. It remains the way it is, no matter how you view it or touch it or interact with it. Digital type, on the other hand, can change from device to device. Aspects such as screen size, resolution, and screen calibration can all have a major effect on how digital type is perceived. In order to ensure maximum readability, there are a few things to consider. First, keep the letters distinctive. It's often tempting to use fancy scripts whose individual strokes vary widely from letter to letter. However, when used frequently, the letters as a whole become difficult to read and distinguish from one another. It becomes laborious to interpret. In line with this, we want to chose typography that has open forms, clear terminals, and plenty of contrast.
Beyond the letters themselves, it's also important to consider the background and surrounding elements of the text. We want maximum contrast between the text blocks and the background, so it's important to choose background colors that have very different values from the text. In addition, we want to establish good text size - not too big, not too small.
Three different ways typography is viewed on devices (photo 1) Four different webpage renderings of the letter "a" (photo 2)
RESEARCH
Alameda County (photo 1) Bannock County (photo 2) Dallas County (photo 3) Madison County (photo 4) Sedgwick County (photo 5)
While doing research for this project, I explored several other county websites to try to gauge some successful and unsuccessful ways of organizing so much information. Above, are several county webpages I found that felt unsuccessful to me. I felt that these examples were mostly too information-heavy. There are too many colors, too much to look at, and far too much to read. In the case of Madison County, there was too little contrast between the text and the background, making the webpage virtually unreadable. Sedgwick county's website was incredibly information-heavy. Scrolling down just brought up two pages of text that listed news, numbers, and events. It was far too much to look at.
Kootenai County (photo 1) Contra Costa County (photo 2) County of Kings (photo 3) Denton County (photo 4) City of Boston (photo 5)
Above are some county webpages I found that I felt were a little more successful with their overall designs. While not perfect, they exemplified a more simple layout, and information was concise and easy to read. As a whole, there are still too many colors being used, but these webpages provide a format for easier navigation. However, I feel that the City of Boston has a very good website that is fun and easy to explore. It has a simple color palette, and much of the site is well balanced and appealing to the eye.
Additional webpages that served as inspiration for this project
In addition to researching unsuccessful and (more) successful county webpage design, I also branched out to discover 2022 website design trends. I pulled several designs that I felt would integrate well with a county site and added them here to reference.
BRAINSTORMING AND SKETCHES
Content hierarchy and flow (photo 1) Initial app sketches, based off original website (photo 2) Revised sketches that better reflect content hierarchy (photo 3)
Home webpage (photo 1) Voter information webpage (photo 2) DMV services webpage (photo 3)
Photo history webpage (photo 1) Building permits webpage (photo 2)
With my brainstorming and sketches, I initially started with a content inventory. It won't be used, however, since we are designed a complete overhaul of the website. However, I feel like it gave me good grounds of what is typically included in a county website - what's necessary and what isn't. From there, I started out with sketching the mobile version of the website. I did this to at least make sure I got all the critical information and a general format figured out. From there, I started sketching out the webpage. The problem I'm running into here is an abundance of white space. I'm finding it difficult to fill the page while not overloading the user with extraneous information. I'm hoping that usability testing will provide some feedback on how to accomplish this.
USABILITY AND SKETCHES
User 1, usability testing
User 2, usability testing
USER 1
Name: Kelli M.
Occupation: Accounting
For the most part, Kelli M. responded favorably to the initial website sketches. She did note the abundance of white space, and offered a suggestion that perhaps there could be a little more overall structure to the pages. There is no harm in making icons bigger, so long as they show or lead to something important. The home page in particular will need work.
USER 2
Name: Robert M.
Occupation: Cyber Security
Robert M. tends to prefer function over design. If a button or link isn't obvious in indicating what it is or what it leads to, it shouldn't be there. Or, at the very least, there should be some text accompanying it to explain what it is. The scenarios weren't difficult to navigate, but he had a lot to say about what else could be included on the page, considering he's had to visit sites like these frequently.
WIREFRAMES
USABILITY TESTING
USER 1
Name: Kelli M.
Occupation: Accounting
Kelli M. found that the page that was most lacking was the DMV services page. There's typically a lot of information involved with preparing for a driver's exam, and there has to be a better way to organize it. She suggested having a section for practice exams. Additionally, she responded favorably to the building permits page, and the elections page, though she noted that the mobile-version still needs a lot of work and refinement. Navigation of all scenarios was a success.
USER 2
Name: Robert M.
Occupation: Cyber Security
Robert M. really wanted the "contact" option to be front and center. He says that this is a very important aspect of his use of county websites and it should not be difficult to find. Even though contact forms aren't included in the scenarios, it's still a good suggestion. Eventually, he found the option listed at the top of the page. I asked where he normally looks for contact information, and he says right up front as well as in the footer. I will have to keep that in mind as I continue working through the next iterations. He had a lot of suggestions about the DMV page, which mostly included a lot of information that will take some creative design to fit in and make useful. He responded favorably to the building permits and elections pages.
DIGITAL ITERATION 2, ADDING COLOR
With this draft in color, I chose a color palette from Adobe Colors that represented the word "country." It's very green heavy, with a splash of white for a modern feel. At this point, I'm still struggling with the DMV Services page, so that one is a little behind than the rest. There are a few more things that need to be added to the building permits page, and I want to adjust the history page as well, but I'm comfortable with the color palette and I feel like suitable progress has been made.
USABILITY TESTING
User 1, usability testing
User 2, usability testing
USER 1
Name: Kourtney P.
Occupation: Baker and Company owner
Kourtney P. has built up her cookie company from scratch and has done all the design work for it as well, so she has an eye for design. Overall, she felt that the direction of the county webpage was good, and she only offered some minor adjustments to create better alignment and spacing between elements.
USER 2
Name: Corey M.
Occupation: Project Management
Corey M. did not have too much to say in terms of critique. They were very satisfied with the look and feel of the website, but mentioned how most county pages have a GIS service. They highly recommended I add this function in conjunction with the permits page, as it would be an incredibly useful tool for anyone needing a permit to understand the topography of the site they intend to build on. This is not something I had ever heard of before, and I think it will be an important addition to the permits page. They told me that all county webpages should appear simple and easy to use, as well as easy to navigate because there's so much information that is condensed on the page. They felt that I have done a fairly decent job with keeping true to that so far.
DIGITAL ITERATION 3, REFINEMENTS
Home page
DMV Services webpage
Elections page
Historical timeline page
Building permits page
USABILITY TESTING
USER 2
Name: Brooke
Occupation: Student
Brooke liked the webpage, though she suggested there may be a little too much green. I asked others, and objectively, they felt the same. They liked the green, but especially on mobile, they felt it was a bit much. Brooke also suggested I add another accent color to break up the green.
USER 2
Name: Kim
Occupation: Office Manager
Kim responded favorably. She had nothing major of note to add. Her only comment was to make sure the text was aligned the same way on each page.
USER 3
Name: Robert
Occupation: Cyber Security
Robert liked the addition of all the maps in the permits page. He was pleased to see one of his ideas implemented in this iteration. However, he pointed out that each of the webpages was missing a way to return to the home screen. This is a critical feature, and will need to be added for the final product.
FINAL ITERATION
USABILITY TESTING
User 1, usability testing
USER 1
Name: Robert M.
Occupation: Cyber Security
Robert really liked the website and navigated through the prototype successfully. He has no complaints, and he appreciated how everything had icons/symbols attached to it and that key features were easy to find. At the beginning of this project, he insisted that a directory and contact function should be top priority, so I made sure to add those. His experience previously working in government and with government was invaluable.
USER 2
Name: Kelli M.
Occupation: Accountant
Kelli did not have too much to add about the webpage. She likes it and noted that it is easy to navigate and functional. She particularly liked the permits page and the DMV page, as she recently had to take a new state's driver's license exam and she remarked how the county webpage then was a nightmare to find what she was looking for. So, she thinks that this format is very easy to use in comparison.
USER 3
Name: Kim K.
Occupation: Office Manager
Kim has not had a lot of good experiences with government webpages, so she really liked the format of the project. She also felt like there was a little too much green, but she liked the rare pop of blue.
FINAL SPREAD
Full Adobe XD spread (photo 1) Breakdown of prototype (photo 2)
PROTOTYPE WEBPAGE
PROTOTYPE MOBILE
VIDEO PRESENTATION
CONCLUSION
Overall, I am very satisfied with the end result of this project. I think it fulfilled the brief and creating a much more interesting and interactive government webpage for users to enjoy. I also believe that it is much more easy to navigate, as I strove to follow the rules of information architecture - making sure each page flowed in an intuitive way.
