Lynda.com

OVERVIEW

MOSAYEC

ROLE

UX Researcher & Designer

CLIENT

MOSAYEC

TOOLS

Pen & Paper | Sketch |
Keynote | Axure

BACKGROUND

MOSAYEC is a Chicago-based non-profit organization that seeks to build a web platform for middle and high school aged students to discover and participate in extra curricular activities.  While much research has been done about the positive effects of extra curricular activity participation on a child’s developmental growth, there is a void when it comes to platforms that actually allow students to find a comprehensive list of extracurricular activities in their local community.

THE CHALLENGE

The client came to us looking for help in designing a student-facing web platform that would allow for discovery, sharing, management of, and reflection on extra curricular activities. At the time, the client had some ideas of what he wanted for the application, and the user base he was targeting, but we were essentially starting with a blank canvas on the design.
In addition to designing the web application, we were also asked to lead two co-creation workshops with a group of middle school aged students to teach them about design thinking and conduct user testing on our design concepts.

Prototype

Axure

DELIVERABLES

Domain research | SME/user interviews | co-creation workshops | personas | sketches | task flows | usability testing | wireframes | prototype

THE APPROACH

As part of a larger team of six UX designers, we used Agile methodology and the design thinking approach for this project.
RESEARCH
01

Understand

The overarching goal of our research was to understand the client’s vision for the web application, the current landscape and our potential users. 

UNDERSTANDING THE VISION

Because we were designing this application from the ground up, it was important for our entire team to first meet with the client and outline the goals and expectations for the product.  We wanted to understand any limitations the organization had and the support bandwidth they had for a first version rollout of the application.
Key Insights:
  • V1 platform design should focus on the students
  • Include additional users (e.g. parents, teachers, third party organizations etc.) in the research so that future versions of design can address these users
  • Allow users to search, explore and view recommended activities based on preferences
  • Consider a gamification model
  • Present each extracurricular activity as a “card”
  • Consider unique needs of low/middle-income users in design

Domain & COMPETITIVE ANALYSIS

It was also important to understand just what types of extra curricular activities exist, and how information on these activities is currently being presented and shared.  We tried to put ourselves in the mindset of a potential user seeking out this information, so we could see first-hand how easy or difficult it would be to find.
Key Insights:
  • No way to find comprehensive list of extra curricular activities across all organization types (ex: schools, churches, parks & recreation centers)
  • No way to find comprehensive list of activities based on location, interests, age,  cost, etc.
  • Many websites only list types of clubs or activities, but don’t show information on individual events

Co-creation Workshop #1

Our team broke out into two groups to finish out the research.  Two other designers and I took the lead on planning the co-creation workshops with the teenage students. The aim of the first workshop was to organically uncover information on teenagers motivations, behaviors and preferences with technology and extra curricular activities.  The workshop included the following components:
  • Design thinking presentation
  • Strategic ice breaker games
  • A co-creation exercise -  going through the design thinking process to design a poster for an activity or event that included all information needed for the student and their parents to make a decision about attending. 
  • Reflection survey - helped us assess the capabilities for this age group to reflect and articulate feelings. It also gave us feedback to use for improving or tweaking our next workshop.
We each took notes throughout the workshop and spent individual time talking with the children and asking them questions to help gain insights. After the workshop, we came back together as a group to discuss and compile all observations.
Key Insights:
  • Strong interest and participation in web/mobile gaming apps
  • Desire to participate in certain activities is fueled by personal interests and what their friends are involved in
  • Likes a clear sense of achievement
  • Needs a simple mental model
  • Not all students own a cell phone, but all of them had access to a computer or tablet

SME/User Interviews and Affinity Diagramming

While we planned and led the workshop, the other three designers focused on conducting interviews with guidance counselors and parents of teenagers. Through affinity diagramming my team members uncovered more information about our potential users and the landscape.
Key Insights:
  • Teenagers want to make autonomous decisions from parents
  • Factors influencing students desire to participate in activities include social belonging, personal interests, and receiving affirmation
  • Factors influencing student’s ability to participate in activities include location, transportation, cost, and parental approval
  • Roadblocks to participation vary depending on socioeconomic status:
  • low income: access to information, cost, transportation
  • middle/upper income: trust, perceived benefits, scheduling
SYNTHESIS

Define

With a solid understanding of our users we now needed to bring clarity and focus to the problem we are trying to solve with our redesign.

Developing User Personas

We developed four personas that captured the main goals, behaviors and pain points of our primary and secondary potential users (students and parents respectively).

Defining the Problem and Outlining Design Principles

From there, we focused on defining a problem that we wanted our application to solve for, and design principles that would guide our redesign decisions throughout the rest of the project.
Since we were focusing on designing the V1 application for the children, our problem statement was focused on them.
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.
All-encompassing
The platform needs to provide students from all socioeconomic backgrounds the opportunity to find extracurricular activities.
Relatable
Visual elements and content should be unambiguous and relevant to the primary users, language should be easily understood.
Exploratory
Students should be able to explore their interests on the platform and discover current and new interests.
MVP
Pick elements that are needed to launch most basic proof of concept and V1.
UX DESIGN

Ideate / Prototype / Test / Iterate

With a problem statement and design principles in place, it was time to start brainstorming ideas for the product and the interface.

Sketching & Rapid Wireframing

Each team member sketched out ideas and quickly created low fidelity wireframes. We gathered together and each designer presented their ideas to the group.   Interestingly, we found that each designer had some key ideas in common with at least one or two others.   We were able to discuss all of ideas from each design and categorize them into two larger solution concepts. We decided to break out into two groups of three designers to explore and refine both of those larger design concepts for the rest of the project.

TASK FLOWS

My initial design ideas mainly aligned with solution #1, so I worked with two other designers for the remainder of the project on building out and refining that design. We outlined three main task flows for the application to help create a visual outline of the screens that we needed to design.

PAPER PrototypING

We had roughly two days to create higher fidelity wireframes and turn them into a prototype to test with the kids during the second workshop.  Each designer in my group took one of the primary task flows and created wireframes for that flow. We used a wireframe kit to help ensure consistency once we pulled all of the wireframes together. We periodically shared our wireframes with each other to get feedback and ensure that we all agreed on the design and execution.
We printed several sets of our wireframe screens to use as paper prototypes for the workshop.

CO-CREATION WORKSHOP #2 AND USER TESTING

During the second workshop with the kids, we reviewed the design thinking process, did another co-creation exercise, and tested our two design solution prototypes.  We gave the kids specific tasks to complete and took notes for future iterations.
User Testing Insights for Solution #1:
  • The idea of awarding badges for reaching specific milestones was well received.
  • By using design patterns, we helped minimized confusion while navigating the application.
  • Some of the high-level category names we used for the activity browsing screen were confusing and required clarification.
  • The kids liked the idea of being able to search and browse categories.
  • Students really liked specifying interests and seeing recommended activities.
As a fun reward for the kids’ participation in the workshops, each designer on my team designed a digital version of one of the kids' activity posters they created in the first workshop (see mine below).  It was great to see their faces light up when we showed them each of the designs!

ITERATION

We each went back to the wireframes we designed and refined them based on the testing insights and feedback. We made sure to account for empty states, expanded states, modals, and error states. I then worked with one of the other designers on my team to create an annotated, clickable prototype in Axure from our wireframes.
THE RESULT

Final Design

Between the three designers on my team we created over 30 high fidelity wireframes for the student-facing application. Below are some of the wireframes for solution #1. Click each tab below and scroll to view each of the different dashboard screens.
You can also view the axure prototype here:
VIEW PROTOTYPE
1
2
3
4
5
6
7
8
9
10

1- Sign Up

2 - Onboarding

3 - Onboarding Step 2

4 - Onboarding Step 3

5 - Find Activities (Recommended Activities)

6 - Recommended Activities (Expanded Activity Card State)

7 - Browse Activity Categories

8 - Profile with Reflection Notification

9 - Reflection Survey

10 - Badges

CLIENT & STUDENT FEEDBACK

We presented our research insights and prototypes of both solutions to the client at the end of the project. The client was very impressed with both design solutions and the insights discovered through our research.
We also asked the students to fill out an anonymous reflection survey for the co-creation workshops.  We were overwhelmed with the positive feedback including many saying they  felt inspired, proud and really enjoyed being creative and learning from others.

NEXT STEPS

We recommended the following next steps to the client:
  • Further user testing of both prototypes
  • Further iteration based on user testing feedback and insights
  • Develop branding and a style guide that can be used for the visual design
  • Continue interviewing primary users, secondary users and SME's to gain further insights
  • Iterate, iterate, iterate!

Other Projects

MedMatch

BRANDING, UI

Lynda.com

RESEARCH, UX, UI

Designed by Whitney Romanchuk

© 2016  |  ALL RIGHTS RESERVED