Coterie

Coterie is a product that allows students to easily browse, join, get updates and suggest new organizations. It is an experience originally considering new students and then brought out as a whole new platform that colleges could utilize. For this product, I specifically focused on 3 use cases to design my wireframe flows around. The App’s concept follows products such as ‘Canvas’ and ‘Get’ which allows students to sign in through their school account and use the tools to manage school information and accounts.

Year

2019

Skills

Art Direction
Visual Design
Interface Design
User Experience

A girl being pro-active in a Student Organization, helping out.
The Problem

A new school year is approaching and the orientation team is looking to create an experience where new students will be able to easily find and propose student organizations.

Currently, there isn’t one single place to easily browse, join, get updates, and suggest organizations. This results in students only learning about existing organizations at fairs or through friends. A lot of students are not active in searching for groups they’re interested in and these groups become less popular. Stakeholders include students from all years, organization leaders, the office of admissions, student affairs and board of directors.

I want to design a digital experience that would allow all students to browse organizations, keep track of what organizations they’re joining and propose new clubs.

The Design Challenge

How might we design a product for students to learn about and continually take part in organizations?

Paper and pen with questions to consider and ask interviewees.

Research & Analysis

In order to understand the problem better and deliver the right solutions, I started looking at current student organization systems and interviewed students from different stages of their college career. After speaking with several students, it further affirmed my hypotheses.

These were the recurring pain points:
• It is hard to see all the organizations available and that are still active
• Students have a difficult time contacting and getting further information
• Student stop attending organizations due to unclear meeting dates and lack of promotion
• Information is scattered across various platforms
• Unsure of how to propose a new organization: there is no intuitive way to propose online

User Personas

After interviewing and researching the existing systems, I’ve identified the 3 main user types; new students looking to join clubs, current students in clubs, and organization leaders wanting to propose new clubs or are currently managing one.

I crafted 3 separate user personas that summarize the research results. To make the product experience more intentional and focused, I highlighted the core user needs for each user:
• Search and read about student organizations she may be interested in
• Browse for similar and new student organizations
• Propose a new student organization easily

Ideation and sketches for the App.
Ideation & Features

Upon thinking of the core user needs, I started various sketches of interaction flows and screens in order to translate the ideas onto paper. I wanted to identify the overall features of the product.

Features:
• A Homepage/Feed with popular or recommended organizations (To browse)
– Homepage can lead to filtered organizations
– Details and information about each organization
• Search Function: search and filter organizations
• A page to Propose Student Organization
• A profile to see organizations you’re in/attended
• Alerts for meeting times and updates

Use Cases & User Flows

I produced 3 user flows to provide clear directions to start designing the experiences. These user flows stem from each user persona’s core need.

User Flow 1: Search existing student organizations

There will be two ways of utilizing the search function. One will be selecting the categories that are provided in the search screen. The other is to utilize the search bar and auto-complete feature. Both results in a results page for an organization to be selected and read.

User Flow 2: Browse and discover new clubs

Another way to browse and discover organizations is with the homepage where popular and recommended clubs would show. It is intended for the user to feel like they are exploring. They will be able to look through different types of clubs they may not typically search and see. This may allow students to stumble across a new organization they were not looking to and increase the participation in certain clubs.

User Flow 3: Submitting an organization proposal

For the proposal page, I wanted to avoid the typical long form in order to uplift the process and make it easier. Through lighthearted language, I created a 5 step process where all the necessary details of an organization could be inputted. The interface and ease could encourage students to run new clubs and allow for the process to be sped up.

Full Wireframe Flow

Targeting the three user flows, I continued developing on the different functions and how I wanted each screens to look. I started designing each wireframe and slowly built out the interaction flow as a whole. The next few slides will be the flow in more detail.

Sign In Flow

The sign in and onboarding follows the typical concept where new users gets an app introduction of the various functions. Returning users will be taken straight into sign in. Since it is a school application, I decided that you will be using your school email to log in and would not need to sign up for an account because like other school apps, you are automatically enrolled with your school account information. Sign in with Google is utilized for ease and easy log in on your device.

Search Category Flow

After selecting the search tab, the user will have categories of organizations to select from as well as using the search bar itself. It is intuitive in that after selecting the category, students will be able to scroll down clubs of that category and read about what they’re interested in.

Search Input Flow

The user can also search keywords of organizations they’re interested in with the search bar. As default state, it’ll show the suggested and popular inputs and as you type, more specific auto completion will appear. When there are no search results, it’ll display a call of action of proposing an organization for something they may be interested in.

Browse Flow

As I’ve explained in the previous user flow slide, I decided the homepage would allow users to scroll through exploring clubs they haven’t seen before. This acts like a news dashfeed or explore page. This will also be the first screen users see after sign in. In the homepage, I added a ‘divider’ promoting the ‘propose’ function. This also serves as a break from the list of organizations the users are looking at. The category page is the same as what appears on search to eliminate duplicate functions.

‘Propose an Organization’ Flow

As previously mentioned, I wanted the propose flow to be seamless and easy. I made sure it is a fast process whilst obtaining all the necessary information and enhanced it with progress indicators on top of the screen. The questions were selected after looking through multiple college organization applications. I utilized category selection buttons instead of a basic dropdown for users to easily read through all categories. Each page has small copy to guide the users with what to input and other important notes. The end screen has a CTA that brings user back to browsing organizations.

Homepage: Browse

The homepage is the browsing experience where users don’t have a specific organization they’re looking for. I organized it into sections starting with a general popular club section, recommended for you and then various organization categories.

I decided to make the organization category metadata clickable and visually resemble a ‘tag’. This would prompt them to click and go to the respective category to browse similar clubs. The images would represent the organization and can be changed by each organization. The vibrant blue contrasts the clean white; it attempts to brighten up the experience and excite the users. The use is kept to a minimum where it creates delight and doesn’t overwhelm.

Organization Page

For the Student Organization Details page, I kept a similar pattern and concept where there are various titles with cards that belonged to them. I wanted to change up the light, minimalistic aesthetics and introduce a darker interface for the organization description. This allows the important information to be differentiated from the always changing details below. It acts almost like a detail card overlayed onto the app and the white interface is where additional details comes in. The same scroll through concepts interplays within each section.

User Interface Explorations

Throughout the process, I experimented with various patterns and design. These are some of the visuals that didn’t end up working while I was developing the product wireframes.

The Solution

The solution for new students to learn, search and propose new organizations is Coterie. It is an experience that keeps all student organization related functions in one place and encourage students to join.

In terms of the overall vision for the product to be integrated within the school’s existing system, there are two main routes for the future:
• It could be a part of the school’s application because it seems unnecessary for students to have to download a complete new app just to see organizations. They may be discouraged.
• It could be a whole new platform which a school joins and utilizes their product. This would act like ‘canvas’ (app for class information, assignments, and exams), ‘get’ (an app for student funds and card).

Reflection and Takeaways

I’ve enjoyed this project that had a short turn around and required a lot of thinking and ideating. I had a lot of fun sketching out countless ideas and then stepping back to pick specific user need to focus on. The process of creating a use case and then designing the screens surrounding it was a great way to tackle a complex new product. I was able to focus on the wireframes for each step after already producing a feasible solution to the problem.

There are definitely several functions that I didn’t get to tackle and would be interesting as a separate project. While designing and researching, I start to realize that a lot of products seem to utilize similar patterns even if they serve different purposes.

Share