WEBSITE – Loup County, Nebraska

OVERVIEW

As a user experience exercise, I was tasked with redesigning the website for Loup County, Nebraska. The new site should have some basic information and pages that are useful to the user, and emphasize type as the main focus of the design. I have also been challenged to create a mobile version of the site, along with a desktop version, to better understand how to utilize space.

RESEARCH

To build my visual library, I searched for websites that have fun and interesting designs. I also looked at other informational county sites that aren't as interestingly designed, but provide a good baseline what a typical county website currently looks like. These designs provided useful visual information so I could better challenge myself in creating a new look for this county site.

I also spent some time researching concepts that would be useful to me on this project: information architecture and typography on the web. Developing an understanding of these concepts was useful when I moved onto my sketches. Web design is different from other kinds of design because of the high amount of interactivity involved. As design on the web continues to grow, it's important to understand how a user experience can be as efficient and enjoyable as possible.

Scenario 01

You have just moved to Loup County, and want to find your voting precinct. Use the website to find out how to vote.

Scenario 02

Your younger cousin needs to take his written drivers test, but doesn't know when or where to take the test. Use the website to help him out.

Scenario 03

You have a history project for school and want to learn about the history of Loup County. Use the website to learn about Loup County's history.

Scenario 04

Your neighbor is moving, and wants to build a house in Loup County. Use the website to help your neighbor apply for a building permit and learn about zoning.

SKETCHING

While sketching, I spent a large amount of time focusing on the layout of the home page. More emphasis should be put to the other pages that relate to the scenarios, but with these sketches I wanted to explore the different layouts I could possibly use. By focusing more on the homepage, I was trying to discover a layout I thought best fit the site. This helped me when I moved on to the other pages of my site, because I had established a baseline for what I wanted the layout of the site to look like.

Most of my sketches focused on typography, since I think an informational site has more to gain when text is emphasized over images. While sketching, something that was the most challenging was figuring out where to place images in interesting ways. I hoped to get a better understanding of where to place images during user testing.

WIREFRAMES 01

My start to sketching and wireframing was a big eye-opener for me. I struggled to design the wireframes, mostly because I had a lack of understanding as to what makes up a county website. After making my desktop and mobile wireframes, I realized I needed to do more research to help me make a more informative and realistic site.

I spent some time doing more visual research, looking through the county websites I had referenced earlier to find out what kind of information was included in their sites. I realized that some were fairly easy to find (such as the county's history) while others were generally very difficult to find (notably the driver's licensing).

While doing my research, I took note of where the various pages were located on the sites I visited and how I could make these pages easier to find. I also recorded some additional features that could be beneficial in my final site. I used these notes to make more effective wireframes for my user testing.

WIREFRAMES 02

USER TESTING 01

The first stage of user testing was an interesting process for this project. I realized I needed to completely reevaluate how I would approach this project after conducting these tests, which were helpful but also not as efficient as they could have been. As I continue, I hope to find testers that more closely align to my target demographic.

PROTOTYPING

Prototyping was a rocky process at first. I thought I had established a better understanding of what the website required while sketching and researching, but the prototype made me realize I needed a lot more information than I had accumulated. Luckily, this gave me the chance to focus more on the UI while I found content and decided what to include. I went through a good number of iterations for the UI before I found a solid style, and I was excited to include many different experiences for the user.

Although "mobile first" is a common sentiment among web designers, I found that designing the website first helped me find the right layout. I believe that a subtractive process is easier than an additive one, and once I had established a good desktop design I began moving those designs into my mobile.

Desktop Prototype

Mobile Prototype

The biggest change I made while working on my prototype was deciding to alter my header for the pages that include maps, specifically the zoning map. The change can be seen below in the image on the right. After receiving feedback, I realized that it made the space more interactive and interesting. Although I decided to not use this same format for the precinct map (because there are other main features within the precinct pages), I may explore that in the future. I also made edits to my scenarios.

This round of user testing was very informative, and I could tell at this point that I had a more solid idea of what I needed to work on as I continued work on my prototype. Although none of my testers were exactly in my target demographic (all my testers were college students in their twenties), I still learned a great deal from user testing.

The main issue that I found while user testing was my menu bar. Although all of my scenario pages could be easily accessed from the menu bar, all my desktop testers wanted to scroll down to access the pages. They also tried to use the dummy search icon, which I likely won't rig in my prototype. This made me realize that most people will gravitate first to the search bar, and then to scrolling. I realized I needed to make my menu more clear.

User testing also made me realize that some elements of my UI were unclear. The menu bar wasn't clearly visible due to the photo I had been using, and the typography could likely be changed in some places. I was also told that making my site more interactive, with interesting and engaging animations, might help a user connect more with my site.

Going forward, I realized I needed to really refine my design and make everything visible, as well as make sure that every part of my prototype was rigged correctly.

REFINEMENTS

I made some final adjustments before conducting my last user test. Most of my edits were dedicated to making each page more visually interesting and cohesive, especially in the header space. I also added more responsive elements to each page so the user could feel more drawn in. There were also some minor layout adjustments, but at this point I had established the final structure of both my desktop and mobile sites.

In my final round of user testing, I ended up changing my scenarios slightly to more accurately match my new website layout. My zoning scenario was changed to a property assessment scenario, which fills almost the same function. Other than some minor UI edits, my users were able to complete all my scenarios very easily on both desktop and mobile. I also discovered that I was missing a good amount of rigging in my prototype. Because my design was firmly established, I spent time after testing making sure everything was rigged correctly and different elements were responsive and interesting.

FINAL PROTOTYPE

My final prototype was relatively streamlined, with few artboards, but I tried to utilize responsive elements to make the pages appear more fleshed out. I thought this would give the user the sense that the pages are more built than they actually are. My user tests had helped me find some issues with my rigging, but in the future I'd like to find testers that are more closely aligned with my demographic so I can have optimize my testing for the audience of the project.

Overall, I think my prototypes in both desktop and mobile are successful. Each page follows the layout grid, and I think the visuals are interesting and keep the user engaged. In my user tests, most testers said the color palette felt cohesive as well, even with the many different images. As for improvements, if I were to have more time to rework this project in the future I would tighten up the layout so it looks more professional, and make sure each button and space felt responsive and interactive. Although I liked the mix of serif and sans serif typography, I would also spend time making sure they are used in consistent ways. I might also do more research to be sure my website has all necessary and relevant information for the project.

Below you can find a full visual walkthrough of my desktop and mobile sites, as well as mockups of the pages I find particularly successful.