UX/UI Design, Research / Wireframe / Mockups / InVision Prototype
NYCCTorgs is a mobile app that allows students to browse, search and create new student organizations at City Tech.
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?
Research: Existing Platforms
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.
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.
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:
- Ease of Access
- Inaccurate Information
Brainstorming the Information Architecture and Userflow
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
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