Timeline
My Role
Project Type
UX/UI Designer
Add A Feature
Duration
Nov 2023 (2 weeks)
Tools
Figma, Maze
Overview
The goal of the project is to add a feature to the Henrico County website that would improve online infrastructure and improve access to information, especially for those who are not as tech-savvy.
Why? Well it started with my interest in beekeeping and raising chickens. I was driven by a desire for a natural and locally-sourced diet, which I believe can positively impact my physical well-being. However, obtaining information about necessary permits and agricultural ordinances has been challenging on the website. Despite extensive searches, comprehensive and reliable information has been elusive.
This has led to the realization that centralizing such resources on the local county website would be invaluable for people seeking agricultural information. The plan was to improve the website with a more robust search system to make it a one-stop shop for accessing information.
Challenges
1. Being the sole designer on this project: The integration of the new feature should seamlessly align with the existing design system.
Competitor Analysis
Before conducting user interviews, I aimed to analyze other county websites to grasp their strengths and weaknesses. I found that the websites for St. Louis County and St. Petersburg County had the most robust search systems.
.png)
Understanding the Problem
In the preliminary phase of my research analysis, I compiled a set of compelling questions that not only captured my attention but also steered the course of my exploration. These questions served as a valuable roadmap, guiding me to probe deeper into the intricacies of the subject and identifying promising avenues for further investigation
What specific challenges do the users encountered while using the current features on the county website?
What is the user specific thoughts when using the current search system?
How can we make the website more user friendly and reach a more wider audience?
User Interviews
Key Findings:
1. Inefficient Search and Navigation: Participants struggled with the current website's search functionality, facing difficulties in finding specific information due to broken links and outdated content.
2. Overwhelming Website Structure: The existing structure with numerous menus and submenus was perceived as overwhelming, making it challenging for users to navigate effectively.
​
3. Lack of Consolidated Information: Participants expressed frustration over the absence of consolidated information on crucial topics such as agriculture, permits, and ordinances, requiring dedicated sections for easier access.
4. Accessibility for All Technical Levels: Participants believe that the new feature should be available to everyone, regardless of their technical expertise. They suggest using clear and concise instructions, bold text for emphasis, and user-friendly tools.
5. Efficient Integration of New Features: Participants noted it's important for the new features to be easy to use and integrate smoothly with the existing system. They don't want to have to learn a whole new system.
.png)
THE CORE PROBLEM - What Have we learned?
Participants want a county website with improved search, navigation, and consolidated information. They also want a user-friendly interface, clear organization, prominent display of critical information, and accessibility for all residents. Integrating new features seamlessly is a challenge but crucial.
At first, I was primarily concerned with the limited agricultural information on the website and overlooked the broader perspective.
My original assumption:
.png)
After interviewing others, I now recognize that the real problem lies in the website's inadequate search system.
My new understanding:
.png)
Problem Statement
User Point of View (POV):
As a resident with a disability, i find it challenging to access and navigate the county website, hindering my ability to obtain critical information i need.
How Might We (HMW):
How might we optimize the website's accessibility features to effectively accommodate a diverse range of users, ensuring inclusivity and ease of use for all?
Empathy Map
I synthesized the insights from user interviews and competitor analysis into an empathy map.
.png)
Personas
I created a user persona to summarize the key pain points and goals of my target users for quick reference.
.png)
Feature Set: Must Have
Now that we have our user persona as a reference, it's time to consider the essential features that will make the app successful.
Improved Navigation Feature:
This feature will involve redesigning the website's search interface by adding frequently searched keyword terms and other common searches.
Participant 2
"The search engine could be more geared towards keywords relevant to this day and age."
.png)
.png)
Consolidation of Information:
This feature will involve consolidating information for all categories.
Participant 2
"Information about agriculture is buried in submenus and hard to find."
Accessibility for All Technical Levels:
This feature will implement user-friendly buttons that are easily visible on the screen, ensuring readability and accommodating various user preferences.
Participant 4
"The new feature should cater to residents with varying technical skills; it needs to be more user-friendly."
.png)
What did I not include?
I did not include features such as Real-time Support Chat, Easily Adjustable Text Size, Color Blind Support, and Interactive Maps. If the project is approved, it would be essential to incorporate these features.
Information Architecture: User Flows
After outlining the app's features, I developed user flows. This approach helped me anticipate users' potential actions on each screen and determine which elements to include. Ensuring that each screen offered multiple alternative paths enhanced the overall usability of the app.
Low Fidelity Wireframes
After gathering requirements and understanding user needs, I created wireframes. I began with low-fidelity designs, focusing on providing quick access for users seeking information rapidly, consolidating everything in one place to avoid excessive scrolling. I then concentrated on the inside of the panel, incorporating a search bar and easy-to-read buttons for efficient navigation. Finally, I addressed the search page, which redirects users when they cannot find what they are looking for, offering suggestions based on their search terms using keyword terms.
Feedback - Low-Fidelity Wireframes
To refine my design and gather insights, I presented Low-fidelity wireframes to a group of peers and received initial feedback.
Side Panel:
Many users found the new side panel to be very useful. One notable quote is, "Instead of spending time hovering over each category and searching through drop-down menu options, a side panel search bar is more time-efficient."
Suggestions:
I asked users if they had any other ideas that might help improve the design. A few notable suggestions were: "Auto-updating results as you type into the search bar" and "Clickable suggestions within the side panel."
High-Fidelity Wireframes!
We've reached the high-fidelity wireframes, and I'm thrilled to share the final product with you. But first, let's review the iterations we've made along the way.
.png)
.png)
Iterations
I skipped the mid-fidelity wireframes and went straight to the high-fidelity ones, which is not my usual approach, but I wanted to challenge myself. I incorporated the suggestion for improvement, which involved adding clickable suggestions within the side panel. My goal was to make the new feature blend in seamlessly, giving the impression that it was already part of the design with minimal changes.
Before
After
Integrating new feature: Previously, there was only a blank search bar. I decided to integrate my new feature, "Quick Search," there because users were already accustomed to clicking on it. To maintain consistency with the theme, I made the text the same blue as the rest of the design.
Before
After
Typography Fixes: Initially, I used the Roboto font, but upon closer examination of the main site, I noticed that they used the Open Sans font. Therefore, I ensured that everything matched accordingly.
Before
After
Page Fixes: The original website featured a lot of overwhelming and disorganized text. On my updated page, I reorganized the text mass without omitting any important information, making it more readable as you navigate through the page. Additionally, I moved the side panel from the far right to the left, aligning it more with the left-to-right reading pattern of the Western world.
Before
After
Search Results Fix: Previously, on the website, when you searched for something like "pay near us" instead of "pay near me," you would still get relevant results, but it would not be an internal website search; it would use Google to search for what you were looking for. Clicking on the wrong link would lead you outside of the Henrico County website. With my fix, I kept the search within the website by using keyword terms to guess what you were trying to look for. I also moved the search bar to the middle for easier and faster searching. Additionally, I added some suggestions for the user, making the overall experience much more user-friendly.
Closing Thoughts
In conclusion, I want to reflect on the three initial questions I posed at the beginning of this project:
What specific challenges do users encounter while using the current features on the county website? What are users' specific thoughts when using the current search system? How can we make the website more user-friendly and reach a wider audience?
Users face several challenges, including search and navigation difficulties. We addressed this by creating a quick search button from the search bar, redesigning the website's search interface with frequently searched keyword terms and other common searches. We also focused on consolidating information. To enhance user-friendliness, we added easily visible buttons on the screen, ensuring readability and accommodating various user preferences. Overall, I gained valuable insights.
Some key takeaways for me include ensuring I use the right theme for the website I am enhancing and paying attention to all the details to ensure a successful implementation. If I were to revisit this project, I would not skip the mid-fidelity wireframes, as it helps to have a base without color to experiment with more ideas, instead of jumping right into high-fidelity. I'm pleased with the outcome of the app and thank you for reading!
.png)
.png)