Hello Neighbor
Embedded Files
Role
UX Design
UX Research
Interaction Design
Contributions
User Interviews
Wire-Framing
High Fidelity Prototype
Animations
Tools
Figma
SurveyPlanet
Nebo
Gemini
Task
User Research
Usability Test
Wireframing
Prototyping
Site Map
Interaction Design
Duration
February 2025 - June 2025
Overview
This is a app that will break down barriers and build a stronger community. This is the core of this app. It connects neighbors across a spectrum of needs, from lighthearted social events like a cookout to more urgent matters like a neighborhood watch alert. Users can leverage the platform to share resources, organize collective actions, or simply get to know the people living around them. This app will also deliver a sense of being secure in a way that you can remain anonymous while still asking for assistance. It's a tool for collaboration, mutual aid, and creating a truly interconnected neighborhood!
Issue
Users are struggling with integrating into a new community in a way that is not only welcoming but also safe and insightful.
Research
The research that was organized for this project was centered around individuals that were already rooted in a community but wanted more out of it, like a service they can discover or seeing what events are coming up. This research also captured individuals that are seeking a sense of belonging in their community. Amongst these individuals the age range was between 23-70. The younger audience represents those who are fresh and soon to be finding themselves in a community. Whereas the older audience may want to discover and see what else their already growing community has to offer.
Pain Points
User Journey
Meet Maria Anna
Site Map
Early Design Ideation
Paper Wireframe Sketches
The goal that I am trying to achieve with these sketches is to format an instantly familiar look to users with creative unique elements infused. I am also incorporating something that is cohesive and innovative with a strong sense of unity throughout the design. These sketches bring the ground work for an interface that is intuitive, engaging, distinctly memorable. Overall, this will reflect my commitment to delivering a user experience that stands out and remains accessible.
Low-Fidelity Wireframes
This Low-Fidelity wireframe for Hello Neighbor is to define the fundamental layout and information hierarchy for various screens, such as the main feed, a post creation interface, and a confirmation pop-up. By stripping away visual details, the emphasis remains on the placement of key elements like image placeholders, text blocks, and interactive buttons.
User testing Low Fidelity wireframes
This bar graph below demonstrates each participants complete understanding from prompts 1-5. Majority of the test was done unmoderated. Four users tested this unmoderated and the other two needed guidance through the test. Many of the participants were successful in completing these prompts. They each gave valuable feedback, that will only improve the users experience.
High Fidelity
Mockups
Sticker Sheet
This sticker sheet consist of 2 different font styles and 5 different sizes. This is done to ensure that the app won't look jarring to the user. Key components include well-defined buttons with primary and secondary styles. As well as each button has an animation tied to it. For example, the "Post" button has a gray color illiminating around it. Finally, this sticker sheet has a cohesive set of icons for various actions and alerts, all designed to ensure a consistent, readable, and user-friendly interface.
High Fidelity Usability Test Results
Audience
For this project the test captured individuals that are seeking a sense of belonging in their community. Amongst these individuals the age range was between 23-70. Majority of this test consisted of individuals that are young. The reason behind this is because they are more likely to gravitate to an app that they can connect and be social on. Since the older participants are setteled they are more focused on security an news within the community.
Methodology
Similar to the Low Fidelity wireframe usability test I was able to have four unmoderated and two moderated test. From this I have gained honest feedback from each and every participant. The four unmoderated was done to ensure flexibilty, comfort, and convenience when completing the test. For the two that were moderated I had to assist and go through each step with them carefully to give them comfort and guide them through the test.
Results
The first bar graph is a result of seven participants going through the user flow to achieve a successful post. Five of these participants' results were done unmoderated while two were done moderated. This was done to ensure the right participants got the right attention and help they may need during the Usability Test.
The second bar graph displays the result when asked if the participants would recommend the app to others. As a result, more than half are likely to recommend the app. The overall score is a 22 out of 28. This represents a 78.6% recommendation rate to other users. This leaves ample room for improvement I can do to make users' experience better.
Revised Implementation
After feedback from the High Fidelity Usability test, it became imperative to increase the main body text size. This change was implemented to help users better understand and see what their community is saying.
Another change that occcured after feedback from participants was getting rid of the words "Cancel" and "Post." Instead, it has been changed to "No" and "Yes" buttons. This will give the user a more familiar terminology when it comes to answering the pop-up.
Takeaway
Challenges
The challenging aspects of this project have primarily revolved around the use of animations, readability, and proper user flow. For instance, the animations, of which there are a total of 3 in this project, were designed to be functionally meaningful. An example of this is the illuminating "Post" button, strategically implemented to draw the user's attention to its location. Following usability testing, it became evident that specific word choices and the general font size presented difficulties for older users. Based on this feedback, I revised elements to better accommodate that demographic without negatively impacting other users. Overall, this project has offered a significant learning curve in creating a product that can positively impact our community.
Learned
With this project I have learned how valuable it is to listen to participants in the Usability Test. Listening to them will only lead to a more welcoming, and easier experience for those who try the app after them.
Also, I learned how many ways you can create animation through prototyping and how significant variants are when it comes to animating something complex.
In the end, from this project I have learned the significance of Usability testing to an older audience. Using animations to convey a message, and taking the time to implement feedback given.
Page updated
Google Sites
Report abuse