PROJECT02 Loup County, Nebraska
Project Description
We were assigned to redesign the website for Loup County, Nebraska. The existing website is here: http://www.co.loup.ne.us/ (Links to an external site.). Our site must enable visitors to search for and find information about specific topics that county residents would typically need. We’ll need to ensure that busy citizens who visit your site can easily find specific information, and that the typography we employ is both easy to read and aesthetically pleasing.
Research: Information Architecture
What is information architecture?
Information architecture (IA) focuses on organizing, structuring, and labeling content in an effective and sustainable way. The goal is to help users find information and complete tasks. Signage at airports, and subway navigation maps are great examples of Information Architecture in the real world. They both play the role of helping people understand where they are, what's around, and what to expect.
What is information architecture in UX design?
Information architecture is a discipline that focuses on the organization of information within digital products. For example, when designers create apps and websites, they lay out each individual screen so that the user can easily find the information they need.
Why information architecture is important?
A well-designed, user-friendly information architecture ensures that users spend less time and effort searching for information and are successful in finding what they need. A well-designed wayfinding system helps us navigate a new environment in order to answer the following questions:
Where am I?
What’s here?
Where else can I go?
Research: typography on the web
What is typography on the web in design?
Typography in web design is similar to print design but requires certain considerations to ensure legibility on all screen types. Typeface, type size, color, line height, and letter shapes are some of the factors within typography that must be carefully balanced to provide a pleasant reading experience.
We’ve come leaps and bounds in our typeface options. They have been crafted for the screen and are designed with certain nuances that enhance legibility. Just as printed fonts trick the eye to increase legibility, like ink traps, good web fonts will do the same.
Fonts for print are designed to be made of ink. Web fonts are designed to be made of square pixels.
Which font is best for reading on screen?
Fonts that are best for reading on screen are ones with distinctive and open letterforms. Proxima Nova, Georgia, and Fira have characteristics that make it easy to read on various screen displays. Other factors impact a font’s legibility, such as type size, line height, and font and background color contrast.
What is good typography?
Good typography, like good design, is invisible. The primary purpose of typography is to communicate a written message. Type should be designed to be legible and provide a pleasant reading experience. Factors like type size, line height, and line length are elements of typography that should always be considered.
Research：Good informational sites
Web site that do not effectively present data
Brainstorming
Sketches
I haven't completely imagined the necessary items on the page yet, so I will improve it from now on.
Wireframes
I m not designing yet. I simply placed basic labels and other elements on the page where you think they should go.
Flow Chart
Move to another page from navigation bar or menu bar. Also, I'm going to make that can be moved within the page, but I haven't designed it yet. I am going to create more specific design to do user testing.
Scenarios
・You want to take a written driver test but don't know any information. You want to know the time, place, and any materials that might be needed briefly. You can find the minimum required information very easily from this website because this page is very easy to understand and guides the user.
・You are using this website as a survey of the county you live in. In particular, you want to know the flow of history in an easy-to-understand manner. This gallery also records when historical events happened, soYou can easily understand history flow.
・You don't know your voting precinct because you are participating in the vote for the first time. Also you don't like to see a lot of text-field web pages. You can feel easy to know the information, because this website is not just a text-only site, but an eye-catching design.
・You're thinking of living in a new home, but you don't know where and how to apply for permission. Also, you want to live in a convenient and good location, so I need a zooming map to understand it. The large zoning map allows you to see the land in an easy-to-understand manner. In addition, easy-to-understand guidance allows you to know the information required for the procedure without stress.
Usability Testing
User
I think the layout is simple and good, but I still can't imagine how to use it. You should also guide users on how to achieve your scenario.
What I learnd
I should guide more the users to achieve my senario. To do it, clearly explain what the button is and simplify the design. I will add images to do more good usability testing.
Usability Testing-2
User
A lot of images have been added this time, and the atmosphere of the website has become clearer. I think it's okay to make more use of the home slides to display nebraska news and mottos. I don't think the grid and layout have been completed yet, so you can adjust it again depending on what you put on it. I felt it was easier to use than before.
What I learnd
It was difficult because I couldn't adjust the grid well unless I clearly decided what to put on the page and the photos. Also, I feel that the design of the smartphone design grid is too ordinary, so I would like to devise more.
Digital Design
Usability Test 3
User
The design is simple, nothing extra, and easy to operate, but it feels like there is no cohesiveness and unity on each page. Also, even if I press the button, there may be no page after that, so I think you should create it.
What I Learned
I think I was able to roughly arrange and configure it, but I felt that it was necessary to incorporate motion as a signifier in order for users to feel that it was easier to use.
Redesign
Usability Test ４
Animation was added and I felt that it was more guided than before. Your users can be predict what they will be able to do by adding hover.
Prototype
Final Design
Conclusion
Through this project, it was an opportunity to think more deeply about how to guide users using visual animations and icons. The site design I made is simple and I think it can be used without stress for first-time users of the site. In addition, since it clearly shows the information that many people want to know, users can get the information in a short time.
Final design link: https://xd.adobe.com/view/1d5ae530-293d-41b8-b862-d7627b0dfe7e-4809/
Presentation link: https://youtu.be/FVHhr6ozm2A
