Community
My Role
Ux designer - designing Bank of the Bay from conception to delivery
Duration
July 2022 - August 2022
Responsibilities
User Research
Paper and Digital Wireframes
Low Fidelity and High Fidelity Prototypes
Conducting Usability studies
Iterating on designs
Tools
Pen
Paper
Figma
Google Workspace
Coursera
The Product
The Community app and website was designed to help get young adults involved in community service.
The Problem
Young adults struggle to find and sign up for community service events nearby. The community app has identified that there is a barrier to finding community service events due to a lack of intuitive ways for young adults to discover community service events.
The Goal
To create a website and application that makes it easier to find and sign-up for community service events.
Project Overview
Understanding the User
For the user research I began with creating personas around the design prompt of creating a community service application for young adults designing both an application and Progressive Web App. I assumed that many young adults aren’t getting into community service due to a lack of knowledge around community service as well as a lack of resources. After creating the personas I did some research into other companies that list community service events to audit them and after I created a user journey map and Ideated on designs. In my research I found that many websites cater to finding events but not specifically community service events.
User Pain Points
Discovery - Young adults have a difficult time finding community service events nearby.
Accessibility - Young adults don’t always have the latest technology therefore need multiple ways to search for events.
Services- There are resources for hosts of events but less resources for volunteers.
Persona 1: Ralph
Ralph is a college student who needs an application to help them find nearby community service events because they want a quick way to nearby events on their phone.
Persona 2: Jessica
Jessica is a working college student who needs a responsive website to find local community service events because they want to give back to the community but cannot download an application.
Competitive Audit
An audit of competing products provided direction on opportunities that could be addressed with the Community app.
Starting the Design
Paper Wireframes
I began the Ideation process with Crazy 8’s then moved on to creating paper wireframes to create the ideal framework for the application. Focusing on simple layout for users to get them signed up for events quicker.
Digital Wireframes
I wanted to make it as easy as possible to refine a search for users. Initial feedback was that these refinement options should be added to the home screen.
Low-Fidelity Prototype
To prepare for testing I created a low-fidelity prototype that connected the user flow for discovering and signing up for events.Linked here: Low-Fidelity Prototype
Usability Study
I conducted two rounds of usability studies. The findings helped me to discover the pain points users had with the initial low-fi prototype. This helped to inform my design for the mockups.
Study Type:
Moderated Usability Study
Location:
Remote, SF Bay Area
Participants
5 Participants
Findings
1) Users asked for map to see where events are taking place around them
2) Language used was confusing to some users
3) Users found the “search” button on the home page confusing.
Length
15-20 Minutes
Refining the Design
Mockups:
Users were initially confused by the search button and wanted more refinement options. I created a clearer refinement option
Mockups:
I wanted to create a visual way for users to explore. I got feedback that users wanted to refine their search in the map as well. I added search refinement for easier discovery.
Accessibility Considerations:
1) Clear labels for interactive elements that can be read by screen readers.
2) Home screen focuses on personalized recommendations help users find events nearby.
Responsive Design
Sitemap
I wanted to create four areas which users could easily find related information. Emphasis was placed on the transfer experience.
Responsive Designs
I wanted to create a responsive website that would look just as good and be just as simple as the application on a couple of different screen sizes
Impact:
When shown the final mock up my friends and family who I asked to do usability studies were super excited to see how far I had come in the course as well as saying “if this was a real website/application I would love to use it”.
Going Forward
What I learned:
During this project I really brought together everything I had learned to make something that event shocked me. I hope to apply this skills very soon at work. I was able to create a diligent and well thought out design.
Next Steps
I will present this to the key stakeholders of this project, then finalize all elements of the design and prepare the project for hand off to the engineering team. Finally, after the product is launched I will view data on usage and feedback from users to iterate, tweak or even design new portions of the app. Adding new features and designs.