Howdy Neighbor!
UX/UI Design, Research, Branding, Wireframing, Prototyping
Background
I started this project to help users who have recently moved to a new area have space where they can find everything they would need in one place to get better acclimated to their new community. I was inspired because I had just recently moved to a new city and didn’t know anything about local businesses, services, or where to make new friends. Howdy Neighbor! is a product where users can find local events, group meetups, local services (house cleaning, dog walking, lawn care, etc), and have access to forums where they can ask locals about anything they need!
Goals
Create a product that was easy to navigate
Have all the information they would need in one place instead of multiple sites
Be accessible to all users
Make it a fun and inviting space for those users.
Problem
Users want a space where all of the information they are looking for is in one, easy space (events, forums, local services, etc)
I wanted to make sure they could find all of the information in one space, as well as easy to find so that they weren’t digging through posts online to find what they are looking for.
My Impact
For this project, I was able to incorporate research data from users as well as competitive research to create and end-to-end product as a solo designer.
Design Process
Interview Questions
I asked my participants a series of questions such as:
What their current life is like
Why they chose to move
What they look for when moving
What resources they’ve used in the past
What they would benefit from when using resources to find information.
I chose four participants aged between 22-55 that have all either recently moved to a new area or have done so and already acclimated to their new community.
Competitive Research
I did competitive research to get ideas of what other sites/apps were offering as well as what they were missing.
A lot of these sites have been used by the participants that were interviewed or could be a good resource to be utilized.
Doing competitive research helped me to learn what features I need to incorporate into my design as well as what features I didn’t want to use.
Affinity Mapping
Affinity mapping helped me to understand
Iissues that my users experienced when they’ve moved to a new area in the past
What they are looking for/what would have made it easier for them when researching.
It helped me to create my task flows easily and know where my focus needed to be for my key screens.
User/Task Flows
After conducting user interviews, I reviewed my research and decided what key screens I’d focus my user flows and task flows on.
Flow #1: User sign in and account creation.
Flow #2: A user to look at forum posts and then to create their own post.
Flow #3: The user to look at local events and then RSVP for an event.
Originally when creating the flows, I was calling events Meetups and instead of RSVPing to an event, they would create their own. Once I was designing, the create of an event was similar to creating a forum post, so I decided to have the user RSVP to an event instead.
After conducting user interviews, I chose three key screens to focus on.
Most of my users would have liked an easy sign up, a specific forum setting to find information easily, and a specific place to find events and get involved in their community.
User Personas
I created one user personas based off of the users I interviewed. I chose a variety of users to make this product as inclusive as possible. but chose to showcase a younger user who had just moved to a new area.
The users I interviewed would have all benefited from:
A way to connect with other people and make new friends
Learn more about their community and how to get involved
Find local events to attend
Have the ability to find all of this invormation on one platform.
When creating wireframes, I started to take some ideas from competing apps and sites such as Instagram, Neighborhood, Angie’s List, Meetups, and Facebook. I noticed things I liked and disliked about each and incorporated some designs that I did like into my own.
Wireframes
UI Kit
I created my UI kit to represent my core values for the project.
The core values were:
Warm
Inviting
Accessible
Resourceful
Community.
I wanted the colors to represent the inviting and warm values as well as creating a fun atmosphere.
High Fidelity Prototyping
While creating the final wireframes before prototyping, we went through about 5 edits to finalize every detail. In the end, it made a big difference and made prototyping and testing much easier.
The style changed a bit throughout the process:
Colors stayed about the same, just slightly different
Slightly different icons
Mostly just to make the final product look modern, simple, consistent, and easy to read.
Usability Testing
During user testing of the prototype, there were only a small amount of issues to fix. We spent a lot of time defining the wireframes, so it helped with less iterations during testing.
After testing, I needed to fix the scrolling on the RSVP to an event page, add pressed buttons, and shorten the top bar of the home dashboard to create more space on the screen.
I had the four participants I interviewed earlier in the research process do the testing. Users liked the color palette, the map and ability to find events close to them, the filter option for events and forum, and how easy it was to navigate.
Conclusion
Overall, I learned that spending time defining the high fidelity wireframes made the prototyping and testing a lot easier in the end. I also learned a lot about focusing on designing for the user and making sure as much as the product is pleasing to look at, it’s also accessible to everyone. I struggled most with the research aspect because I was new to it, but once I started going through the process, it was easier to understand and realize how important the research process is. After seeing the product at the end, I’m pleased with my work. It was fun to see the product from start to end and all of the work I put into it.