End-to-End UX | UI app sprint to help community members connect
From user research to app-launch, this sprint had a little bit of everything.
The Project
Role | Responsibility
User interviews, user research, flow charting, wireframes, prototyping, iterating, illustrating, persona development, UX design, UI design, UX writing
Tools
Figma, Photoshop, Google Meet, Calendy, Google Forms, Google Docs, Maze, Discord, Voice Recorder
Scope
End-to-end, sprint-based design, 12 weeks
Solo UX | UI designer, illustrator
The Client
Bulletin Board is a place for community members to find eachother, in all ways that they may be connecting in the real world from little block parties to city council meetings, on Bulletin Board, there is a place and community for everyone.
The Problem
The need | With a rise in remote workers between 25-35, we slowly move into a different world. There is a significant increase in loneliness and lack of confidence for connecting with people in your area. Bulletin Board aims to find a way for people to easily begin to invest and contribute to their local communities.
The why | By creating a one-stop-shop for ways to physically connect within a community, users will easily be able to sift and search for the types of engagement that suit them best, whether it be city council or happy hour. The more a resident can connect and invest with their surroundings; we see a rise of safety, value and pride within these areas, making them more desirable.
Research + Discovery
Interviews + Surveys
With the aid of Google Meet and Google forms, I interviewed and surveyed users about their experience being a local or new resident of their area, and the values that helped make their location valuable and how they connected to their community.
Insights |
By a landslide testers were interested in being updated on local events (even over safety notifications)
Without prompt, many users focused on how they connect with the people of their communities and less so the physical spaces of their communities. This tells us where our users’ priorities and pain points are.
Storyboarding to Understand Our Users
How does a user interact with Bulletin Board?
With the creation of site maps, user flows and task flows, I can begin to layout the fundamentals of how a user would interact with the product in order to solve their problem: find and physically attend local gatherings of all types.
Designing the User Interface
Wireframes
From learning the user’s needs to understanding how a product can solve this problem and how they will navigate the webapp, I can construct lo-fi and mid-fi wireframes to experiment with the hierarchy, function and flow.
Mid- Fi wireframes allow a more realistic view of how the product will be put together, with lots of room for adjustments based off of product need and feedback.
Compiling all of the research, branding, color palette and wireframes, I then built a high fidelity wireframe to show the function and appearance of the product, in addition to the flow of how a user may interact with it.
Visuals Based on Research
In the component library there is a full spectrum of of the visual elements, all chosen with the function of the product and ease of consumer experience in mind. Friendly and modern, easy to read, familiar enough to be identifiable, but unique to the product.
Fresh color palette with the persona in-mind
Highly visible hierarchy of buttons and links
Easily legible and modern typography for both desktop and mobile
Unique icons that maintain familiarity
User Testing
Using Maze, I invited six participants to complete tasks with the high fidelity wireframes back to the users to verify that the product functions as expected: with ease, efficiency and functionality.
Results |
Users found the form very straight forward
Some users experience trouble finding the hamburger menu
Most users navigated adding an event to the calendar with ease
Some users were curious which calendar their events were being added to
Iterating | Listening to the Users for a Better Design
Also iterated based on feedback from the DesignLab community:
Form is broken up into several screens to create a higher satisfaction rate when going through a long form
Illustrations are swapped out for my own custom pieces for this product.
Reflection
Main Challenges
Connecting with the Users | Beginning this project, I wasn’t feeling confident about conducting interviews or building surveys in order to get the information I needed to build a product. Also my first time using Maze, I found that my users had a challenging time with the platform, which may have impacted my results.
Takeaways
Be Flexible | Be ready to pivot what you expect the users to need as soon as you hear from the users! My expectation for this project was connecting locals to places, and based on user-feedback, I pivoted the direction of the project because the grander need was connecting to people.
Make Feedback Easy | In this project, I struggled with the platform which I was performing my user testing. Most of my users were less tech-savvy, and next time I will consider the skillset and asks of my users so I can make testing and receiving feedback as simple as possible.
