Civic Suds Webpage

I worked with a team of friends during my time in General Assembly bootcamp and we were given 3 weeks to create a website for a social enterprise named Civic Suds who had a problem in the managerial aspect. We called ourselves the Civic Avengers
About Civic Suds
Civic Suds combines the local laundromat and the community center to be in one place
Programs focus on literacy, financial stability and health & wellness
24/7 workspace and the computer/Internet
About their Customers (aka Residents)
Most customers are low income renter
People spent on average 90 minutes per week doing laundry
Utilize resources while they wait for their laundry
Research:
User Interviews
Recruited interview candidates through a screener survey and our network. Our targeted audience were people who had experience in event management and hospitality and we

Conducted 8 User Interviews
6 of them hosted events for Non-profit
2 of them helped organize events within the hospitality industry


We asked certain questions like

How many events have you coordinated or planned?
What types of events have you hosted (e.g. fundraising, kids, wellness, etc.)?
What is the process you go through to plan an event?
What were your responsibilities?

All these questions were asked to get the basic understanding of event managers daily life and how can we implement what they use to help their day to day work style into solving civic suds problems.
After gathering all the data from our interviews we started affinity mapping to get certain trends from our individual interviews
Based on the affinity mapping, some of the common patterns were :

I want to easily communicate with everyone involved in the event planning process

I want to schedule all event elements before, after and during an event

I want a system that tracks the event timeline and logistics


Having this in mind we set out to dig deeper and look for more insight based on the users and what they wanted and we found the following


Features Required
Calendar:
Residents: To keep track of events and
Community partners: to create and upload events

Social Media
To share their events to a larger group of audience to create awareness

Sign Up
Residents: to find and sign up for workshops near them
Community partners: to keep track of people attending the workshop
Admins: to supervise how many people are attending the event and how to cater them alongside with the community partner
4. Location(Map)
To see the available workshops near them on a map and the details such as location. Seeing it on a map makes it easier to trace the location

5. Contact Support

Using all this data we created three different personas which represented 3 different parts such as the Admin, Community leader and Resident, below are their user problems

As a community partner,
I need an efficient way to find time slots where the location is offering programming and sign up to lead an event or workshop
I need to be able to share and update my events
I want to be able to provide a link or resource, and information about my event
As a resident
I need to be able to access the information on my mobile device
I need to find locations and events being hosted near me, listed out and on a map
As an admin
I would like to allow partners to review openings and reach out to our team about leading an event
I would like to look at all events across locations to see what's happening at a given time


After creating the user problems we created problem statements for each persona type


Community Partners:
Community partners find it difficult to locate and communicate event details with people.

Residents:
The residents face the need of viewing locations and event information on a mobile device.

Admins:
The Admins want to be able to view all events and their details and allow community partners to edit those details and give users the accessibility to reach out for support.


These are the problems we got from the users of Civic Suds, we, The Civic Avengers, decided to look upon this and solve their problems hence, a hypothesis was created.

We grouped the problems into categories such as location, social media, responsive website, calendar, contact/support and worked individual issues upon those categories.

If we create a responsive website with an interactive calendar, then the Admins and Event Organizers will be able to schedule events then Residents will be able to sign up for those events, because they need an efficient way to reserve a slot and manage their events at Civic Suds.

We compared companies with similar and different products to give us inspiration on how to make our prototype more user friendly.
We looked into the companies of Google, Microsoft, Doodle, Maptive, Airbnb, to gather information and how to improve our product.
Then we also created a user flow on how we expect our customers to use our product

Card sorting was next on the list, because we wanted to see how users wanted to see the categories. We conducted card sorting with 9 interviewees, and asked them to sort the cards based on the category they expected them to fall under.


After synthesising our research and evaluating the competition, we started the design process with a design studio.
3 rounds of individual sketches
After completing 3 rounds we voted on which designs worked best to solve the problem
For some designs we combined different elements


Wireframes
We created wireframes for each of the sections to better understand the layout of each page before creating templates in Axure.
After that we voted on which wireframes to use and started building templates in Axure.

Usability Testing
After creating our initial version of the clickable prototype in Axure we conducted
3 unmoderated tests on UserTesting.com
ranging from 25 - 35 years old
2 in-person tests
ranging from 45 - 55 years old
We asked our usability testers to complete tasks that our different user types, Admin-Host users and Resident users, would do.

As an Admin & Host user, we asked them
Please request to organize a mental health event for 10 people at 9:00 am on August 15, 2021 at the Civic Suds 2 location.
Can you please edit the event detail card for August 8, 2021 and request a printer and pens?
Can you please contact Civic Suds?
As a Resident user, we asked them
Can you please look for Civic Suds locations on the mobile site?
Can you please use the mobile site to find events at the Civic Suds 1 location?
Can you please RSVP on your phone to the event on June 7, 2021 at the Civic Suds 1 location?
Usability Testing - Findings

Home Page
Originally had 3 separate boxes that highlighted:
About Us
Locations
Organize an Event
Based on feedback, we combined the 3 items into a sliding carousel and moved everything above the fold.
1. We updated the calendar version naming conventions from D, W, M to Daily, Weekly and Monthly for ALL calendars.
2. We increased the size and made the font bold in the global navigation to make it more visible.
3. We made blank calendar dates clickable and linked it to the Organize an Event page. The event date is pre-filled so users could quickly and easily submit a request to organize an event.
Location Pages - Desktop & Mobile versions
1. Testers were confused by where they were located on the map, so we added a “You are here” icon.
2. We removed an Upcoming Event sidebar to the left of the map because users were confused by it.
Resident Calendar Pages - Daily, Weekly & Month
We originally had an Upcoming Events section, but removed it from all Resident Calendar views because users were confused by it
After all the iterations we made, we were able to meet the deadline and present our work.