Guys/Girls Activity for Life
An evolving program for schools to help foster healthy activity with elementary and middle school aged girls (and later boys) through in person intervention, online education, and social media interaction.
- UX Design
- Character Design
- Front end Vue.js development
The GOAL project has been through three iterations in almost 10 years. The first iteration was Girls on the Move (2006) I wasn’t involved with this iteration.
The second iteration (2013) I redesigned the character avatars guiding the students through a physical activity surveys.
In the third iteration (2020) the project turned to creating a social media experience for parents and children to help foster healthier eating and physical activity habits.
UX Design (2020 Iteration)
The team only had 6 months to turn around this project, so we began by discussing core features of the mobile web app with the client. We laid those out in wireframes in sketch and quickly began moving to layouts to begin testing how it would behave.
- Provide reading resources (“flyers”) about healthy eating and physical activity
- Create a online social environment for parents to interact and share
- Have recipes for parents to try
- Track progress on all these things and incentivize involvement
Throughout the process, used a vibrant color palette and color coding throughout: green for healthy eating and orange for physical activity.
We created badge incentives for completing a week’s tasks, used animation to create joy and delight throughout the process.
Character Design (2015)
For the second iteration of the project, targeted at elementary aged girls, the client wanted a logo that included a range of sports and activity to be inclusive, and create a revised set of characters to be more appealing. Through some rounds of feedback with students, we arrived at these four characters: Bridgette, Celeste, Kim, and Monique.
The whole site uses an active bright color palette full of energy.
Front end development
For this project, I worked with a developer to create Vue.js components. working together, I was able to create components like this “take-quiz.vue” which accepted a user’s answer and provided visual feedback through animation.
