Loup County Website Redesign
PROJECT DESCRIPTION
For this project, I completely redesigned the website for Loup County, Nebraska. The current website is not user-friendly or designed well. The website that I design will be mobile-first, which means that the website will be viewed primarily on a mobile device. I also designed for a desktop computer. There will be five main pages included in this website design; a home page, a voter information page that includes information on where a voting precinct is located, a drivers test page that shows the hours and location to take a written drivers test and the materials required, a page that showcases the history of the county in the form of a visual gallery, and a building permit page where county residents can apply for a building permit, see a county zoning map, and download information/permits.
RESEARCH
INFORMATION ARCHITECTURE
In order to be prepared to design this website, I began to research. Information architecture focuses on organizing, labeling, and structuring in a constructive way. Within digital design, designers use tools such as layouts and grids to aid in creating an effective structure for their design. The architecture and flow of the content is just as important as the content itself. Information architecture allows information to be represented in a clear and concise manner for the viewer. When information is complicated or unorganized, the viewer will lose interest. Information architecture is the backbone of design because it allows the user to complete their task instead of trying to figure out how the design works. There are many principles that contribute to information architecture design. Some to keep in mind are the following:
-Gestalt principles: These principles experiment with the visual perception of elements in relation to one another. This includes things like symmetry, similarity, continuity, proximity, and closure.
-Mental models: These are assumptions that people have in their brain before interacting with a product. When designing, it is important to take mental models into account so that the design is most beneficial for the user.
-Cognitive load: This is how much brainpower a user puts into using and interacting with the product. Our short-term memory cannot handle too much information and this why it is critical to keep information organized and minimized as much as possible. The rule of thumb is that the range of options a user has available should not exceed seven.
Left Image: Graphic showing how IA design connects user with content and context. Center Image: The elements of user experience, credit Jesse James Garrett. Right Image: The gestalt principle, credit Eleana Gkoga.
TYPOGRAPHY ON THE WEB
While researching typography, I realized that typography is just as important as the graphics and images in a design. Typography must be legible. You must use typefaces that match what you are trying to communicate. Typographic hierarchy is also very important. This is where you organize text using size, color, weight, etc. to show the user where they can find certain information. For example, headers are usually a larger size and can be bolder so that they grab the attention of the user and tell them what the following information will be about. A few examples of effective typography are shown below.
EFFECTIVE WEB DESIGN
While researching effective web design, I noticed that organization, clean typography, a strong color scheme, and cohesiveness are all parts of a successful website. Websites that are interactive as you scroll or hover over with your mouse are also effective. Something that we have discussed in this class is that designs with typography need to be light text on a dark background or dark text on a light background. Each of the examples below incorporates that principle and it provides great contrast and readability. Especially with websites that contain larger amounts of information, using this principle is key.
REVIEWING OTHER COUNTY WEBSITES
While researching other county websites, I found that a lot of them were very poorly designed. There were a few I found that were slightly more user-friendly in some of the sections but not in the others. Below is an example of a decently designed website. It is for Grays Harbor County, Washington. The use of color and icons is organized and easy to use. There is a sufficient amount of contrast and flow. There is definitely room for improvement but it is better than a lot of county websites.
Left Image: This is the home page of Grays Harbor County website. It is fairly organized and user friendly. Center Image: This is the "Agendas and Meeting Info" page. It is somewhat organized but lacks typographic hierarchy and is very dense with text. Right Image: This is the "Parcel Search and Make a Tax Payment" page. They introduce some new colors here that do not match the original color scheme. It is confusing and has little information.
LESS SUCCESSFUL COUNTY WEBSITES
This is the website for Ada County, Idaho. While the top of the homepage is decent, as you scroll down it becomes very dense with information and announcements and is very poorly organized. On some of the pages the alignment doesn't match. On the bottom right image you can see that there is left aligned text and center aligned text. It makes the information feel scattered and messy. The color scheme is not strong. There are the main dark blue and lighter blue they are using but then the stripes on the right-side tab introduce a new plethora of colors that are distracting and too busy. On the bottom left image you can see that the type in the button titled "General Request Form" is not centered and it looks awkward. There are many ways this website could improve.
Top Left Image: This is the top of the home page for Ada County. It is fairly user-friendly and organized. Top Right Image: This image shows what is featured on the home page as you scroll down. It is very information dense and unorganized. It is hard to know where to look. Bottom Left Image: This page show the Public Records Request page. It isn't as text heavy as some of the other pages but it could be better. Bottom Right Image: The different alignments make the information feel scattered and messy.
SKETCHES
Here are a few sketches that I have done for the mobile version of the Loup County website.
SCENARIOS
1. The local Loup County elections are coming up. Use the website to locate your nearest voting precinct.
2. Your daughter would like to get her driving permit. Use the website to find out where and when she can take a written drivers test as well as what she needs to bring.
3. You would like to renovate your kitchen and bathrooms in your house. Use the website to apply for the correct building permit and look at the county zoning map.
4. Your son is learning about the history of Loup County in school. Use the website to help him learn more about the history of Loup County.
FLOW CHART
I created a flow chart to show how the pages included in my website are related. It shows what interactions will occur within the website and mobile version.
WIREFRAMES
These wireframes are a rough draft for the final. They will get user tested which will help with finalizing my website/mobile-site. I have created wireframes for both applications. I am still learning how to create interactions in Figma which is my biggest struggle right now.
DESKTOP WIREFRAMES
Image Left: Home Page which includes upcoming events/other events. Image Right: Loup County Voting page
Image Left: DMV page. Shows location & hours and wide variety of tools. Image Right: History Photo Gallery for county
Image Left: Building Permits page includes country zoning, application, and permit details. Image Right: Footer for website
MOBILE WIREFRAMES
Image Left: Home page including events in the county. Image Center: Voting page including candidates and tools to find local voting precinct. Image Right: DMV page with four options and location/hours.
Image Left: History page including photo gallery and short descriptions. Image Center: Permits page including county zoning map, application, and details. Image Right: Footer with more country information.
USABILITY TESTING WIREFRAMES
USER 1
User 1 was able to get through the scenarios without any issues. They were able to easily navigate the scenarios and find everything that was included in them. They made some suggestions for some of the blank frames and thought the rough draft was very user-friendly.
USER 2
User 2 also got through the scenarios quite easily. It took them a second to get oriented but once they did it was very smooth for them. They didn't have any suggestions and was excited to see a more finalized design.
USER 3
User 3 took longer to get through the scenarios than the other two did. They struggled a little to locate different things on the pages. Other than that it went well. They mentioned that they thought they would be able to navigate it better when it was more finalized.
ROUGH DRAFT
I made adjustments based on the first round of user tests. I began to collect all the images, colors, typography, etc. in order to start filling in the wireframes. It went pretty smoothly, the thing that took the longest was creating the interactions. I have very little Figma experience and so I had to look up tutorials and teach myself how to prototype.
Image Left: Desktop version of Loup county website. Image Right: Mobile version of Loup county website.
USABILITY TESTING ROUGH DRAFT
USER 1
User 1 got through the scenarios pretty well, but there were a few hiccups. On scenario one, she was able to pull up the first map but got stuck on the zip code page. I had to show her how to click to the specific precinct address. She got through the other three smoothly and understood what they were looking for.
USER 2
User 2 was also able to get through most of the scenarios without a problem. They did have trouble on the second scenario about the written drivers test. They were looking for the location and hours and tried to click "Schedule Skills Test." The location and hours of the DMV were in the blue box above. After stumbling on that part, it took them a minute to figure out the "What to Bring" button.
USER 3
User 3 on the first scenario was confused where to click and first clicked the Loup County button. When it scrolled to the bottom they saw where they were to supposed to go. They then realized they should have clicked the "Vote" at the top. It took them a minute to get oriented but once they did they understood where they went wrong. On scenario number two they got confused about the "permits" button and where to find what the scenario was asking for. I now am able to see how confusing that section is and I am going to fix it and hopefully make it more clear. They said they like the pop up menus and the horizontal scrolling features. They also said they like the typographical hierarchy on the "History Gallery" page. They said they wish there was a button to go to the top from the bottom.
FINAL PRESENTATION
I was able to make some refinements after my user tests and I think it helped my county site a lot! I got rid of some unnecessary buttons to make the information more clear and concise. I made sure all my typography and alignment was consistent and went through the prototypes to make sure all the interactions were in place. I focused a lot on color, repetition, variation, etc. The feedback I received from user testing was very helpful. It helped me to problem solve and see my designs through a fresh set of eyes. Overall, I think this website is cleaner, more minimalistic, and much more user friendly than the original Loup County website.
FIGMA PROTOTYPES
I have included both the mobile and desktop prototypes that I created in Figma. The content and information is the same for both but there are some slightly different layouts. The interactions were fun and fulfilling to put together and I like seeing it all work! The mobile version is on top and the desktop version is below it.
