Goal go
UI/UX Design, Research
Client:
City of Bridges High School
An interactive web based goal-setting and management tool for mastery based education
GoalGo helps new students at City of Bridges High School direct and track learning goals based on their underlying interests, curiosities, and values.
It is designed to address one of the most challenging difficulties, goal-setting, which students face in adjusting to the new school life by connecting students' past to their future and helping them discover what kind of personal background leads to their future.
GoalGo helps new students at City of Bridges High School direct and track learning goals based on their underlying interests, curiosities, and values.
It is designed to address one of the most challenging difficulties, goal-setting, which students face in adjusting to the new school life by connecting students' past to their future and helping them discover what kind of personal background leads to their future.
Collaborators
Shang-Yuan Wang,
Yinru Sun,
Zijing Lu
Shang-Yuan Wang,
Yinru Sun,
Zijing Lu
Duration
10 weeks
10 weeks
Tools
Figma
Miro
Figma
Miro
Problem space
Our design challenge is to focus on the learners' "onboarding process" in a competency-based education environment.
"Onboarding" in our design refers to the mechanism through which new students adapt to the new educational system. We try to dig into it and find the potential opportunities to form a better future version of the onboarding experience to the competency-based education.
This time, we collaborate with City of Bridges High School(CoBHS), a young and vigorous competency-based high school in Pittsburgh, to discover the challenges for students from diverse backgrounds to get into this community, and envision a more smooth and enjoyable onboarding experience for students and teachers in CoBHS.
"Onboarding" in our design refers to the mechanism through which new students adapt to the new educational system. We try to dig into it and find the potential opportunities to form a better future version of the onboarding experience to the competency-based education.
This time, we collaborate with City of Bridges High School(CoBHS), a young and vigorous competency-based high school in Pittsburgh, to discover the challenges for students from diverse backgrounds to get into this community, and envision a more smooth and enjoyable onboarding experience for students and teachers in CoBHS.
Design Concept
The platform guides students to discover their own interests, skills, and values, prioritize goals by
evaluation methodologies, and define practical milestones. The platform aims to equip students with self directed goal-setting skills that enact long-term benefits.
Feature 01
Navigate your direction from confusion
GoalGo helps you to discover, prioritize, and define learning goals step by step, which helps you to navigate your pathway based on your interests, skills, and values.
Feature 02
Track your progress towards goals
The goal management dashboard helps you to check your schedules and track the progress of milestones
Feature 03
Build your goal library
Your goal list and version history archive all your goal-setting inspiration, and provide the best support for every time you need to re-direct your future. You can also visit each goalsetting stage and update your ideas anytime.
Design System
The core value for our UI design is to make our product become a friendly and supportive sidekick that accompanies the learners during their learning journey. Therefore, we used some illustration and game-like design elements to deliver our visual design in a delightful design language that expresses the joy of learning.
Here are our 4 core design principles:
Inviting but not overwhelming
Casual but not rash
Joyful but not entertaining
Supportive but not icy
Here are our 4 core design principles:
Inviting but not overwhelming
Casual but not rash
Joyful but not entertaining
Supportive but not icy
Research
For a more indepth process documentation
Click to view our notion
Click to view our notion
Concept Generation
Our map is a triple-layer diagram. The first layer is a journey map that maps out the experience and mood for the current situation. Then, moving to the second layer, we started to brainstorm our vision state: what is the overall service pattern? How would our design idea fit the overall system? And then, in the third layer, we tried to narrow down our design scope, and zoom into the part that students struggle the most to start our design concept.
Wireframing
We decomposed the whole process into specific user flows and mapped the flows into the interface pages, which leads to our product structure and page-level interaction design.
Reflection
For this project, I have walked through a solid research process including contextual inquiry, user profile analysis, portfolio synthesis models, service blueprinting, and so on to understand the users, stakeholders, and their interrelationship within the system.
I think this is definitely a valuable process before our design since we are not designing for a single problem in this project. Instead, we are trying to deal with a complex systemic experience that involves multiple users, stakeholders, contexts, and limitations. Without solid and comprehensive research and understanding of the topic, the ideas could always be single-faceted or biased that does not fit the overall system.
I think this is definitely a valuable process before our design since we are not designing for a single problem in this project. Instead, we are trying to deal with a complex systemic experience that involves multiple users, stakeholders, contexts, and limitations. Without solid and comprehensive research and understanding of the topic, the ideas could always be single-faceted or biased that does not fit the overall system.