To prepare for my design, I began researching information architecture. Information Architecture is the study of how to organize information in a digital product. Some important aspects of information organization that I need to pay attention to in my design are gestalt principles, mental models, cognitive load, and taxonomy. Gestalt principles such as proximity, continuity, and symmetry help users visually understand the information on the page. Having logical and attractive groupings and creating a clear hierarchy will make my website information more digestible and attractive. Mental models are assumptions people have before interacting with products, and they can strongly influence the usability of a website. It's important to ensure my page categories are logical and meet the needs of my users. In the article The Beginners Guide to Informational Architecture in UX by Nick Babich, he talks about using card sorting as a way to ensure the user's assumptions are being met and not ignored. The article also talked about cognitive load, and he said, "cognitive load is the amount of information that a user can process at any given moment. As a rule of thumb, the range of options or choices should never be more than seven." I loved having a rule of thumb to help guide me in my design! It seems that limiting the number of groups in a navigation bar or on a page makes the information more manageable. This goes hand in hand with the importance of creating taxonomy which "is the practice of organizing and classifying items based on similarities" (24 et al., Information Architecture Guide for UX architects & designers: Adobe XD ideas 2020).

In addition to researching how to organize an informational website, I also researched typography on the internet. I learned about the importance of finding distinctive letters that are easy to distinguish. I saw the importance of creating a hierarchy to guide the user through the page. I was reminded of the importance of choosing the right body text size and colors to increase readability. Here are a few examples of effective and attractive typography examples I found during my research. I love the playfulness of having text on its side or slightly hidden behind images, yet the text is easy to read and engaging. 

The next step in my research was to find examples of good web design. I found several sites that divide a large amount of information into pleasing ways. I like that some sites have animated scrolling features which make the text move into place while the image stays where it is, like on the water/sink example below. That's a fun, interactive way to break information into bite-sized details. The Scary Mommy website sticks to the rule of fewer than 7 options at a time, and I love the menu and home buttons that stay at the top of the page as you scroll. The menu button has a lot of options, but they are manageable, and you don't have to see all the options at the same time with the menu hidden. I like the idea of the large picture tabs that open up when you scroll over them in the last website example. I like the scrolling cards on the portfolio page and using a view more button could show the building license information. The last two images have a nice mix of using a grid but also adding interesting elements, like a horizontal ticker that moves, staggered images, and mixing text, image text in a clearly defined group. 

I looked at many country and government examples, and they all looked about the same. These three sites were slightly better, mostly due to the easy-to-use search functions. I liked some features of the Utah.gov site, such as its limited number of tabs at the top, and the focus on the search bar that effectively lets you find what you want on their site. The Kansas City website lets you look up information specific to your area with an address search, which is a good idea that I could expand and improve. The final site is Silverthorne, Colorado. The home page is similar to other government sites, but the drop search menu options are helpful and simplify a lot of information into bite-size actions. 

It doesn't hurt to have an idea of what to avoid in county web design. There was a lot of boxy design with unhelpful tabs on most of the government websites. One of my biggest peeves was websites that grouped their information by department. The average citizen rarely knows what a specific department does or which department oversees building permits or road repairs. These three sites had a lot of information in a small amount of space with very little visual hierarchy. It felt like I had to search and spend a lot of time to find what I wanted and the sites were dull and monotone. 

I created a quick flow chart to help me keep track of where each page should end up and ensure I'm incorporating all the necessary parts of the website.

WIREFRAME

I created wireframes for my site and tried to focus on the flow and which pages would lead to which more than the content. The designs are pretty rough, but I have enough structure and connections to begin testing my site. I created one large home page with different sections, and those sections lead to other pages. The smaller pages are stacked on top of the home page to show the connection between pages. For example, if you click on "find my precinct" you will be directed to a new page with a map. 

My first tester got through each of my first three scenarios with very few hiccups. There were a couple of issues that made the site a little awkward. The page for the DMV appointment was too big, the form was cut off on the right, and it was hard to see all the details. I will change the frame size and adjust the items on the page to fit a little better which should solve that problem. The second issue that popped up was when he closed a history picture page, it took him back to the top of the home page instead of the History section of the page. I'm not sure how to fix that, but I may need to create a new component flow or add another step somewhere. He was able to finish all the tasks except scenario four, which is applying for a building permit. He wanted to click on the icon and didn't notice the download button at the top, which would have led him to a downloading page. If I make the icons buttons, the user won't be able to scroll through all the icons to see the options available. I think I can fix this issue by adding a "download application" button. I'll start with a button and download page to see how it goes with the next tester. ​​​​​​​

My second usability test went more smoothly with the technical aspects. A few sections on the site need to be clarified. The first scenario was easy. My tester found the voter precinct and was satisfied with the results. The second scenario was a little harder. The tester was confused about why she was making an appointment when she was trying to find information about testing. I changed the label on the button so it no longer said appointments, which may have made things worst. It may be helpful to put on the page "the DMV accepts appointments only for testing" or something like that. The 3rd scenario went smoothly. I fixed the history page so that it has a pop-up on top of the picture with more information and there is no longer an issue with the page scrolling to the top when you exit. The last scenario was a little confusing because the user didn't connect "Development" with the idea of adding onto a house. She also wanted to click on the icon in the center of the "O" until she noticed the download button. She liked the download sequence and getting feedback. I need to add some kind of explanation or more information to the building permit page. The information is too sparse, and the arrows may need to be moved. I learned a lot from this test, and I'm glad I know what to work on next. 

My third test was free of any technical glitches, which is wonderful. The user found the precinct for the first scenario very easily. The second scenario went very well, the updated DMV page was easy to understand and the tester was not surprised by the appointment page popping up. The History scenario went smoothly as well. The last scenario about building permits took a while for the tester to figure out. She didn't recognize development as a word and didn't connect development with building permits. The added information was helpful though, so that went better than the last test. I want to keep the O in development, but the word development does not have a strong enough connection with building permits. I will need to either change the base word for the section to something else or add more clarity. I also may need to add a map and more details to that section. 

I made adjustments to my wireframe and began adding more details such as text, pictures, and colors. I also created a mobile version of my site, but I need to set up the links to other pages like the maps. Here are my rough designs. I want to add more color but I'm uncertain about the green I chose. I'm also unsure what to do about the footer section and how to create it. I may change my header section photo. I'd also like to design the DMV cards and create more hierarchy in buttons and sections. I'm ready for my next round of testing before the final refinements where I can adjust those trouble spots. ​​​​​​​

My sister-in-law tested the desktop version of my updated website. She got through the first, second, and third scenarios without any hiccups. The fourth scenario did not go well. The tester found the permit page but didn't know what to do once she got there. She clicked on the zoning map button first but didn't know what to do after. Despite the changes I made the user didn't recognize that she could move through the permits and download the permit she needed. She liked the simplicity of the government page and loved the names I used for the candidates since they are from one of her favorite TV shows. Who doesn't like Parks and Rec?  

My brother-in-law tested the mobile version of my website, and it went pretty smoothly. He got through the first and second scenarios effortlessly. The third scenario to find the history page went ok. He found the page but didn't know he could click on images or read more about the history. I think adding a call to action such as "Founded in 1883, Loup County has a rich history. Scroll, click, and explore to learn more!" Scenario four didn't go very well with this tester either. He clicked on the zoning map button but didn't realize the icons in the "O" were the permits and that he could download and move through them. After two user tests, I know the permit page needs to be altered and clarified, but I'm unsure how to do it. Hopefully, the final test will help me figure out some solutions. 

A friend was my third tester. It was interesting to note that she didn't use the menu bar at the top to navigate to sections of the page, she always scrolled down the page. It made me wonder if a drop-down menu would be more recognizable than the links on the mobile site. The first and second scenarios went smoothly. She wanted to type in a zip code herself on the precinct finder map, which may be a feature I can add. The 3rd scenario with the history page went well. She recognized she could click on the images to learn more. She did not scroll through the images, so I still think it would be helpful to add a call to action to that section or maybe make the pictures smaller. The building permit scenario went similarly to my last two tests, she clicked the zoning map first and didn't recognize the "O" as the menu. She did download an application, but it was not the add-on permits. I need to make the "O" an obvious button with color or a less bold center image. I could also have the images change automatically to let the user know there are more options. Then when the user clicks on the permit they want a download button would appear. I need to add a clear call to action to the permit section and change the zoning map button to make it less prevalent. 

I changed my building permit quite a bit by adding an automatic change between images instead of requiring the user to click through them. I also made the large icon into a button so that when the icon is clicked, more information pops up, and the user can download the application. I also removed the button for the zoning map and made it just green text as a link to the next part. I created some hierarchy in the buttons on the voting section and added a small line of instruction to let users know they can scroll through the candidates. I made the history pictures all the same height and added dates. I also added animation cars to the DMV section. Now, little green cars zoom across each of the information cards when you hover over them on the desktop page. The cars move at a set time on the mobile page since hovering is not possible. I added a news section that moves across the page right under the header image. There are touches of green throughout the page to give direction and add interest. I lightened the green text in the footer and the logo to make them easier to read on a dark background. I'm excited about the changes and ready for another final round of user testing. 

My friend tested my site for me and overall the scenarios went smoothly. My tester liked the ease of the site. She liked the improvements I made to the permit section and liked the time change for the icons. She said, "I know the icon I want will be back soon, and there aren't too many options." She said the text could be bigger on the body copy because it was hard for her to read. She also had a hard time clicking on the Xs to close maps and pop-ups because they were too small so I may need to change the size of the Xs. 

The next user was able to get through all of the scenarios but he also had a hard time exiting out of the pop-ups. I think bigger Xs will make it easier to tap out. This user was also a little confused by the zip code entry on the map, he expected to be able to type in a zip code. I wonder if I could change the entry so it's not just automatic. He was unsure about being able to scroll left or right on the history section and thought he should scroll down. I may need to add an arrow or change the call to action to say "scroll left or right" to make it more clear. Overall, everything went pretty well. 

The final tester tried out my desktop version and she had a lot of feedback. She didn't recognize the top navigation as buttons and thought they were just text. She said she would prefer them as buttons and not just text. None of my other testers had a hard time with that, but maybe if I added a hover color change that could make it clear they are buttons. The site is also scrollable so it didn't seem like the most important change to make. She didn't like the animation on the news slide at the top, she felt like it was awkward and it's something I could adjust. The scenarios for the DMV, History and voter sections went smoothly, she liked them. The final section with the building permits was a little off. She took a minute to recognize that she could click on the icons. She said she'd prefer to see all the icons at the same time instead of having them change. I purposely wanted to limit the options you see at one time to make the site not feel overwhelming. It may be helpful to have arrows on the pop-up building permits so if a user timed clicking on the icons wrong, they could go to the left or right and find the permit they want without having to exit and wait for the one they want to come back.  

My Loup County mobile site gives users the information they desire without sending them to other websites or requiring the user to download a PDF and scroll through that to find their information. The site is more interactive, attractive, and fun than the original site. Feel free to explore and see what the site can do!​​​​​​​

VIDEO PRESENTATION​​​​​​​