*Athens-Clarke County and the organizations listed are in no way affiliated with this project.
Quick Note on Class Exhibition
Check out the class exhibition, including my work, on the ABRVTD Instagram page! Here are individual links: Insta Desktop mock ups | Insta Phone Mock Ups | Insta Process Book Mock Ups
Check Out My Process Book
If you want an in-depth look on how I accomplished this project, check out my process book.
Introduction
Access Athens is a guide to local assistance programs and services in Athens-Clarke County, GA. The idea is that citizens can quickly and easily find resources in their time of need.
My Focus: UX and UI Design
Tools: Figma, Adobe Suite
Link to Access Prototypes
*It does not work if I directly link them on my site. As a workaround, here is a Google doc with the links and info on how to use them.
*It does not work if I directly link them on my site. As a workaround, here is a Google doc with the links and info on how to use them.
Defining the Problem
Introduce Topic
Focus on basic issues of food systems as they relate to design discipline.
Identify a Problem/Develop a Question
How can we make Athens citizens more aware of food programs and their eligibility for such programs?
Rephrase Question from a Design Perspective
Through visual design, inform local Athens citizens about available food programs and their eligibility for such programs.
Determine Audience
Local Athens, GA citizens with food insecurities
Research
Relevant quotes from interviews:
Explorations
Keywords to Guide Design
Stigma: Consider negative associations with both governmental and assistance entities
Inform: The goal is to inform, not persuade
Assistance: The goal is to provide assistance to those in need
Availability: Consider citizens with technological, sensory, or cognitive disorders
Accessibility: So those with disabilities can more easily navigate the site
Relationships: Create an environment of trust and transparency with pros and customers
Modern, Organized, & Updated: Clean, approachable look & updated content
Initial Sketches & User Flow Chart
Sketches for both desktop and mobile. Mobile was sketched out after the desktop version was nearly finalized in the design phase. This approach for this particular project saved me time and allowed me to learn about each platform individually.
Search Page Explorations
I began by designing the most important part of the site: the search function. These were my original thoughts, but I hadn't considered merging the map with the search function yet.
Initial Ideas
This isn't a complete flow, but it does show how users would be guided to search results in two ways:
1. Category search
2. Personalized search (based on criteria that could determine eligibility for programs)
2. Personalized search (based on criteria that could determine eligibility for programs)
There is a potential Issue: People might not trust a site, especially governmental, that asks for personal information.
First Developed Wireframe
I hadn't looked into wireframing techniques, yet. Everything here was created from scratch. It wasn't a waste of time, however, because it taught me the value of wireframing kits and creating reusable, atomic components in Figma.
Second Developed Wireframe
This was guided by Material Design and multiple resources from free Figma toolkits. The Home page header has a photo, but not as large as the previous wireframe.
Refine the Details
Icon Development
1st Iteration
The icons and rounded squares provide a friendly, approachable feel. The rounded squares also establish consistency.
2nd Iteration
Now, each color has a purpose. They represent a specific category to help users quickly identify the type of help offered. However, they are hard to read.
3rd and Final Iteration
These catch the eye, but don't overwhelm the viewer. The circles are also better suited for search result cards.
Top Nav Bar
First Few Iterations
1 & 2 are from the original wireframes. 3 & 4 are when I was wanting irregular shapes to show the humanistic, relatable side of this government site. 5 uses pill shapes, but pill shapes have other purposes. They also take attention away from the main content of the site.
Final Look
Having lines above the page names is more subtle and gentle, but still effective.
The menu also interacts with the mouse before it's clicked (it has hover states), assuring the user that the area is clickable. It offers more visual cues.
Text Boxes
Material Design offers filled and outlined text boxes. I tried the filled version in one of my early concepts, so I decided to explore the outlined version. It looks clean and fits the desktop site better. After that decision, it was suggested I match the text boxes with the overall rounded shapes I use. This led to the interesting discovery of rounded text boxes.
Material Design Insight
Material Design offers a lot of insight for text boxes:
- Outlined or filled style?
- What happens when a user interacts with it?
- What if it is disabled so a user cannot interact with it?
- Outlined or filled style?
- What happens when a user interacts with it?
- What if it is disabled so a user cannot interact with it?
I wasn't able to dive into these, but I appreciate the insight. If this project were to develop more, this would be an area to explore.
Final Design
Here is the user flow and overall look for the final desktop design.
Typography and Color Scheme
Roboto Slab has character, providing interest with the slab serifs. It displays ideas of being casual and happy. For users, it catches their attention in a nice and kind way.
The Muli typeface contrasts as a minimalist sans serif font. It is also a little wider than common fonts like Avenir and Futura PT.
This green and orange combo is warm and friendly. These colors are also good to use in most cases, based on WCAG guidelines.
Everything Together
Here are some snapshots of Access Athens. For little snippets of this in action, check out the class exhibition on our ABRVTD Instagram page! Here are individual links: Insta Desktop mock ups | Insta Phone Mock Ups | Insta Process Book Mock Ups
