UX + UI Design ⎢ Visual Design
Brief:
City Connect is a concept of developing a free mobile app and website dedicated toward providing the residents of the city, Sandy Springs, with policy and ordinance information that affects their communities and neighborhoods.
City Connect lets citizens get more involved and be more informed, giving the citizens more power in the decisions made around them.
Date: August - September 2022
Role: Director / UX + UI Designer / Researcher / Moderator
Problem:
There has been a rise the past couple of years of politicians and city officials making decisions with little to no consideration of the people they represent. This stems from officials unable to effectively hear from the general masses. A major reason behind this disconnect is that citizens are having a growing perception that they can’t trust the information that is being presented and that there is a lack of easy access to be able to research themselves.
Solution:
From research to testing, I designed an app and website that helps inform users about past, current, and future policies/ordinances that directly affect their communities.
Click HERE to view the full case study
•••••••••
Design Process: Empathize
•••••••••
User Research:
Research for this project involved interviews designed to discover the target audience. A primary user group that was identified were 1st generation immigrants, busy professionals, and single parents who wished to be more informed about issues and policies involving their local government.
Key Takeaways:
100% participates didn't know of city ordinance
83% do not trust elected officials
63% do not trust elected officials
•••••••••
Design Process: Define
•••••••••
Competitive Audit:
The goal of the audit was to review the current website and other sites that provided similar services. An audit of a few competitors provided insights on gaps and potential opportunities. These included citizens being properly aware of future meetings and the topics being discussed, a community message board to communicate and support fellow residents, an attendance number indication to give residents confidence, and post-meeting breakdown for better understanding.
Competitor Gaps:
1) Indicators: Notification of future meetings and topics being discussed
2) Open Channels: Community message board
3) Counting: Attendance number indication
2) Open Channels: Community message board
3) Counting: Attendance number indication
User Journey Map:
Following the results of the competitive audit, I then mapped out Gabriela’s journey while using the app. The user journey map was important to better empathize with users. Breaking down the journey helped identify potential pain points and ensured an easy path for the users.
User Flow:
This flow chart was crucial in the development of a specific task that help locate any potential pain points before ideating. The flow chart was helpful when mapping out prompts for the usability studies. The task during the study guided the participants through the prototype and helped determine if the overall user experience was good or not.
•••••••••
Design Process: Ideate
•••••••••
Sketching: Crazy 8's
After Identifying flaws from the competitive audit, and keeping the user’s journey map in mind, I conducted a quick crazy-eights session to come up with possible solutions for users.
Competitor Gaps:
1) Indicators: Notification of future meetings and topics being discussed
2) Open Channels: Community message board
3) Counting: Attendance number indication
2) Open Channels: Community message board
3) Counting: Attendance number indication
Digital Wireframes:
Following the crazy 8’s ideation process, a digital wireframe was constructed. The image is an example of the App’s home screen. This is where users can easily learn about future plans and decisions their officials are making.
•••••••••
Design Process: Prototype
•••••••••
Low-fidelity Prototype:
The main user flow was for a user to access the scheduled meetings, find more information on road improvements for pedestrians, and to make a decision about attending the public meeting.
•••••••••
Design Process: Testing
•••••••••
Usability Study:
After each iteration of a low fidelity prototype and a high fidelity prototype, I conducted a usability study each time with 6 participants. To refrain from bias, I had one-on-one sessions with each participant and had them follow a series of prompts to navigate through the prototype. I refrained from speaking and only answered questions pertaining to the prompt questions as to not skew the data in any way. The users were told that it was a Think Out Loud method. This encouraged users to state out loud everything they felt, thought, or experienced for documentation.
Findings:
1) Language: Participates did not know what a city ordinance was
2) Icons: do not trust elected officials
3) Text: do not trust elected officials
2) Icons: do not trust elected officials
3) Text: do not trust elected officials
•••••••••
Design Process
(Feedback Loop): Ideate
(Feedback Loop): Ideate
•••••••••
Refined Designs:
Following the usability study, adjustments were made. I swapped out the confusing icons for ones that were more universally known. I also placed the icon to switch languages next to navigation icon for ease of use.
•••••••••
Design Process
(Feedback Loop): Prototype
(Feedback Loop): Prototype
•••••••••
High-fidelity Prototype:
The high-fidelity prototype followed the same user flow as the low-fidelity prototype for consistency. The prototype included design refinements and adjustments across screens following the feedback from the previous user test.
Accessibility Considerations:
1) Multi-Lingual: Having a multi-lingual option helps users with limited to no English-speaking ability
2) Color Contrast: The dark purple and white texts follow WCAG AAA guidelines that help users with visual restrictions
3) Iconography: Universal iconography helps users navigate the pages and identify key features
Responsive Designs:
Consistency across the mobile, tablet, and desktop using modulated elements was the main focal point when developing the responsive layouts.
•••••••••
Going Forward
•••••••••
Take Aways:
Impact: People that were initially interviewed and participated in the usability studies had positive experiences and gave favorable responses towards the design project. Common responses stated that they enjoyed using the prototypes and think the concept is a great idea. They also hoped that something like it would catch on with local and state government.
What I Learned: Government is tricky, and it is difficult to grasp the inner workings on how things are done. It all can be overwhelming for those that are not involved with it on a daily basis. That is where I believe the disconnect between officials and locals come from. I had to dive deep and spend a great deal of time on learning how local government actually works. From there, I could effectively relay the structured content in a format that was easier to use.
Next Steps:
Responsive Testing: Further testing in regards to the user flow across all the screens
Non-english Users: Testing the accessibility with non-English speakers and making sure usability is achievable for them in regards to the design
Accessibility Features: Exploring text-to-speak and find ways to implement the feature for users that rely on that function to navigate websites and apps