MOSAYEC

A platform for discovering extracurricular activities.

macbook

INTRODUCTION

 

 

Client: Mosayec

 

 

Context 

Mosayec is a nonprofit whose mission “is to increase the number of K through 12th graders who have access to extracurriculars and youth development programs, particularly disadvantaged youth and those living in poverty.” This mission was informed by the nonprofit’s core belief that “all youth need steady access to fun, learning activities that promote emotional, intellectual and spiritual development.” To help materialize part of their mission, the organization sought to build a digital platform for the sharing, tracking and discovery of extracurricular activities for middle schoolers. 

Challenge 

My team of five other UX designers was approached by the CEO of Mosayec to conceptualize the aforementioned platform which facilitates access to and awareness of opportunities regardless of socioeconomic status, autonomous exploration of individual interests, reflection on and integration of past activities and a positive sense of group-based belonging and identity. The final concept should be delivered in the form of wireframes and a high-fidelity prototype.

UX Team

Abhay Mistry

John Cheng

Kevin Ku

Whitney Romanchuk

Ayoub Hadi

Paymon Nanji

Role

market research

user personas

ideation/sketching

wireframing

user testing

prototyping

interaction design

Tools

Xtensio

Proto.io

pencil & paper

This case study contains 4 phases: Phase 1: Understand, Phase 2: Create, Phase 3: Validate and Phase 4: Refine. Additionally, there are two interstices which discuss co-creation workshops we conducted with middle school students.

PHASE 1: UNDERSTAND

Since my team consisted of six members dedicated to UX research and design, we had the luxury of executing several research methods which wouldn’t have been feasible under usual circumstances. The methods included: domain research, competitive analysis, surveys, interviews and co-creation workshops.

EXPLORING THE DOMAIN

Kevin and I sought to understand the domain by researching middle school aged kids’ general internet/device usage habits both as a means of uncovering any mental models they may have and to detect any technological paradigm shifts among the identified users. This research was especially useful since the target users’ behavior is known to change rapidly. We also sought to gain at least a rudimentary understanding of their extracurricular involvement as well as interpersonal relationships, considering the platform may include socialization functionality. 

The most compelling findings are highlighted below.

% of all 13-14 year olds who have access to the following types of phones

  • Smartphone
  • Basic Phone
  • No Phone

% of 13-14 year olds who have access to a desktop, laptop or tablet computer

Social media preferences (in %) among 13-17 year olds whose household income is ≤ $30k

Young Teens (12-14) Swayed More By Their Peers

  • Rising cost of extracurriculars (ECs) makes after school activities a “luxury” for many students, Source
  • A Majority of Teens Say Social Media Better Connects Them to Their Friends’ Feelings and Lives, Source
  • Even after controlling for socioeconomic factors and cognitive ability, extracurricular participation is linked with higher grades and graduation rates, Source

SCOPING OUT THE COMPETITION

Meanwhile, Whitney and Paymon performed a competitive analysis of the top 15 mobile/web platforms which focus on the intellectual and social development of middle school aged kids. The platforms were distributed across four categories: academic sharing platforms, event aggregators, homework tracking and EC/youth events discovery. These categories were of interest because, collectively, they embodied the CEO’s vision of Mosayec. 

Academic Sharing Platforms

  • Lists extracurricular activities hosted by the school
  • Not a current list and focuses on clubs rather than “activities”
  • Limited to in-school extracurriculars
  • Usually provides bare minimum information 
schoolrush-logo
  • Mainly a communication platform between parents and teachers
  • Allows parents to see assignments and other events
  • Can send pictures/documents/text
  • Directory for teacher and other parents
  • Free for parents and teacher, school pay for service
logo-mojo-900
  • Primarily a communication tool between parents and teachers
  • Teachers can give positive or negative feedback to students via +/- points and badges.
  • Students can see their own progress in terms of points and badges (Parents can also see this)
  • Teachers can also post text and photo updates to “Class Story” feed that parents can see
  • Seems geared toward younger students (elementary) although it is used up until high school
  • Free
youtopia_logo
  • Allows teachers to post content, from academic to extracurricular and track student participation
  • Seems to focus on volunteering
  • Participation is encouraged through gamification – students earn points and badges as they complete more tasks
  • Very binary though, when something (an event for example) is posted, student simply marks that they did it and then once verified they get the points
  • Includes leaderboards to motivate through competition
  • When users reach certain levels of participation they are awarded with unique badges to showcase that milestone
  • Free and up – depending on number of users
  • Available for k-12 and beyond
remind-logo-blue

Remind is a communication tool that helps teachers connect instantly with students and parents. Send quick, simple messages to any device.
.

seesaw-logo-315px
  • Allow students to upload and document projects and assignments
  • Teachers see all work and can provide feedback (& invite parents to see students work)
  • Provides tools that allow reflection (although it seems the reflection is prompted by instructor or parent)
    • video recording w/ annotation
    • captions
    • audio recording
  • Mostly free with paid options

Event Aggregators

eventbritelogoff8000gradient
  • browse events based on city and location
  • discover popular local events, get recommendations for events and also see the events to which friends are going
meetup_logo_1
  • create or join local groups with varying interests (tech, food, photography, outdoors, exercise etc.)
  • specify your interests (from a list and search) and receive suggested meetup groups
  • receive notifications when your meetup groups have events
  • integrates with facebook so you can see what groups your friends are apart of or common friends with other attendees
  • upload photos, view event attendees & group members, post comments/discussions
tumblr_static_8qfqwql9now8oggcocg84sgk0
  • discovery app for events that are happening in the city
  • guest lists and Instagram photos
  • share event via facebook, twitter, google+, email
  • has # of attendees, photo of event, details
  • integrates with facebook
gravy
  • find an events based on your mood (lively, classy, brainy, playtime) or a category
  • can also get randomized event through ‘whatever’ button
  • The app will also plug into social media to expand your selections

Homework Tracking Apps

mWBk37eA
  • simple interface
  • indicate the class, due date (time optional), and priority level (color-coded as low, medium or high)
  • set up reminder alerts, which are saved to your calendar.

Extracurricular/Youth Event Discovery Website Examples

FLVS_logo
logo
Sponsor_1454
unnamed

Opportunities for Differentiation 

  • Add ability to filter activities using various parameters such as location, keyword, age, cost, etc.
  • Provide detailed information of individual clubs and events instead of merely a list of activities.
  • Include social functionality.

LISTENING TO THE USERS PT. 1: INTERVIEWS

The final step of our data collection process consisted of interviewing students, parents and SMEs (teachers, counselors, coaches, etc.). John, Paymon and I were responsible for formulating the questions, but other team members helped with interviews to expedite the process. 

We sought to answer six broader questions during our in-depth interviews:

  • The context of how the product (or system, if no current product exists) fits into their lives or work flow: when, why, and how the product is or will be used.
  • Domain knowledge from a user perspective: What do users need to know to do their jobs?
  • Current tasks and activities: both those the current product is required to accomplish and those it doesn’t support.
  • Goals and motivation for using their product.
  • Mental Model: How users think about their jobs and activities, as well as what expectations users have about the product.
  • Problems and frustrations with current products (or an analogous system if no current product exists).

INTERSTICE: WORKSHOP 1

Whitney, Kevin and Ayoub developed content and structure for the co-creation workshop we hosted for a small group of middle school aged kids. The purpose of this workshop was to:

  • Introduce 11-14 year olds to design thinking principles through practical examples relevant to their lives and milieu 
  • Discover user needs and validate designs through observation, discussion and co-creational activities

The workshop consisted of four primary components through which we attained our goals:

  • Introduction to design thinking
  • Ice breakers designed to give the UX team a basic understanding of the students’ technological habits
  • Exercise to apply concepts learned from the introduction 
  • Reflection survey for the UX to team to gauge how to design the next workshop in addition to more specific, standardized app/device usage habits.

We came together at the conclusion of the workshop to discuss our findings and develop insights:

  • All students have a penchant for mobile gaming
  • Extracurricular activity participation is strongly correlated with student interest as well as peer involvement
  • Students need a tangible sense of achievement
  • All students have access to a PC or tablet, but some of them do not have a mobile phone 
IMG_9507

DECODING THE RESULTS

After conducting several rounds of interviews with parents, teachers and coaches and gathering data from the students, Paymon, Kevin and I decoded all the data by affinity mapping. The patterns we uncovered were eventually translated into design principles and user personas. Whitney, John and Ayoub spent time developing the final workshop for the students during our decoding process.

AFFINITY MAPPING

The decoding process began with affinity mapping every data point we collected from the survey and interviews. Our process consisted of condensing every main idea into a sticky note then finding patterns among all disparate data points by grouping them into categories. During this process, we discovered that our data was largely in accordance with the research performed during the domain exploration. This made it easier to move forward with our findings; otherwise we would need to take additional steps to ensure our data was accurate.

mosayec_affinity

CODIFYING THE INSIGHTS

Unearthing key insights from affinity mapping allowed us to create a set of design principles which would serve as a beacon for our design solution. We also developed a problem statement, or a statement which encapsulates the ultimate problem the team should solve. This statement had a sizable influence on the design principles. In order to humanize the insights and help us understand the users’ goals, we further extrapolated the data into personas: one tutor and two types of students.

PROBLEM STATEMENT

Middle school aged kids need a way to find activities that align with their interests and social needs, convince authority figures in their lives to let them participate, and reflect on positive affirmation of accomplishments.

DESIGN PRINCIPLES

1. Safe & Trustworthy – Parents need to trust that the platform and that the content provided by the platform is safe for them and their kids.

2. Informative – Always provide as much information as possible to allow users to make informed decisions.

3. Exploratory – The platform should allow students to view activities based on interests and preferences but also allow them to explore new interests.

4. All-encompassing – The platform needs to provide students from all socioeconomic backgrounds the opportunity to find extracurricular activities.

5. Relatable – Visual elements and content should be unambiguous and relevant to the primary users.

USER PERSONAS

PHASE 2: CREATE

The second phase consisted of ideating solutions based on our codified insights from the previous phase. My team and I started by individually sketching out ideas to develop the conceptual foundation, then further developed the concepts by consolidating our ideas into two sets of wireframes and mid-fidelity prototypes.

IDEATING THE SOLUTION

Each team member took roughly 30 minutes to sketch out a conceptual foundation ultimately based on the user personas. Following this exercise, we made low-fidelity wireframes of our sketches and immediately discussed our ideas as a team with the creative director. 

My initial concept is below.

Some aspects of this concept, such as the community functionality, were inspired by Slack. Once a student verifies their enrollment at a specific school, they gain access to their district’s communities (akin to channels in Slack) such as chess club, band, art club, recreational soccer, etc. After a user clicks on a community, they can view all upcoming events in a list which includes a preview of details and create their own event. If the user is interested in an event, they can RSVP, view a list of peers who are attending and make comments which are visible to all participants. 

This concept concentrates on event tracking and discovery based on users’ interest as gauged in the onboarding process.  

The wireframes above do not fully communicate my concept as standalone artifacts because we were under strict time constraints for completion. However, they did fulfill the purpose of serving as a rudimentary visual aid for expounding upon my concept.

THE CONCEPTS

CONCEPT 1 Whitney, Ayoub and Paymon

Core competency: “easily find activities”

  • Students can search for specific activities, browse predefined categories in the form of cards, or view activities based on filters such as age, location, and preferences.
  • To incentivize the students we awarded students with badges that they could earn by enrolling in, completing, or doing a reflection.
  • Students would be able to complete reflections on activities through a quick survey.
  • Each student would have a private profile that archives activities they have completed.

CONCEPT 2 John, Kevin and Abhay

Core competency: interest driven event/activity discovery

  • Search for specific activities, browse predefined categories, and view activities based on their preferences as well as past activities. 
  • Reflect on past activities by uploading photos. These photos would act as an artifact that would be posted on the students timeline so that others can comment on.
  • Students would have a set number of activity cards and can trade them with other students.

PHASE 3: VALIDATE

This phase took place during the first 30 minutes of the second workshop with the middle schoolers.

LISTENING TO THE USERS PT. 2: USER TESTS

By this point, the team already divided in half and produced two concepts which could be tested by the middle schoolers. Our strategy for administering these user tests was to create two groups of kids with three kids each. UX team 1 tested one group while UX team 2 tested the other. We switched groups after 15 minutes. The benefit to rapid user testing is that the insights which are ascertained are more organic since the testers wouldn’t necessarily have the time to assist users as much.

KEY INSIGHTS

CONCEPT 1

  • The idea of awarding badges for reaching specific milestones was well received.
  • By adhering to users’ mental models, we helped minimized confusion while navigating the application.
  • Some of the high-level category names we used for the activity browsing screen were confusing.
  • Students liked the idea of being able to search and browse categories.
  • Students liked specifying interests and seeing recommended activities.

CONCEPT 2

  • Too many interests to pick from during the onboarding process – have fewer, but more granular options instead 
  • Onboarding process could be more engaging for the student
  • The idea of being able to contact the activity coordinator and arrange rides within the app was well received
  • Don’t use placeholder text in forms unless absolutely necessary
  • The social component, namely photo sharing, was well received 

INTERSTICE: WORKSHOP 2

Following the user tests, much of our time was spent being introduced to and personally experiencing the initial concept proposed by the CEO: a “game” in which users select their activities by way of trading and earning cards. It’s unknown why this concept wasn’t fully introduced to the team earlier in the process.

Consensus: the concept was far too complex, even for the UX team. From a usability standpoint, we determined implementing the concept was untenable given that 1) we only had one week left to finish the project and run the concept through the validation/create/iteration process and 2) the concept failed to fulfill the CEO’s own requirements which were brought forth during our first meeting.

PHASE 4: REFINE

In this final phase, we iterated upon our concepts based on the feedback we received during the user tests which ultimately resulted in high-fidelity wireframes and prototypes. 

This phase consisted of fine tuning our concept by accounting for empty, hover and error states as well as by adding more detail to certain task flows such as the addition of an event to the reflection page. As I was responsible for interaction design, my goal was to make the prototype as “life-like” as possible, leaving no equivocation for the developers. It also prevents us from having to rely mostly on annotations, which can easily be misinterpreted. The showing rather than telling strategy immensely helps in this situation.

Since there were so many modifications we wanted to make within a small time frame, one challenge we faced was determining which changes should take precedence. This was simply resolved by prioritizing the most complex changes rather than simple ones which could easily be mentioned in the final presentation with little to no misinterpretation.

EPILOGUE

Our final design was well received by the CEO of Mosayec, noting its robustness and ability to fully communicate our concept while maintaining the integrity of his vision.

One recommendation I’d make is to keep track of and adapt to fluctuating socioeconomic patterns among middle schoolers given that our concept is heavily informed by those factors. 

meeting

Next steps include:

  • Additional user testing 
  • Iterate as necessary
  • UI treatment 
  • User testing with UI treatment
  • Iterate as necessary
  • Development of the MVP
  • Alpha/Beta testing the MVP with a strategically selected school 
  • Incrementally launch into targeted school districts
  • Maintain and adapt