NYCCTorgs is a mobile app that allows students to browse, search and create new student organizations at City Tech.

Project Details

Brief: A new school year is approaching and the orientation team is looking to you for some design expertise. Design an experience for new students to browse, search, and propose new student organizations. Provide your overall process, a wireframe flow, and one to two screens at higher fidelity.

Tools Used: Sketch, InVision, Pen, Highlighter, Paper, Post-Its, Google Slides

Disclaimer: Brief was given by Google for the Summer 2019 UX Design internship candidacy on January 25th, 2019 with 1 week to submit.

Understanding the Problem

Before starting the project, I had to ask myself a few questions:

  • Who are considered new students?
  • What are the current existing platforms that are available at my school (New York City College of Technology) to browse, search and propose a new organization?
  • How do current students browse, search and/or propose a new club?
  • What’s working in the current browsing, searching and proposing process?
  • What are the current pain points of the experience?
nycctorgs students

Research: Existing Platforms

nycctorgs existing nycctorgs proposing new clubs on OpenLab nycctorgs mobile app

User Interviews

After my research, I sent out surveys through OpenLab, text message and in person. My goal was to get at least 10 participants. I had a week's time to do this project and in a couple of days I was able to interview a total of 8 people; 1 on the existing platform, OpenLab, and the rest were in person at school.

nycctorgs interviews

Solving the Problem

Plan of Action (Finding Core Focus)

With interviews and personas completed, I had to organize the information and narrow down the product’s mission. Users were given cards with highlighted details written from interviews and the research done on current platforms.

nycctorgs painpoints

Open card sorting was used to find out how users would categorize their pain points, goals and needs.

Based on the feedback, 3 categories needed to be solved and set as priority (the core focus) for this product’s mission:

  1. Ease of Access
  2. Communication
  3. Inaccurate Information

nycctorgs persona

Brainstorming the Information Architecture and Userflow

nycctorgs IA

After refining the information architecture for the app, I created a rough draft of paths Bryan (from user scenario) would take for the following tasks and tried my best to create a final version of the user flow and their wireframes to include the following features:

  • the ability to access their profile
  • see which clubs they are a part of
  • access the club’s profile page,
  • contact leadership team members on the club page before joining,
  • be able to see chat option on the club page,
  • browse the overall directory,
  • see other recommended clubs and organizations on campus according to preferences
  • search the app,
  • proposing a new organization

nycctorgs digital refine IA

User Flow

nycctorgs userflow

Wireframes

nycctorgs wireframes login nycctorgs wireframes profile nycctorgs wireframes notifications events nycctorgs ideation

User Testing

nycctorgs usertesting

User Testing - Results

  • 3 out of 5 (60%) said having both the search bar and filter bar seems to be redundant on the results page
  • Using CUNY ID# is a good touch. Makes app feel inclusive for non-City Tech exclusive students that are on campus
  • Font size might be too big (ie: club registration form)
  • Chat feature is nice, would like to see a working prototype of it
  • Make button colors consistent (tag boxes on search page are blue, but answering questionnaire shows yellow)
  • 4 out of 5 (80%) asked, How can I start a group message in the club profile?
  • “View other members” can be replaced with creating a touchpoint on “# Members” under club name

Updates According to Feedback

nycctorgs updates

Final Design

nycctorgs final ui

Prototype

NYCCTorgs MissingDoc Beat BeautyLog