Campus Community Connection

Overview

The Campus Community Connection website serves as an informative and collaborative portal for the many municipalities surrounding College Park. Cities interested in partnering closely with the University of Maryland may collaborate with students, faculty, and staff to develop community-based projects. Project topics include, but are not limited to, areas such as sustainability/environmental science, transportation concerns, and food management.

Members of local municipalities can go to the CCC website to post their projects, and University of Maryland students can use the site to find projects they want to work on. The redesigned site will not change the core functionality of the site. The changes made will be aesthetic ones which will hopefully bring a more user-friendly experience to the user.

Responsibilities

Research
Information Architecture
Visual Design
Development
Testing
Outlining project goals
Setting deliverable deadlines

Tools Used

HTML
CSS5
Javascript
jQuery
Adobe Photoshop
Adobe Premiere Pro

Problem

Currently, the Campus Community Connection (CCC) website is not generating much traffic. The coordinator of CCC suspects it may have something to do with the current design of the website.

This originally intended to be a class project with just wireframes being the final deliverable, but I saw this as a good opportunity to get hands on experience with the UX/UI design process and working with a client. So, I took the initiative to evolve this from a school project to a personal project where I could gain more product design experience.

The site's original home page.

A page with project details.

Research

The first thing I did was to set up a meeting with CCC’s coordinator in order to get an idea of CCC’s purpose and mission statement. Once I understood what type of user needs the site was supposed to be fulfilling, I was ready to make some sketches of the newly designed site.

As I mentioned above, Campus Community Connection is meant to be a hub where students can find projects to work on listed by local municipalities. The site currently has the following features:

A listing of all the projects
A page for each project with more details
A contact form
Integration with the University of Maryland's user authentication system

Once I understood what type of user needs the site was supposed to be fulfilling, I was ready to start designing the new site. As much as I wanted to just delve into this project and devote all my time to designing, I needed to be realistic. I had many other obligations as well as a hard deadline of 2 months.

It pained me to cut down the scope of the project, but I made myself sit down and assess how much time I would be able to spend on this project. Once I laid out my schedule, I made the decision to focus on the three most important aspects of the site: the homepage, the project listing page, and the contact page. From there, I set milestones in the schedule and clearly established deliverables that CCC’s coordinator could expect throughout the semester.

Once I had all of that settled, I began to think of the user flow, and make sketches and wireframes.

Wireframes

Homepage

Project detail page

Contact page

For the homepage, I wanted to put an overview and introductory video at the top, while a list of available projects and a map of the area would be at the bottom. There would also be a page where a list of projects were categorized by area. Accompanying each project would be a progress bar, showing how far along the project is now. Additionally, the coordinator of CCC had outlined what details he would like to include on the contact form, so I was sure to incorporate that information.

Feedback and Iteration

I sat down with several University of Maryland students to test this design and get their feedback on it. It was generally well-received, but as I was going over the interview data, I saw that users identified some flaws in my design.

They felt it was redundant to have both an overview and an introductory video on the homepage. It felt too cluttered and was verging on the classic trap of "information overload"
The contact page seemed like it was taking up too much space for a short form

Most interestingly, however, was the users' reactions to finding a project. They also thought that a search bar was unhelpful because it would be more useful to see the projects listed out for them. However, they also found it a bit tedious to have to scroll through a new page every time they wanted to look for a new project.

Final design

Homepage

I took out the introductory video from the homepage and put in a one sentence overview instead.
The projects are listed at the bottom with a map next to it, showing where projects are geographically located.
The decision to use a picture of bamboo as the background was a conscious one on my part. Bamboo is a plant that is native to the Washington DC area (where all of the CCC projects are located). It is also, unfortunately, notoriously invasive, dense, and overall just exhausting to deal with. CCC’s coordinator agreed with me in saying that this exhaustion is analogous to the exhaustion students may experience in trying to find community-based work. Transitioning from a dense background to simple one symbolizes the clarity students will experience when they see a list of projects readily available to them.

About

Because I took the introductory video off of the homepage, I decided to make a separate about page and put the video here instead.
Since this was its own page, I could add more details about what Campus Community Connection is and what its goals and purpose are.

Project page

Instead of having a separate page for project listings, putting it in a sidebar navigation was much better received by users.
The collapsible structure also helped users not to feel overwhelmed by seeing all of the projects at once.
Users enjoyed seeing a visual related to the project.

Contact

Condensing the form into a simple and clean interface made users feel like it would be a very simple process to contact CCC’s coordinator and find a project to work on.

Takeaways

I was on a tight schedule when working on this project. If I had more time, I would love to be able to do more rounds of design and testing. Still, I gained a lot of valuable knowledge and experience from it.

This was a great project for me to get hands on experience in working with a client. I learned a lot about realistically assessing timelines and to be flexible with adjusting project scope. I also learned how to create a project requirements document and a project charter to clearly establish goals and expectations.