County Site Redesign

Designing a website of county resources for residents of Loving County, Texas

image of Texas counties logo
image of map final map

Project Problem and Context

Context

The Loving County website was created to direct residents and visitors towards the small county's resources and general information including administrative contacts, the weather, and quick facts about the county. Presently, it is nonviable due to its significant usability and accessibility issues. I developed a design for the website to address these issues and allow Loving County residents to access important county information and resources with ease.

Timeline: 2 Weeks (October 2022)

Team Size: 1

Role: Sole Designer and Developer

Design Problem

The current website has substantial usability and accessibility issues, so residents are unable to easily access county administrative information and contacts.

Design Solution:

I created a new, responsive design of the website, enabling users to access important resources quickly and easily.

image comparing initial and final site

Identifying Issues

Original Website

The Loving County website was created to direct residents and visitors towards the small county's resources and general information including administrative contacts, the weather, and quick facts about the county.

image of original site

Problems with the Original Website

The original website has a number of usability and accessibility issues. Generally, there isn’t a clear hierarchy, intuitive affordances, or a proper site structure. These specific issues can be seen below:

Usability Issues:
(hover to zoom)

image showing usability issues: 1) color changes subtly when a link is pressed 2) links are only partially underlined 3) cursor doesn't change on hover

Learnability Issues:
(hover to zoom)

image showing learnability issues: 1) links to county and state resources aren't obviously seperated 2) links are misaligned 3) text is very small and there is little contrast 4) there is no heirarchy

Accessability Issues:
(hover to zoom)

image showing accessability issues: 1) no HTML language attribute on page 2) No HTML headings 3) No page regions

Design Process

Key Objectives

Image of project goals: 1) Address main usability challenges 2) Present information heirarchically for easy access

Process Overview

This project was very time constrained with only two weeks to complete. As a result there wasn't time to set up much feedback and testing. Still, I tried to prototype and make adjustments at each stage to determine what is effective. This was the total process with which I made the redesigned site:

Image showing process: Low-Fi prototype to hi-fi prototype to final design

Low-Fidelity Prototyping

I began developing a design by thinking about how to address the key usability issues with the original site. The wireframes below show how I first thought about developing a clear heirarchy and intuitive interface on different screen sizes. I thought the best way to address the challenges with the original site would be to clearly organize the resources into categories and include icons to help users. The wireframes I ultimately developed, with development annotation included, can be seen here:

Desktop:
(hover to zoom)

image of desktop mockup

Tablet:
(hover to zoom)

image of tablet mockup

Phone:
(hover to zoom)

image of phone mockup

High-Fidelity Prototyping

After developing the low fidelity prototypes, I looked at what I liked about the design and made a few tweaks before creating hi-fi prototypes in Figma. Specifically, I thought to shift some of the icons to a different row as this would be more intuitive, and chose to have the icons change color on hover so users would know that they could click on them. Finally, I picked a color scheme which I thought fit well with the project theme and helped in establishing the heirarchy. The annotated hi-fi prototypes can be seen here:

Desktop:
(hover to zoom)

image of desktop hi-fi mockup

Tablet:
(hover to zoom)

image of tablet hi-fi mockup

Phone:
(hover to zoom)

image of of phone hi-fi mockup

Final Design

From the hi-fi prototypes, I developed the final design for the website which can be explored here. The site design (which does not have working links) maintains an intuitive display, and is an exact copy of the hi-fi prototypes.

Conclusion

Don't cut corners when developing. This was one of my first ever development projects and I really struggled. I wasted a lot of time doing rather trivial things and reading very basic documentation (the learning process, I suppose). Constantly, I found myself tempted to cut corners or change the design to make development easier. I realize this is a constant challenge when designing and developing, and this project highlighted for me the need to stay honest to produce the best product by compartmentalizing the design and development processes.

image of final site