Exploring student organizations through a curated and intimate experience.
CASE STUDY • RESEARCH • PROCESS
PRODUCT GOALS
To develop a platform which helps students navigate through organizations within their college with three main features, the ability to search through student organizations, explore what’s out there and propose new organizations.
ROLE
As the sole designer of this case study, I performed the end-to-end design process from research, sketching to wireframes, mockups and building prototypes within the span of one week.
PROCESS
USER
RESEARCH
SKETCHING +
IDEATION
USER FLOW +
WIREFRAMES
MOCKUPS +
VISUALS
INTERACTIVE
PROTOTYPE
USER RESEARCH
The project began with interviewing and surveying students and friends on the process of joining an organization, what are some of the pain points and factors which affects their decisions.
DISCOVERY TO COMMITMENT FLOW
Most of the students share a similar journey towards joining an organization. They undergo the exploration process of joining an organization by researching on organizations online and attend fairs where they learn more, shortlist a few that they like, check their schedule and commit. Let's take a look at the experience of some online portals.
COMPETITIVE ANALYSIS
PROBLEMS : LACK OF LEARNING ONLINE & NOISE
As it turns out, existing solutions to discovering student organizations online lacked the opportunity for students to explore and learn about organizations, some lacked a search tool, leaving just a list. Some schools even have as much as 1000+ organizations.
SOLUTION : CREATING A TAILORED, INTIMATE EXPERIENCE TO EXPLORE
The chosen solution was to provide students the opportunity to explore organization online by reducing the clutter of irrelevant organizations through a tailored experience which carefully utilises real estate to provide an intimate and focused experience to explore, search and propose organizations.
This way, we can digitise the exploration and learning of organizations online which would be helpful given the pandemic situation we are facing.
WIREFRAMED SOLUTION
To create a more intimate and relevant experience for students to learn more about different organizations, ideas on how to distill and refine a more relevant and rich experience were iterated upon. The solution which was chosen was to select relevant categories and then have the opportunity to dive deeper and learn more afterwards.
I mean,what are the odds that the quarterbacks would be interested in contemporary ballet meetup? Not zero. But also, pretty slim.
MOBILE FLOW
After the solution was chosen, I continued to elaborate on the overall mobile flow, organising pages to arrive on the best flow and process for the best experience.
MOCKUP + VISUAL DESIGN
Color palettes and typography as well as design patterns were shortlisted using material design for the style guide. The initial designs featured a curved accent for the header background, transparency, shadows, blue color palettes and card patterns.
Previous
Next
GRID + MODULAR SYSTEMS
A fractional grid system was deployed to organise the UI elements, The overall design was thought through to share the same grid and retain positions of certain UI elements to embrace continuity and familiarity for a better experience.
DETAILED USER FLOW - OVERVIEW
The above shows the overall detailed user flow with mockups of each screens and highlighted segments of individual features.
DETAILED USER FLOW - SEARCH
After curating relevant categories of organizations, the search tool introduces a feature to help solve another problem on the user journey process - checking to see if it permits schedule. A feature not available on existing platforms.
Students can toggle thier available days below the search bar to show organizations that permits their schedule. Solving another pain point in the user journey.
DETAILED USER FLOW - EXPLORE
Each organization pages attempts to digitize the organization fair experience by populating each organization pages with more immersive media like photos, videos as well as components to populate a wide array of information to help student learn about the organizations.
Organization fair brought online, see who's joining which organizations, learn about the organizations and join online.
INTERACTIVE PROTOTYPE - HOVER TO PLAY
EXPLORE
SEARCH
JOIN
The interaction design strategy was to leverage on existing grid system to expand and collapse modal views and cards depending on the amount of data needed to be show. Showing clean and concise information, expandable when needed.
LEARNINGS
Tailoring contents and categories could provide users a drastically different and intimate experience by freeing up real estate to provide users contents which are more relevant and delightful. Especially in this study, pain points were converted to actionable funnels to provide users a better experience.
Other works
Menu