ART337 | Website Design

design designer Figma photoshop Responsive Website

redesign Loup COunty, Ne Website

BRIEF DISCRIPTION

http://www.co.loup.ne.us/ This is a very poorly designed website that does not serve the user very effectively, and looks very outdated. The goal is to change this website into something more modern and visually appealing, and at the same time taking into consideration the user experience. This website will be designed with mobile first approach, but include many other features available on the desktop view as well.

INFORMATION ARCHITECTURE

The purpose of information architecture is to help users understand where we are, what we've found, what’s around, and what to expect. This is important because there needs to be awareness brought to the user so they don't get confused.

The main components of information architecture are: organizing schemes and structures (how you categorize and structure information), labeling systems (how you represent information), navigation systems (how users browse or move through information), search systems (how users look for information).

To better understand this, you must understand users, content, and context. The users include the target audience and what they can get out of the information, their behavior in seeking information, and their needs. The content aspect can be understood by knowing the objectives and values, their overall outcome, and structure. The context focuses on external factors that play a part in information architecture like social media, culture, government, and technology.

TYPOGRAPHY ON THE WEB

Typography on the web is essential to incorporate because it is the first thing to notice or see, and that is how we obtain our information. First thing to notice, is the trends that change as new trends or typefaces come out. Typography helps the content be easily skimmed by using contrast and hierarchy. Another aspect is kerning which is the space between letters. This paragraph would be really hard to read if all the letters were crammed together like sardines.

Along with kerning comes leading and whitespace as well. The importance of this is so the text is readable and so the information can be visually organized. The use of color can be overdone in many cases on the web especially when it comes to the typography because there are so many fun colors to work with, and different places to show importance. However, if everything on the page is screaming then nothing is audible, in other words, if everything is big and colorful the user can't be drawn to one part or another.

The last really important element of design that has to do with typography on the web is alignment. Alignment can influence the overall layout and feel of a website, and can draw people to the site or away from it. When text is aligned there is a level of professionalism that is acquired, and the website can flow and make it easier to navigate for the user.

VISUAL RESEARCH - DESKTOP

From the visual research of modern design there are a lot of good qualities I found that I want to try and incorporate into my website. First, Parallax Scrolling which is a way of taking up more space, and also to make the website feel more like a story. I think this is a great way to make little amount of content feel like it is taking up more space. Full page headers is another thing that is new to web design, and this site already is trying to implement that, but it should be done in more of a creative way to be engaging. The last aspect from my research I want to incorporate is different typography layouts such as vertical or horizontal with only outlines and large text.

VISUAL RESEARCH - MOBILE

One of the trends from this year is a mixture of brutalism and minimalism. Brutalism was really strong a few years ago, but it is calming down thankfully. Text overlay is also a very popular trend now as long as the text overlay does not interfere with the readability of the text then it is considered good design. Another big aspect of mobile design is that they are simple and responsive. Another big trend that I have seen in many places on mobile designs is the neon mist which is a very contrasting ombre of colors that websites are incorporating in their backgrounds and even in some of the text. Typography is important because text heavy websites are also back

BAD DESIGN - DESKTOP & MOBILE

There are many websites today that are outdated, poorly designed, or unresponsive. I find it very entertaining as a Web Design major to notice the different aspects of a website that need improvement. There are some that would benefit by simply adding a media query and making a mobile design, others need a lot more work. These examples are extremely bad designed websites that are quite humorous to inspect, but there is a lot to learn about how to organize information and images in a clean and creative way. Making sure there is visual hierarchy is a theme I see consistently in the poorly designed websites with typography and images.

SKETCHES HOME

Loup County home page with headlines on the side (image 1). History section scrolling to the side, and the navigation layout set (image 2). Mobile view of home page all stacked and centered (image 3). Bottom of home and navigation (image 4).

SKETCHES VOTING PAGE

Voting page to register and click on state to find precinct (image 1). Zooming in on the state and location, with the voters and their party (image 2). Mobile view of voter page, I voted stickers running along the bottom (image 3). Bottom of voting cantered (image 4).

SKETCHES DRIVING PAGE

Drivers test page with headlines on the left, and a place to enter license plate number to register. (image 1). Map to find current location, select a time and reserve a drivers test (image 2). Mobile view of driving test, pretty similar (image 3). Bottom of driving page, centered and scrollable (image 4).

SKETCHES BUILDING PAGE

Building permit page with scrollable information and downloads (image 1). A place to select the application and submit it with a map of the zones (image 2). Mobile view of building page, more centered with image above information (image 3). place to upload instead of drag and drop application (image 4).

SCENARIOS

Scenario 1

You are doing a research report on Loup County Nebraska. Use the website to find historical photos.

Scenario 2

You are a mother with a teenage son who wants to get his driver's license. Use the website to make an appointment for a driver's test on February 12th at 10:00am.

Scenario 3

You are from Loup County Nebraska and you are filling out your ballot. Use the website to find where your voting precinct is located.

Scenario 4

You just moved to Loup County Nebraska and want to build a home. Use the website to download information and forms for a single family home.

FLOWCHART

The flowchart runs through each scenario and maps out where the user should click based on the layout of the wireframe. There is not a navigation set up yet, I am still deciding where I should put them, or if they should always be in a hamburger menu. The first scenario starts out easy and is on the home page. This is so the user is familiar with what is on the home page and so they will look to the other pages for the other scenarios. The next one is on the driving page, and this is a little more complicated because I made a scheduler for the driver's testing DMV. The next scenario is to find out which voting precinct you are in which is on the voting page using a zoom click and drag feature. The last scenario is on the building page where the user should download the forms for a single family home.

WIREFRAMES BEFORE

The wireframes are just the start of the mobile and desktop versions of Loup County's website. There are a lot of modern involved text and details. The pages are very large and readable, with headlines creatively placed on the side. There are many click and drag features, and parallax scrolling to implement once the images are set in place. I received feedback for the titles and some people said they think the large text should be darker because they read that first.

USABILITY TESTING

Scenario 1

Scenario one was easier to begin with because the user was already on the home page, and all they had to do was locate the header of history and assume that the camera film would be filled with pictures. If there were pictures there it would have helped, but all of the users understood and found where the historical photos were.

Scenario 2

This scenario would have worked better if there was an introduction to the sign up process. 2 people understood right away that the computer was going to take their location to start, but one was confused and scrolled past it. The scenario is very specific in order to make the user sign up for an exact slot to go to the right screen, but the users soon forgot the date and time and began haphazardly clicking around once they got to the date choosing part. The submit was easy to find.

I got good feedback on this part of my site because registering a car does not require you to enter the license plate number, that is only for renewing registration. I thought this would be a good way in the future to schedule an appointment online, and to be able to register your car from home instead of waiting in the long lines.

Scenario 3

precinct was. I was unsure at the beginning and I wanted to make an interactive way for them to see it, and to understand what it is. The main guide in this scenario was the headers on the side because the users did not have any other option. They were able to find the map, but they did not recognize the zoom feature to see a closer look at where their voting precinct is located. I received feedback that the zoom would make more sense if it was vertical. Then, another said a hover effect that allowed you to move over the map would be beneficial.

Scenario 4

This scenario was the easiest, there was only a few misconceptions as to where the user should click. One user clicked download, another clicked on the image, and the other clicked on the entire box. After, they realized that they need to click on the icon because it highlighted in blue. They found the feature at the bottom to see which zone they are in very unique and fun. the mobile version is not as entertaining, but the desktop has a good transition. There were many users who wanted to decide for themselves where the pin goes, but that will have to wait to be further implemented.

REFINEMENTS

There was a lot of good feedback that I received from usability testing, peers, and others. I decided to make the headers more readable, and create greater hierarchy, whitespace, and movement across the screen. I added the line to draw attention and to create repetition with the smaller text. There is already a lot of overlapping text so I decided to keep the headings separated. The 12 column grid looked off center with the headings so I moved them off the grid so the content could center and be proportionate. The fonts were adjusted to go better together and look more professional. The navigation was too basic so I went back to my sketches and used the vertical one that I drew in the beginning. All of the content was sized down from before because the users felt like they were using a tablet. The hardest part is implementing the user experience in the mobile version as well.

DRAFT WITH CONTENT

At this point in the project, I have the first draft that has the majority of the content included. There still needs to be a logo and some more coloring, but this is a good start for user testing. I changed a lot of the functional parts of the website that come from the prototyping in Figma. There are cleaner transitions and more pages for the driving DMV scheduler. The background images do not have the same colors so the text has to be different colors laying over the top of them. The historical photos now have a vertical scrolling feature that adds to the effect of the film.This site has a purpose of holding a lot of information to direct people to other sites. There is not a lot of text content, but more images for quick links to get places that will have more information on the subject.

USABILITY TESTING

Scenario 1

The first scenario was simple, on the mobile versions, there is not a vertical scrolling feature for the explore section which is where it stops scrolling on the desktop version. There is the history section after the explore section, but they are different experiences and on the desktop version it was harder for them to figure out the prototype. All of the mobile users had success with it.

Scenario 2

The driving section was made simpler and so the users were able to understand how the schedule works. I had one user ask about why their name was not required for the schedule, and they wanted even more personalization to add a type of car. They all thought the plate number was a unique aspect of the site. I had one user mention how the license plate has 7 numbers. The mobile experience was the same as the desktop, and the users were able to successfully accomplish the scenario for both the phone and desktop versions.

Scenario 3

Most of my users were unsure about what a precinct was, but thankfully the headlines were able to help the users find the right section. I received feedback that there needs to be consistency across the pages so I used the same format to find the precinct as I did to schedule a driver’s test. I also was told to make the running section more interesting visually. I had one user that said this was so easy and that there should be a similar way to vote, and all of the other buttons should be this simple. If there were other scenarios, I know now to use the same components to make it feel like the same experience. This section was also exactly the same from the difference to mobile and desktop that it was easy to find, and in the same spot. I had one user mention that they should be able to click on the map and it would take them to Google Maps.

Scenario 4

The last scenario was for the building page and it was the most simple page for the users to complete the scenario because the download button is right at the top. I was told by one of the users who was 47 years old that I should do user testing on people older than they are to see if they know how to complete this task and decipher what the download symbol is. The map at the bottom took too long to transition once the users dropped the pin, and so they recommended it being at the same speed that they drag their cursor. The users wanted a lot of personal experience, I had another user that wanted to place the pin anywhere and did not want to be in zone 30. Both the mobile and desktop versions made sense, and the users were able to successfully accomplish the task. There was one user that thought she used the navigation to build a home so she clicked on the building page and then the home page which caused her to leave. I think the scenario was just thought out too much for her, I need the home page it is just one person who was confused as to what the navigation at the top is used for.

Loup County home page desktop and mobile with mobile navigation (image 1). Voting page with forms filled out to find voting precinct on desktop and mobile (image 2).

Driving page with form to schedule appointment on mobile and desktop (image 1). Building page to download forms on desktop and mobile (image 2).

REFINEMENTS

Across the pages there was a lot to change after the usability testing, and receiving feedback. There was a need for oder and consistency. There were a lot of good components that were creative on their own, but the site needed something to unite them all together. I implemented the white boxes of information that are used to enter and display information, and the backdrop to some of the subheadings are some components that I used to make the site come together. The implementation of color and designing a logo for the footer the same as the homepage helped the little details make the site feel more complete.

FINAL CHANGES

There were a few changes made from the advice that I got from user testing. The concept of the pages made sense and the prototyping worked, there were just a few small details in the design that needed to be changed. First, on the driving page, I edited the order of the importance and size of the elements. Then, I added a picture to fill the white space because there needed to be another element that was 6 columns wide on the other side instead of centering the small sign up form. On the home page, the services turned into a component that I also used again to change the buildings on the building page. I made the outline over the whole element not just the label. Then, I made the explore page fit the grid as well, and have an outline so it felt like its own experience.

FINAL DESIGN

Overall, I ended up making a home page, with three other pages to accomplish the four scenarios in the beginning. There was a lot of trial and error and many user tests to make sure that all of the features on the website were easy to find, and made sense. This website is designed with a mobile conscious design that was built first on a desktop to see all of the elements knowing that eventually it would also be a mobile accessible website. Taking all of the information on Loup County as I could, I constructed a modern designed website with unique vertical text, animated transitions, and new technology for the future of county websites. Using my knowledge of information architecture and typography, I was able to position and organize text and images on the four pages and use hierarchy, leading, and kerning effectively. The users that I tested this website on ranged from 16-47 years old, and they all gave me good feedback on what made sense and what they expected from a website with this many features. In the end, I was satisfied with the design, and the consistency that was improved over the weeks.