Project Marketplace

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.

Tools and Skills: Figma, user research, information synthesis and analysis, user testing, heuristic evaluation, Html/CSS

Design Process





Needs Analysis

Project proposal

Identify the problem and area of opportunity and conduct a contextual inquiry into our identified project proposal

Research

Conduct interviews and send surveys to stakeholders in the BOW community and competitive analysis.

Synthesize

Synthesize the collected data and create design artifacts


Design Development

Ideation

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

Experience flow

Create an interaction flow and storyboard mapping our proposal

Prototype

Create sketches of the site and increase fidelity of prototype using Figma


Design Refinement

User testing

Create a usability test plan and conduct a cognitive walkthrough for 5 focus areas

Evaluate

Evaluate the design using heuristics

Modify designs

Modify the design in response to testing


Explore

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. These are the 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 are 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, 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.
Competitive analysis

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.

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 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


Screen grab of the home page Figma mockup
    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.



Screen grab of the search projects page Figma mockup
    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.
  • Filter selection opens as an overlay.



Screen grab of the project overview page Figma mockup
    Project overview
  • Provides summary of BOW project, including name, project type, schools, organizers, contact, etc.
  • We considered 2 possible designs. The alternative design (inspired by Crunchbase) included more affordances and information, but displayed too much information for use by our customer group.



Screen grab of the create project page Figma mockup
    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.

    We explored the following 5 customer goals:

  • Post a project.
  • Apply filters when searching for projects.
  • Browse for projects.
  • Find details about a project (from the browse page)
  • Viwe 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. Full details can be found in the Usability study plan and the Usability test report.

    The main findings from the Usability Tests are:

  • 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.

  • From these findings, we created recommendations to incorporate in our design

  • Add an information 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, our team implemented significant design modifications. 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.
    Browse Page

Main revisions to this page are:

  • Tile format for project cardsto 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.
    Filter menu

Main revisions to this page 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

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
  • Need for 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.

© clairehashizume.com. All Rights Reserved. Designed by HTML Codex