BOW Project Marketplace

BOW Project Marketplace

As part of the User Experience Design course at Olin, I collaborated with 3 other students on a semester long project.

BOW Project Marketplace is a website concept that empowers project seekers and project creators within the BOW community to connect and strengthen the Babson-Wellesley-Olin community.

The BOW (Babson, Olin, Wellesley) community is 3 college campuses within 3 miles of each other. This results in a variety of passions and skills carried by students across these campuses, but there currently is no platform to easily connect these students for cross-campus collaboration.

BOW Project Marketplace fosters collaboration between schools to further cross-campus student projects and establish new bonds and friendships between students.

Final Prototype

Project Site

Role

UX Designer

Tools

Figma, Miro, Wireframing/Prototyping, Heuristic Evaluations, Information Architecture, HTML/CSS

Design Process

The course was divided into 4 phases: Project Brief, Needs Analysis, Design Development, and Design Refinement.

PROJECT BRIEF

Identify the problem and area of opportunity

NEEDS
ANALYSIS

Conduct a contextual inquiry into our identified project proposal

Engage with stakeholders in the BOW community

Synthesize the collected data and create design artifacts

Refine our project brief based on learnings from BOW students

DESIGN DEVELOPMENT

Ideate several design ideas that are responsive to the customer needs identified in the previous phase

Create an interaction flow and storyboard mapping our proposal

Build a low-fidelity prototype

Create a usability test plan

DESIGN
REFINEMENT

Increase fidelity of prototype

Conduct a cognitive walkthrough for 5 focus areas

Receive heuristic evaluations of the prototype from classmates

Modify the design in response to evaluations

Exploration

Survey and Interview Responses

Our target group is undergraduate students at Wellesley, Olin, and Babson college. In order to learn more about the needs our customers, my team sent out a survey and conducted interviews. We received 68 survey responses and talked to 10 students. Here are some key takeaways from the survey responses:

On a scale from 1-5, 53% of respondents ranked their interest at a 4 or a 5 for joining projects at other colleges
Main methods of promoting and finding projects are school websites, emails, and through mutual connections
Some students want more connection among BOW students for the different perspectives it brings
Current barriers to cross-campus collaboration is that it takes too much activation energy to coordinate between schools and that it would be harder to manage different working styles

Personas

From our interview and survey findings, we created 3 customer personas that reflect our stakeholder group.

Ella the Olin student wants to join fun projects to meet people from different campuses. Olin has a lot of serious technical projects, so they are looking for other kinds of teams to join.
Finley the Babson student is looking to create a startup, and needs dedicated STEM majors to join his team to support backend roles, and has minimal experience working with students outside of Babson.
Aleesha the Wellesley student wants to join a team of highly motivated students to work on long-term software projects with. She has joined organizations that were more for fun at Wellesley, so is looking for more serious projects.

Design Inspirations

We looked at similar, existing platforms and conducted some competitive analysis. This helped us identify where our design goals differ, aspects that we might want to incorporate to BOW platform, and where the inspirations fall short. My team looked at 4 main sites: Meetup, Eventbrite, Crunchbase, and AngelList Talent.

Meetup:

Site's goal is to bring people together through shared interests and lets people search for events or groups- similar functionality to BOW Project Marketplace
Should try to avoid stacking group information in a single continuous scroll

EventBrite

Platform for event planners to promote their events to event seekers, and event seekers can find events based on their interests and apply different filters
BOW Project Marketplace will have significantly less search results, so some filtering features such as tags may not yield helpful result

Crunchbase

Site provides strong summary of companies, including: size, location, funding status, site, talent search status, recent news, etc.
BOW Project Marketplace is for student projects, so it would include different information

AngelList Talent

Website's target market is people looking for jobs, primarily those having already graduated college with prior work experience
Ability to search for companies by school or roles they are looking for could be a feature in BOW Marketplace

Design Development

We used what we learned in the exploration about customer needs to create a portfolio of design ideas and explore various design requirements that meet those needs. All of these ideas are designed for students who feel restricted or intimidated by the currently available methods to collaborate, the activation energy required to look for opportunities, and the ways people communicate across colleges.

We decided to further narrow the scope of the projects that we wanted to serve: projects that span a semester or more but do not continue after college. This means we would be serving current BOW students looking for projects or recruiting for their projects, excluding one-time events like workshops or longer-term projects like startups by BOW alums.

Interaction Flow

With the previously mentioned goal in mind for our specific customer group, we began thinking of features and high-level concepts that the BOW PM would feature. The result of our thinking is best seen through our interaction flow below, displaying our information architecture and planned pages for the site.

This design has three key workflows:

Exploring ongoing BOW projects
- Addresses need to easily see what students in the BOW community are working on
- Allows students to explore projects that match the topic and commitment level they are looking for
- Students who do not want to join a team but are curious to learn about projects

Creating and registering BOW projects on the site
- For project creators that want to promote their project or specific events coming up
- Flexibility in the project creator's desired level of detail to accommodate low and high commitment projects
- Requires an account on the platform to manage posting

Connecting with a BOW project (whether to join the team or learn more)
- Project creators that want to fill certain roles can source talent and students wanting to connect can talk directly to project owners
- Flexibility of listing communication channels (email, social media, personal website, etc.)
- Strengthens sense of community

Low-Fidelity Prototype

Home Page

Provide conceptual overview of site's purpose and intended use.
Project seekers can click Find a Project which leads to browse page
Project creators must sign up or login to manage projects: intentionally only require project creators to make an account to minimize activation energy to browse projects

Explore Page

Conducted quick case study to choose between vertical and horizontal search bars: went with horizontal search bars which is similar to Angelist so that users with a filter in mind can apply it immediately
Search filter is an overlay

Project Overview

Provides summary of BOW project, including name, project type, schools, organizers, contact, etc.

Alternative Project Overview Design

Had 2 possible designs: alternative design (inspired by Crunchbase) included more affordances and information, but displayed too much information for use by our customer group

Create Project

Has required fields for basic information and has optional fields
Select checkbox for project type and school(s)
Include affordances and signifies for required fields, maximum words, and ability to add extra fields

Design Refinement

Once we had our design idea and initial pages prototyped, we worked on iterating upon our prototype to improve responsiveness and professionalism.

Iterated Prototype

Design Evaluations

Cognitive Walkthrough

We conducted cognitive walkthroughs on 5 specific goals for our customers and examined specific tasks that they would need to complete to accomplish each goal.

The following list contains the 5 customer goals that we explored:

Post a project
Apply filters when searching for projects
Browse for projects
Find more detailed information about a project (from the browse page)
View a project you manage

The spreadsheet below shows whether all steps, signifiers, and feedback to accomplish each goal were present in our design.

Heuristic Evaluations

To further evaluate our current design, we received feedback from our classmates through heuristic evaluations. Our classmates evaluated our current design and examined its compliance to Jakob Nielsen's 10 general usability principles. The full reports can be seen on the Heuristic Evaluation Reports.

We received lots of valuable feedback from our classmates, and the following are the main areas of heuristic issues that they found in our design:

Consistency in buttons, icons, organization, and page size
Need for aesthetic and minimalist design on the home page and project description page
Lack of customer control and freedom in going back to a previous page and closing out pages
Flexibility and efficiency of use in the lack of scroll bars, redundant search bars, and lack of sorting feature when exploring projects.

Usability Testing

The last way that we received feedback for our current design was by conducting 2 usability tests. More details about the usability test are included in the Usability Study Plan and the Usability Test Report.

The main findings from the Usability Tests are listed below:

When creating a project and listing open roles, the term Role is unclear to users. Users were not sure if this meant the project creator's role or what qualifications were required to be in the project.
The project description when creating a project is too open ended in that it does not require specific details. This leads to vague and short descriptions.
The project image is not specific enough and users were unsure if they should upload a team photo, a general photo that aligns with the project, or an image of the project.

The following are recommended edits to incorporate in our design to address the above findings:

Adding an info icon next to the recruiting field to clarify that the project creator can include specific roles that they are recruiting for.
Incorporate a minimum and maximum word count for the project description
Include suggestions as to what type of images are appropriate to add.

Design Modifications

Based on design evaluations and feedback from our course instructor, our team implemented significant design modifications to our design. Below, the main changes are highlighted.

Home Page

From the home page, users are encouraged to either find a project or to post about a project. Some main changes are:

Login and Sign Up buttons were added in the top right of the navigation bar if customers are not currently logged in, which clearly indicates their status and to allow users to access the buttons from any page.
Overall “tone” of the page was modified. We received feedback that our website made them feel like they were applying to a job, so we decided to include more engaging and less professional elements to compel our customers to explore functionality of our site.
Site colors were utilized more to draw the customer's attention to buttons and interactive features and optimized elements to better showcase site functionality available immediately to the them.

Project Create Page

Main revisions to this page are:

Increase customer freedom and control by adding a cancel button that lets the customer exit the page with a warning popup message that customers will have to confirm before leaving the page
Adding hints and recommendations by including word counts, adding directions to the image and tags field, and adding an info bubble next to recruiting

BrowsePage

Main revisions to this page are:

Tile format for project cards to fit more projects on a given page instead of having a singular card stretch the entire screen, which requires the customer to scroll through a long list of results.
Information included in project cards was shortened and condensed by including logos, shorter descriptions, and utilizing icons instead of labels

Filters Menu

Main revisions to this feature are:

Remove unnecessary filters like commitment to make sure all filters yield some results, since we anticipate that the platform will only host a couple hundred projects maximum
Resolve consistency and user freedom issues by making sure the icon used for the school name is on page and by adding an exit X in the top right

Shortcomings and Omissions

Website Design

There were a couple features we were hoping to implement but were unable to due to the time constraint of the course:

Save feature for projects
Redo the information layout for upcoming events and include it in the project description page
Success messages after a project is successfully created, deleted, edited, or saved
Not all pages and features are fully functional

Key Insights

Needing a minimally invasive way of explaining certain terminology we were using. In order to present the customer with additional information at their demand, we decided to include a clickable info icon that displayed a message explaining what words and phrases mean.
Ensure that features guide users to use the site in the most productive way possible with controls instead of completely freeing the customer to use the site in ways that might be unproductive. We realized that while customers may desire certain functionality, enabling them to use the site to their own detriment is something that we should control for.
Importance of color to make it fit the customer group we are designing for. We learned how the colors we had chosen (and the lack thereof) led classmates doing our heuristic evaluations to think they were applying to a job, rather than joining a college project. Knowing the importance of choosing the right color palette will be extremely important going forward with future designs.
Utilize icons to convey the same information with less text and information overload. This was applied greatly in redesigning project cards, and was much clearer than when everything was in text form. It also gave us a great chance to apply a concept we had learned from the last phase to utilize human reading patterns.