WeBuiltAI
Donation Allocation Decision Aid
(Research & Algorithm Building)
WeBuiltAI
Donation Allocation Decision Aid
(Research & Algorithm Building)
Girls On The Run
Responsive Website Design
Overview
This is a team project for the course Interaction Design Studio I. We designed a responsive website for Girls On The Run, a non-profit organization that inspires girls to be healthy and confident using a fun, experience-based curriculum which creatively integrates running.
Through our website, we created a community that provides an interactive and immersive experience focused on support and community for the young members of GOTR. The website includes basic curriculum checking, coach & students interaction as well as a platform for media sharing, such as photos and stories. In this experience, the young members of GOTR are introduced to the idea of sharing and support for a lifestyle, not just the physical hobby of running.
Teammates: Clair Sun, Hanna Jang
Duration: 3 weeks
Conducted various user studies to understand user needs and incorporate feedbacks
Design artifacts in different phases and the final product
My Role:
Product Overview
Guerilla Research
The main focus of our research was to gain an understanding of the sports engagement of the people when they were young. We hope to learn about the difference in sports opportunities between boys and girls and brainstorm ideas to encourage girls to be more physically active.
We wrote down several questions on the whiteboards and asked our friends, CMU students, and passers-by to answer the questions using small stickers. It allows us to get large amounts of information from various users in a short time.
Based on our Guerrilla Research result, we decided to put our eyes on Girls On The Run, a non-profit organization dedicated to creating a world where every girl knows and activates her limitless potential and is free to boldly pursue her dreams. Specifically, we wanted to focus on the GOTR UPMC Magee team branch here in Pittsburgh.
Stakeholders and Personas
Customer - Girls
Participates a 10-week after school program. Throughout the season, the girls train with coaches, make new friends, build their confidence and celebrate all that makes them unique.
Service Provider - Coach
Leader and coach of the GOTR team. Coach is responsible for managing and training the girls
Business Owner
VP of Volunteering
Provides financial support for the program (GOTR UPMC branch)
We created a persona for each of the stakeholders to summarize the needs, expectations of its represented user group. It helps us to kind in mind "Who we are designing for" in the entire design process.
Customer Journey Map
Using a customer journey map, we mapped out the process that the users go through to achieve goals with the GOTR organization. It helps us to get a sense of our users' motivations -- their needs and pain points. From there, we look for design opportunities to improve the current situation.
.png)
Storyboard and Speed Dating
We speed dated the storyboards with our classmates, families and were key friends and incorporated their feedback. Their insights were key in incorporating our design concept.
Speed dating result - Things that we got right
“I would be more willing to sign up and participate if I have friends with me. ”
“I would be more likely to use this, if I knew that they were my age and they have similar concerns with me. ”
“I would Love to read about the stories about my heroes. It would be nice to tag myself into a community and surrounded healthy,
confident young girls. ”
“I would be more motivated to exercise if I am surrounded by people who have a healthy lifestyle”
1. People are positive towards the idea of having an online community for sports.
Many participants loved the idea of having an online forum where girls posts questions and share experience with sports & exercising. They think they’ll be more motivated if they are with people who have healthy lifestyles.
2. The role of a coach and a celebrity representative is important.
Participants thought story sharing of coaches and celebrity
representatives will be inspiring to the girls. It would be nice if
there can be more interaction between the young members and
the coaches/celebrities.
Speed dating result - Things that we might want to change
“I think there should be some kind o screening before people are allowed to post/read the posts. I don't want any bad guys to see my information.”
"If I am a middle school girl, I may need parents' permission to meet someone and they care about my safety."
"I think it is better to have a coach there instead of letting the girls self-organize activities."
"I would be reluctant to reply to a complete stranger so more information is needed."
1. General concern of Information privacy and the safety of young members.
Since we are designing for minors, safety should be one of the
most important factors that we care about. The girl information shouldn’t be exposed easily on the website. They should be prevented from seeing any strangers themselves.
2. Better ways to keep the website active and motivate the girls to post more.
Girls may feel shy / unsafe to post to a completely stranger. Elements need to be added to make the website differentiate from a normal social media.
Summary of improvements
A safer environment:
-
Only part of the content is available to the public. Details of team activities, photos, etc, are only visible to the girls and coaches.
-
Instead of letting the girls self-organize events, coaches manage everything. Fun activities are organized besides the normal training sessions.
More interaction
-
Every member is more involved in the creation of the community. They can upload photos to a national gallery. Interactions like comments, likes are supported.
Social Media for health & sports
-
The key of the website is to introduced young girls to the idea of sharing and support for a healthy lifestyle. Trendy elements will be added at the same time to satisfy the needs of young girls today.
Storyboard and Speed Dating
We speed dated the storyboards with our classmates, families and were key friends and incorporated their feedback. Their insights were key in incorporating our design concept.
Speed dating result - Things that we got right
“I would be more willing to sign up and participate if I have friends with me. ”
“I would be more likely to use this, if I knew that they were my age and they have similar concerns with me. ”
“I would Love to read about the stories about my heroes. It would be nice to tag myself into a community and surrounded healthy,
confident young girls. ”
“I would be more motivated to exercise if I am surrounded by people who have a healthy lifestyle”
1. People are positive towards the idea of having an online community for sports.
Many participants loved the idea of having an online forum where girls posts questions and share experience with sports & exercising. They think they’ll be more motivated if they are with people who have healthy lifestyles.
2. The role of a coach and a celebrity representative is important.
Participants thought story sharing of coaches and celebrity
representatives will be inspiring to the girls. It would be nice if
there can be more interaction between the young members and
the coaches/celebrities.
Speed dating result - Things that we might want to change
“I think there should be some kind o screening before people are allowed to post/read the posts. I don't want any bad guys to see my information.”
"If I am a middle school girl, I may need parents' permission to meet someone and they care about my safety."
"I think it is better to have a coach there instead of letting the girls self-organize activities."
"I would be reluctant to reply to a complete stranger so more information is needed."
1. General concern of Information privacy and the safety of young members.
Since we are designing for minors, safety should be one of the
most important factors that we care about. The girl information shouldn’t be exposed easily on the website. They should be prevented from seeing any strangers themselves.
2. Better ways to keep the website active and motivate the girls to post more.
Girls may feel shy / unsafe to post to a completely stranger. Elements need to be added to make the website differentiate from a normal social media.
Only parts of the content is available to the public. Details of team activities, photos, etc, are only visible to the girls and coaches.
Instead of letting the girls self-organize events, coaches manage everything. Fun activities are organized besides the normal training sessions.
A safer environment
More Interaction
Every member is more involved in the creation of the community. They can upload photos to a national gallery. Interactions like comments, likes are supported.
Social Media & lifestyle
The key of the website is to introduced young girls to the idea of sharing and support for a healthy lifestyle. Trendy elements will be added at the same time to satisfy the needs of young girls today.
Our Design Concept
"Create 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 stories. In this experience, the young members of GOTR are introduced to the idea of sharing and support for a lifestyle, not just the physical hobby of running."
Screen Maps and Wireframes
The target users of this web app are girls (customers) and coaches (service providers). We identified the key specs that had to be included in the app for both user groups, which helped us to map out the user flows and develop screen maps for the app.
GIRLS
COACHES
-
Read about team and training info
-
Connect with coaches and peers
-
Help build the GOTR community and support for a healthy lifestyle through photo and experience sharing.
-
Connect with team members
-
Manage teams and organize activities
-
Facilitate the building of the GOTR community and provide positive support
-
Supervise on the platform operation
Screen Map
Final Design
Before Final
After focusing on the layout, the mid-fi prototype stage helped us explore more specific elements such as color, typography, and adjustment of size, according to the mobile or desktop view.
In our Mid-Fi Interactive Prototype, we wanted to make sure that the information presented matched with the specific interaction intended. The specific flow of screens had been planned accordingly already with our wireframes. The design decisions for our mid-fi interactive prototype included adding color, typography, and content details in our screens.
The reason why we chose this specific shade of “millennial pink” is that it is accessible and approachable to the middle school girls. There is also a recent push in media to make millennial pink a gender-neutral tone and not just a stereotypical girly exclusive.
We want to offer the girls a better way to manage their participation in the GOTR events and activities. The girls can easily learn about each event, sign up for it and receive announcements for updates. It provides an opportunity for the girls to practice managing their exercise and life at a young age.
During the speed dating sessions, many people mentioned the importance of friends in persisting in something. Based on that feedback, we included the participants of each activity and an invite link to motivate girls to exercise more with their friends.
Signing Up for Events
A social media for sports is included, where girls can share the snapshots of their exercising moments.
Different from the other social media, the platform is exclusive and contents are verified. It provides our young users with a safer environment to talk about sports and interact with their peers.
Service Provider View
The app allows the coaches to manage the teams and events easily. They can publish new events, send announcements and check team information. The coaches have access to all team schedules, which also gives them an overview of their weekly training plan.
The coaches facilitate in building a healthy and supportive GOTR community. In addition to common interaction such as posting and commenting, coaches also have the authority to review the contents and take back anything that is not appropriate. Since we are designing for minors, we want to be careful with everything that they see.
Our Responsive Web Design
We took the charge of the differences in real estate between the desktop and the mobile view. Although the content featured was the same between the two views, the more vertical structure of the mobile view let us take advantage of a more “top to bottom” structure in design layout. On the other hand, the desktop view helped us to take charge of the area from “left to right.”
Our Takeaways
Throughout the project, we were given opportunities to really get our hands deep in the research part of this particular design project. Because of the design aspect, we were able to really carry through our research hypothesis and findings throughout the entire process from the very beginning to the very end. This also helped us really get in the mindset of understanding our users’ needs first, as we were able to directly get feedback from so many individuals for our guerilla research, speed-dating feedback, and various user-testing feedback for our final design. Because of this, the nature of our project is truly based on not just our thoughts as designers, but also on a more human-centered design.
