Loup County, Nebraska Website Redesign
UX Case Study • Figma • 2022
Project Brief
For this project, I was assigned to redesign several pages of the Loup County, Nebraska website. The goal of this website is that busy citizens will be able to visit the site often and easily be able to navigate through the website to find specific information. I am being asked to design desktop and mobile versions with a priority being mobile design. The pages I am being asked to focus on in my redesign are the: home page, voter information page, drivers testing page, photo history page, and building permit page.
County Website Research
I reviewed several other county websites and found some that had a pretty good design layout and some that did not. I first looked up Lincoln County, Wyoming website because that is where I am originally from. There overall design was simple it was easy to find information and navigate the website. There were a few places that I thought were buttons to click on and see information but then they didn’t navigate anywhere so obviously there were errors in the design. The typography was great though and the use of visual hierarchy was effective. I looked at Utah County, Utah website and it was alright, but the icons weren’t cohesive throughout the design and when you scrolled the top dashboard overlapped the other information you were scrolling through. The typography and the IA was pretty effective and only had minor issues. It was good to look through different country websites so I could better see what was effective and ineffective.
Effective Informational Website Design Inspiration
Elite Daily:
This website had a lot of information on it, but it used visual hierarchy super effectively and that helped break up all the information the website was presenting to the user. The use of negative space is also a great way this website was able to breakup their information and images. I really like this website because it presents the information is a fun and unique way. I think I will pull a lot of inspiration and ideas from this site.
The Outline:
This website uses visual hierarchy effectively to make headings stand out, so you can find information you are looking for and navigate through the website effectively. It has a lot of bright colors on this sight, but I think it is used in an effective and cohesive way, so it is not distracting. One way they used color that I like was when you hovered over text that was a button it changed color. The images on this sight is visually interesting and placed in affective ways so it flows with the rest of the design. An interesting aspect about this website is that it uses a Serif and San Serif font, but the typography is large enough it is still readable.
Fly Hyer:
This website has very clean and visually aesthetic design. On the sites home page, it has great use of negative space but also uses imagery with a fun animation to grab viewers attention. It uses great visual hierarchy it the typography so you can easily navigate around the website. The use of color is very uniform throughout the whole website and really ties everything together and makes it look great. It also uses the color as way to separate information which is a fun way to design the website.
FPP:
This is a super unique website! When you scroll it simulates a grocery store like you are walking down the aisle of a store. I thought this was a good website because it shows how you can be creative and think outside the traditional box and the way most websites are designed. It has great use of color and flow. This sight also uses typography effectively in created visual hierarchy and helps you navigate your way through the site.
Sketches: Mobile + Desktop
Wireframes
Desktop:
Mobile:
Flow Chart
Scenarios
Scenario #1:
You won’t be able to make it to the polls the day of the election. Use the website to navigate to the voting page and request an absentee ballot.
Scenario #2:
Your son just turned 16 and needs to get his license. Use the website to navigate to the DMV page and schedule an appointment on Friday the 18th, a day your son doesn't have school, so he can test to get his driver's license.
Scenario #3:
Your son is doing a school project on the history of Loup County. Use the website to find pictures of the wooden villagers and what year they were first placed around Loup County.
User Testing Round #1
User Test #1:
My cousin user tested and looked at my wire frames and gave me a lot of feedback on how to improve my designs. She was able to work through all my scenarios and make it from one page to another. She suggested that I make things larger on my mobile design because some stuff was looking like it would be small and hard to see. She told me to make my navigation bar across the top into a hamburger menu icon that would open the menu bar on the whole page. She also suggested I make the website footer larger because it was really small.
User Test #2:
I user tested my wire frames on my roommate, and she was able to move through the scenarios fairly easy. She really liked my “vote” section to see who was running for office. She also suggested I make things bigger on the mobile version just so they would be easier to see and make everything flow better. Some of my fonts were small and she was having trouble reading them on the mobile version.
User Test #3:
I user tested on my stepdad, and he was able to move through my wireframes. He said he like the boxes and all the different places I was planning on putting pictures and thought that would look really nice on my designs. He suggested I make the absentee ballot pop up bigger to fill the whole page or just make it larger.
Desktop Revisions
Mobile Revisions
User Testing Round #2
User Test #4:
My mom user tested my desktop and my mobile versions. She suggested making the name bigger under the people running for office, it seemed a little small and she though it would look better larger. she also suggested making the text bigger under the drop-down menu on the navigation bar. She also suggested the scroll to be smoother on the photo history page with the hover feature I put on the photo’s it stops whenever the cursor scrolls over the photo so she suggested I make it so it can scroll right over the photos. She liked how easy it was to navigate and find things on the website. She was able to move through the scenarios and find her way around the website easily without too many errors.
User Test #5:
My cousin user tested my desktop version, and she suggested that I make the navigation bar I put into my footer into links that connect you to the other pages, because there was not point of putting the links in there and not having them do anything. She also noticed that some of my flows were broken after my pop-ups and other things appeared so she told me I should figure out how to fix those to make things flow more smoothly. She also suggested I put titles on top of my photo headers so that people knew what page they were on better.
User Test #6:
My cousin’s husband user tested my mobile version for me and had lots of great feedback. He liked the hamburger button and felt like that really made it easy to navigate through the scenarios instead of it being on the home page. He liked how that kept the home page simple. He did get a little confused about the voter page link being under the resident’s section and felt like it should be under services with everything else or maybe just in the menu option all together, so that gave me something to think about in how I should better fix that design function. He liked the history page and the hover feature and how it was a fun way to get information quickly. Overall, he thought it was really easy to navigate and that I should change minor things to make it even more simple.
Final Design
Revisions
After receiving feedback from my user testing, I made significant changes to my prototyping. I was able to learn more about variants on Figma and that made it a lot easier prototyping. Through updating my prototyping and the flow of my website on Figma it gives the user a way better user experience and the website a lot more user friendly.
Conclusion
In conclusion, through usability testing I was able to create an effective and aesthetically pleasing final design. Through user testing I was able to figure out what was working effectively and what wasn’t working with my design. I was able to move text and images around to create effective visual hierarchy in my website design. My overall goal was to create a more visually pleasing design and a more effective and use friendly design than what was already in place and being used. I am happy with how my final design turned out and how much I was able to learn from this project.
