|
OVERVIEW
|
|
The Challenge
|
|
American Time Use Survey, consisting of 112,000 individuals, U.S. residents 15 years
and older (from the years 2003-2010) found that females comprised just 28% of all those who participated in individual sports and 20% of all those in team sports. What this means: there is an imbalance in the representation of girls vs. boys in the youth sports community. How might we bridge the gap between young girls and youth sports?
|
|
The Solution
|
|
The “Girls on the Run” responsive website connects and encourages girls to a
lifestyle rooted in a strong and active lifestyle, by bridging together a strong community of mentorship. |
|
Tools: Figma, InDesign, InVision
|
|
Team: Anna Yuan, Clair Sun, Hanna Jang
|
|
My Role: Project Management, Design Research, Scenario/Storyboarding,
Wire-framing, Prototyping,
|
|
|
|
|
INITIAL RESEARCH
Secondary Research
The start of the process began at secondary research. Given the domain space of "Youth Sports" I dived into researching more about the broader topic of youth sports, while also researching for organizations that were active in the specific domain space of Pittsburgh. Specifically, I wanted to find an organization represented a real, tangible, and urgent need in the youth sports space. I found this in the unequal representation of organizations dedicated to female-based teams compared to the male-based sports teams in Pittsburgh. In the initial research, I found that there was an unequal number of youth sports communities dedicated to boys compared to girls. OUR FIELD RESEARCH
Guerrilla Research
I was curious to find out more about a possible inequality between males and females in encouragement to do youth sports. To gain more understanding of this problem space, our team went out to do guerrilla research with the wider Pittsburgh community. We collected data from about 50 participants in our guerrilla research. Our research design was centered around asking the same set of questions to both male and female participants. However, we organized the answers of these questions based on the genders of the participants: male or female. 
WHAT WE DISCOVERED
Research Insight
From the research I found that: 1). Compared to our male participants, the female participants felt significantly less encouraged to engage in after school sports: 63.3% compared to 72.47% 2). The difference in the type of sports, between males and females was also prominent. For ex). basketball was one of the most popular choices among males, while it was one of the least popular for females. Based on this research finding, I established the design question: How can we encourage a more welcoming environment for girls who might be interested in sports?
With this question in mind, we found that Girls on the Run (GOTR) was a program that was working in this specific problem space. However, we felt that more could be done to achieve the goal in the specific problem space with a redesign of the GOTR website.
CUSTOMER ANALYSIS
Customer Journey Map
In the journey map, I focused on the users and service provider. I wanted to see if there were any overlap/shared paint points from these two groups. THE PERSPECTIVES BEHIND THE DESIGN
Personas
Given the findings and highlighted points from the Customer Journey Map, I established three personas, Emma Johnson who represents our end users, Amy Torres who represents the perspectives of the business client, and Meg Brown who represents the administrative group. 
I gained understanding of motivations, frustrations and goals of the persona: Emma, who represented the stakeholder group comprised of the GOTR member.
Through Meg, I was able to understand the coach's goals and needs. Specifically, I was able to grasp this specific stakeholder's motivation to mentor girls in a lifestyle change- and not just coach the girls physically.
The business provider persona gave me insight in understanding the business needs and values
for GOTR. 
SOLUTION IDEATION
User Scenarios
Based on the information I gained in the research process, I explored different ways that the website could assist customers, service providers, and business owners. This way, I could visualize the process of how a user might use our design. The team brainstormed together 10 scenarios. Each scenario addressed a specific user need and presented a solution for that particular need.
EXPLORING THE USER EXPERIENCE OF OUR DESIGN
Storyboards
Storyboards were created based on the scenarios. Each storyboard contained the context, problem, solution, resolution pattern and feature value points for the customer, service provider, and business owner. This way, visualization of the user experience would be clear. Additionally, it was crucial to better understand users' motivations and experiences in relation to the problem space.
Scenarios included: 1). How might you engage in sports without being an athlete or paying for classes? 2). If all your friends are busy, how might you find a group to do sports together? 3). If you have low confidence about your body, how might you find a positive and healthy method? 4). How might you turn discouragement to motivation? 5). How might you be encouraged to step outside of your comfort zone and start a new hobby in exercising? Storyboards shown below: EXPLORATION OF NEED VALIDATION
Speed Dating
The speed dating design method is a tool used to explore how concepts would be used in application to the users specifically. Our team sat down with our users to explore each of our design concepts behind the storyboards. From this exploration, we were able to receive feedback about the need validation and user enactment of our concepts from the users directly. These insights were key in evolving and shaping the our final concept/strategy.
Feedback: Things we got right
1). People were positive towards the idea of having an online community for youth sports.
2). The role of a coach/mentor and celebrity influencers are important for our target customers. Feedback: Things that we might want to change
1). General concern of information privacy and safety of young members.
2). There may be more ways to keep the website active and motivate the girls to post more. We incorporated the feedback we received from the speed dating sessions.
The improvements we made included: 
THE CONCEPTUAL MODEL BEFORE THE DESIGN
Defining the Design Concept
The Girls on the Run re-design concept would be: An interactive and immersive experience focused on support and community for the young members of GOTR. This includes a platform for media sharing, such as photos and testimonies to encourage both current and potential GOTR members. In this experience, the young members of GOTR are introduced to support for a lifestyle, not just the physical hobby of running. 
VISUALIZING THE STEPS
User Flows
With our defined design concept, we solidified what the end goal of our users would be. The user flows were the next step in visualizing the path of the users throughout the solution.
This helped synthesize our concepts into information architecture of our re-design. Initial Brainstorming (pictured below)
|
Final Version of User Flow (pictured below)
|
|
THE UI BACKBONE
Low Fidelity Wireframes
In the wireframes, not only was the outline of the design important, but also the hierarchy of information and possible usability issues were also high priorities. When the users were interacting with the UI, would the design be supporting what the users were looking for? To answer some of these questions, wireframes of both the desktop view and mobile views were created. Different layout of the elements were also explored in this process, especially as we continued to gain user feedback from our wireframe designs.
Wireframe: User View (pictured below) |
Wireframe: Coach Admin View (pictured below) |
|
FINAL DESIGN
Hi-Fidelity Wireframes
After focusing on the layout, hi-fidelity prototype stage was an opportunity to explore more specific elements such as color, typography, and adjustment of size, according to the mobile or desktop view. Some design decisions included color, typography, and content details in screens. For example, the reason why I advocated for our theme color to be the specific shade of millennial pink was because of accessibility for the middle school girls. There is also a recent push in media to make millennial pink a gender-neutral tone, and not just confined to a girly stereotype that it had been subjected to in the past.
The hi-fi interactive prototype stage featured screens with a more sophisticated interaction-focused platform. For the high-fi interactive prototype, there are 2 user-flows: one for the GOTR members and another for the GOTR coaches. |
|
GOTR Member User Flow
|
|
GOTR Coach User Flow
|
|
Features of our responsive web design:
|
Responsive design to both Mobile and Desktop Platforms
|
WHAT I LEARNED
Takeaways
|