top of page
Overview
BEMORE is a mobile product born out need rather than want. Like most cities, Baltimore, MD has very few digital spaces or resources to connect local volunteers with nonprofits.
I wanted to change that. And for that change, I needed to develop, design and build something new.
BEMORE, a mobile application design, was the result of building a product from the ground up based on user research first and user interface design second.
Here's how BEMORE went from an idea to a tangible product.
Role
UX/UI Design
User Research
Design Process
Discovery
With so many volunteer web platforms on the market, designing an effective mobile first volunteer platform was a major product difficulty.
Another consideration was finding ways to represent information about events without overloading the user on a smaller mobile screen.
Desk Research
Designing and optimizing a product in a market that is mostly displayed on web browsers was one thing, but the market, as it turned out, was also heavily saturated with products and services that created a very long user journey simply to get information.
I needed to get to the core pain points from users.
Landscape Analysis
My first step in understanding the market was to take a closer look at other products.
I wanted to understand what products were already doing something similar, even if it wasn't in the nonprofit sector.
Remote User Interviews
I recruited participants to interview from a larger pool, mostly focusing on younger users, between the ages of 22 to 35, who were living and working in Baltimore city.
My higher level goals were hyper focused on personal experiences and journeys navigating volunteer opportunities in a digital space. Some key insights from these interviews stood out more than others.
How might we focus more on providing information for the user surrounding events and community projects?
Working High Level Solution
Design key features that are underrepresented for users to enhance experience and streamline searching and attending community events.
MVP Feature List
Based on user insights from user interviews, I complied a list of key features that would make up the task flows for BEMORE within a learned mobile flow.
I thought about these features and prioritized them according to user responses and what has been mentioned during various interviews surrounding BEMORE as a could be product as well as features that users have seen and liked on various other applications.
-
The ease of use needs to be a priority
-
Ways to search events by time and place
-
A way to go directly to a website or organization homepage from the product would be useful
-
Social sharing feature is not as relevant as assumed
User Flows
User research suggested that a want/need was to be able to search for events without having to sign up for an email.
I designed a task flow based around these wants in order to better design BEMORE in a way that would allow users to browse events and community happenings in a meaningful way.
Early Sketches and Low Fidelity Wireframes
I started off with some quick sketching, to kind of put a real look to BEMORE, which was only an idea and a feature list.
I put those sketches into some wireframes and wireflows. I used sketch and Invision to create these first ideations of the mobile application.
Usability Testing
I conducted six usability tests in person, asking testers to share their thoughts and feelings about the product while being recorded. Nearly all of these questions revolved around basic task performance. Sample questions include:
-
How would you navigate these screens?
-
How would you go back to the home screen?
-
What actions do you think you could do from the home screen?
-
Where would you to find events?
Usability Testing Insights
After conducting my usability tests, I realized that there was so much I needed to fix. None of my users really understood the home screen, the landing page, some of them even expressed that they didn't understand the function of the app.
It was basically a nightmare.
But I was able to gain a huge collection of vital data that I was able to take and use in my next iteration.
Iteration V2
User Surveys for UI Design
Ideating the visual design first involved conducting a user survey that would allow me to create some visual guidelines based on user insights.
I've never ideation ad designed this much on a product, so I wanted the visual design to be clean and easy to replicate and come back to if other functional changes had to be made.
I wanted to ensure that BEMORE had a light, clean feel. I knew that because of the nature of the product, certain elements had to be taken into consideration.
UI Design Style Guide
I didn't have anything to go off of for a logo design, which gave me a little more freedom. I wanted to again create something that was clean and timeless, but also that allowed the user to understand the sense of community engagement specifically in Baltimore city.
Designs
Final Designs
Anchor 1
Impact
Working on a new product allowed me to really grasp the framework of test then build. My user research and insights allowed me to create not just a product that stands out in an oversaturated, sometimes lackluster market, but it also allowed me to put the user at the center of my designs.
Next steps are to, hopefully, connect with local nonprofit and community organizations in and around Baltimore city in order to gain access to different opportunities for BEMORE users, as well as to connect nonprofits with locals who want to donate their time to serve the greater good.
Designing a product from research to build out and design forced me to become a better designer and a better UX lead. It was difficult, to say the least but it allowed me to create something really meaningful. I learned more about creating features and way simplicity can add to a product from rounds of user testing, use cases, and surveys.
bottom of page