Practice & Potential
Practice & Potential
Built a design system and lead the product development process for an end to end experience.
Built a design system and lead the product development process for an end to end experience.
Overview
Overview
Overview
Practice & Potential is an online educational platform that aims to empower students with computational thinking and metacognition skills in a highly rigorous yet deeply compassionate environment.
Practice & Potential is an online educational platform that aims to empower students with computational thinking and metacognition skills in a highly rigorous yet deeply compassionate environment.
Practice & Potential is an online educational platform that aims to empower students with computational thinking and metacognition skills in a highly rigorous yet deeply compassionate environment.
Timeline
Timeline
Timeline
Dec 2023 — Mar 2024
Dec 2023 — Mar 2024
Dec 2023 — Mar 2024
Context
Context
Context
Freelance Product Design Role
Freelance Product Design Role
Freelance Product Design Role
My Role
My Role
My Role
Product Management
User Research
UX Design
Visual Design
Engineering Handoff
Product Management
User Research
UX Design
Visual Design
Engineering Handoff
Product Management
User Research
UX Design
Visual Design
Engineering Handoff
Team
Team
Team
1 Lead Designer (me)
1 CEO
4 Engineers
1 Lead Designer (me)
1 CEO
4 Engineers
1 Lead Designer (me)
1 CEO
4 Engineers
Specific Contributions
Specific Contributions
Specific Contributions
I led the UX/UI design and product development of a client’s MVP web application. I collaborated with the client to develop the product’s long term vision and strategy, conducted market research, created the product roadmap, developed interactive prototypes, and facilitated seamless engineering handoff.
I led the UX/UI design and product development of a client’s MVP web application. I collaborated with the client to develop the product’s long term vision and strategy, conducted market research, created the product roadmap, developed interactive prototypes, and facilitated seamless engineering handoff.
I led the UX/UI design and product development of a client’s MVP web application. I collaborated with the client to develop the product’s long term vision and strategy, conducted market research, created the product roadmap, developed interactive prototypes, and facilitated seamless engineering handoff.
The Problem
The Problem
The Problem
Existing ed-tech platforms tend to capitalize on student’s academic struggles rather than ensuring their success, leading to increased student turnover rates, as well as a decrease in course material understanding.
Existing ed-tech platforms tend to capitalize on student’s academic struggles rather than ensuring their success, leading to increased student turnover rates, as well as a decrease in course material understanding.
Existing ed-tech platforms tend to capitalize on student’s academic struggles rather than ensuring their success, leading to increased student turnover rates, as well as a decrease in course material understanding.
Practice & Potential wanted to create a platform that cultivated both the internal and customer facing human experiences of an educational program so that students, parents/guardians, and instructors feel supported. The platform needed to:
Practice & Potential wanted to create a platform that cultivated both the internal and customer facing human experiences of an educational program so that students, parents/guardians, and instructors feel supported. The platform needed to:
Practice & Potential wanted to create a platform that cultivated both the internal and customer facing human experiences of an educational program so that students, parents/guardians, and instructors feel supported. The platform needed to:
1
1
1
Encouraging course completion AND understanding
Encouraging course completion AND understanding
Encouraging course completion AND understanding
2
2
2
Support individual learning needs
Support individual learning needs
Support individual learning needs
3
3
3
Promote Engagement
Promote Engagement
Promote Engagement
4
4
4
Allow for flexibility
Allow for flexibility
Allow for flexibility
Solution Highlights
Solution Highlights
Solution Highlights
Research
Research
Research
Understanding the current ed-tech market.
Understanding the current ed-tech market.
Understanding the current ed-tech market.
I started with competitor analysis to compare existing platforms with what my client wanted to offer. I was able to note down the type of features and designs they were inspired by, where the client's product would fit into the existing market, and overall get a better idea of what the ed-tech industry was like. My findings gave me a good starting point for ideating potential features to include to make the product stand out from existing platforms.
I started with competitor analysis to compare existing platforms with what my client wanted to offer. I was able to note down the type of features and designs they were inspired by, where the client's product would fit into the existing market, and overall get a better idea of what the ed-tech industry was like. My findings gave me a good starting point for ideating potential features to include to make the product stand out from existing platforms.
I started with competitor analysis to compare existing platforms with what my client wanted to offer. I was able to note down the type of features and designs they were inspired by, where the client's product would fit into the existing market, and overall get a better idea of what the ed-tech industry was like. My findings gave me a good starting point for ideating potential features to include to make the product stand out from existing platforms.
My client had an existing user base from offering tutoring services, so I was able to conduct some user research to better understand the needs and pain points of students and parent's/guardians. I was also able to talk to instructors from other ed-tech platforms about their experiences.
My client had an existing user base from offering tutoring services, so I was able to conduct some user research to better understand the needs and pain points of students and parent's/guardians. I was also able to talk to instructors from other ed-tech platforms about their experiences.
My client had an existing user base from offering tutoring services, so I was able to conduct some user research to better understand the needs and pain points of students and parent's/guardians. I was also able to talk to instructors from other ed-tech platforms about their experiences.
Understanding the common user experience on existing ed-tech platforms.
Understanding the common user experience on existing ed-tech platforms.
Understanding the common user experience on existing ed-tech platforms.
For interviews, some of my questions were:
For interviews, some of my questions were:
For interviews, some of my questions were:
What are specific challenges or frustrations you faced when learning on an online platform?
What types of feedback or support do you find most helpful when learning complex concepts?
What are your preferences for pacing and structure in your learning journey?
What are your preferences for pacing and structure in your learning journey?
What are your preferences for pacing and structure in your learning journey?
How do you like to set and adjust your learning goals within a self-paced course?
How do you like to set and adjust your learning goals within a self-paced course?
How do you like to set and adjust your learning goals within a self-paced course?
What are your expectations for interaction with an instructor in a one-on-one setting?
What are your expectations for interaction with an instructor in a one-on-one setting?
What are your expectations for interaction with an instructor in a one-on-one setting?
I wrote out a few user personas to separate user pain points based on use case.
I wrote out a few user personas to separate user pain points based on use case.
I wrote out a few user personas to separate user pain points based on use case.
With user research done, I compared business and user wants to plan how I can balance both pain points.
With user research done, I compared business and user wants to plan how I can balance both pain points.
With user research done, I compared business and user wants to plan how I can balance both pain points.
💼 Business
💼 Business
💼 Business
1
1
1
Encourage students to prioritize learning key concepts over course completion.
Encourage students to prioritize learning key concepts over course completion.
Encourage students to prioritize learning key concepts over course completion.
2
2
2
Design an intuitive and accessible user interface for students, parents/guardians, and instructors.
Design an intuitive and accessible user interface for students, parents/guardians, and instructors.
Design an intuitive and accessible user interface for students, parents/guardians, and instructors.
3
3
3
Create a safe educational experience for students of all ages.
Create a safe educational experience for students of all ages.
Create a safe educational experience for students of all ages.
👤 Users
👤 Users
👤 Users
1
1
1
Have a support structure during their educational journey.
Have a support structure during their educational journey.
Have a support structure during their educational journey.
2
2
2
A more personalized, engaging, and flexible curriculum.
A more personalized, engaging, and flexible curriculum.
A more personalized, engaging, and flexible curriculum.
3
3
3
Feel confident in their subject mastery by the end of the course.
Feel confident in their subject mastery by the end of the course.
Feel confident in their subject mastery by the end of the course.
I summarized my research in 3 key findings.
I summarized my research in 3 key findings.
I summarized my research in 3 key findings.
Key Findings:
Key Findings:
Key Findings:
1
1
1
A lack of flexibility in curriculum design led students to feel less engaged.
A lack of flexibility in curriculum design led students to feel less engaged.
A lot of platforms have students watch modules and complete quizzes in a generic curriculum. Students who struggle with certain concepts or who wish to dive deeper into a particular concept are unable to get the support they need.
A lot of platforms have students watch modules and complete quizzes in a generic curriculum. Students who struggle with certain concepts or who wish to dive deeper into a particular concept are unable to get the support they need.
2
2
2
Encouraging accountability helps users stay on track.
Encouraging accountability helps users stay on track.
Learning to one's own schedule can quickly spiral into a situation where self-discipline wanes, making it harder to stay on track and achieve goals. This applies to instructors as well, who need consistent structure and student feedback to maintain momentum and effectiveness.
Learning to one's own schedule can quickly spiral into a situation where self-discipline wanes, making it harder to stay on track and achieve goals. This applies to instructors as well, who need consistent structure and student feedback to maintain momentum and effectiveness.
3
3
3
Student data privacy is important
Student data privacy is important
Effectively balancing parental involvement in student learning with student privacy is crucial for fostering a supportive and secure educational environment. This approach helps maintain user trust and promotes successful educational outcomes.
Effectively balancing parental involvement in student learning with student privacy is crucial for fostering a supportive and secure educational environment. This approach helps maintain user trust and promotes successful educational outcomes.
With my research findings, I rewrote the problem statement into a "how might we" statement as well as listed out the overall design focuses for these projects. These serve as a high level guide that I can come back to and reference during the design process to check whether or not my solution is answering the problem at hand.
With my research findings, I rewrote the problem statement into a "how might we" statement as well as listed out the overall design focuses for these projects. These serve as a high level guide that I can come back to and reference during the design process to check whether or not my solution is answering the problem at hand.
With my research findings, I rewrote the problem statement into a "how might we" statement as well as listed out the overall design focuses for these projects. These serve as a high level guide that I can come back to and reference during the design process to check whether or not my solution is answering the problem at hand.
💭 How Might We
💭 How Might We
💭 How Might We
Design an online educational experience that aims to fully support a student’s success by not only encouraging course completion but ensures their subject mastery?
Design an online educational experience that aims to fully support a student’s success by not only encouraging course completion but ensures their subject mastery?
Design an online educational experience that aims to fully support a student’s success by not only encouraging course completion but ensures their subject mastery?
🔍 Design Focuses:
🔍 Design Focuses:
🔍 Design Focuses:
1
1
1
Course Structure Flexibility
Course Structure Flexibility
Course Structure Flexibility
2
2
2
Course Content Pacing Management
Course Content Pacing Management
Course Content Pacing Management
3
3
3
Record Course Progress
Record Course Progress
Record Course Progress
4
4
4
Setting Protections
Setting Protections
Setting Protections
5
5
5
Content Organization System
Content Organization System
Content Organization System
Design
Design
Design
Iterating based on client and dev team feedback
Iterating based on client and dev team feedback
Iterating based on client and dev team feedback
This client wanted me to help build a solution from the ideation stage, so I listed out some core feature options that could be solutions to the overarching problem. I down selected those options based on effort and value, then mapped out end to end user flows. I then worked on low fidelity wireframes before moving to high fidelity prototypes. I would iterate on my designs based on feedback from my client and the rest of the developers to ensure my solution was meeting both business and user requirements as well as within scope.
This client wanted me to help build a solution from the ideation stage, so I listed out some core feature options that could be solutions to the overarching problem. I down selected those options based on effort and value, then mapped out end to end user flows. I then worked on low fidelity wireframes before moving to high fidelity prototypes. I would iterate on my designs based on feedback from my client and the rest of the developers to ensure my solution was meeting both business and user requirements as well as within scope.
This client wanted me to help build a solution from the ideation stage, so I listed out some core feature options that could be solutions to the overarching problem. I down selected those options based on effort and value, then mapped out end to end user flows. I then worked on low fidelity wireframes before moving to high fidelity prototypes. I would iterate on my designs based on feedback from my client and the rest of the developers to ensure my solution was meeting both business and user requirements as well as within scope.
With research findings analyzed, I created a feature map to list out possible solutions.
With research findings analyzed, I created a feature map to list out possible solutions.
With research findings analyzed, I created a feature map to list out possible solutions.
To prioritize features, I mapped my ideas out on an effort vs. value graph.
To prioritize features, I mapped my ideas out on an effort vs. value graph.
To prioritize features, I mapped my ideas out on an effort vs. value graph.
This action not only helped me down select features, but also helped me plan out which features to work on first. The graph below shows a selection of features the MVP would incorporate after mapping out ideas on a full graph, with our ideal solutions being the most prioritized in the product development process.
This action not only helped me down select features, but also helped me plan out which features to work on first. The graph below shows a selection of features the MVP would incorporate after mapping out ideas on a full graph, with our ideal solutions being the most prioritized in the product development process.
This action not only helped me down select features, but also helped me plan out which features to work on first. The graph below shows a selection of features the MVP would incorporate after mapping out ideas on a full graph, with our ideal solutions being the most prioritized in the product development process.
I quickly realized that my client already had a solid idea of what they wanted each feature to look like, so I actually let them take the lead in drawing the first iterations of low fidelity wireframes rather than presenting a few options and guessing at their specific vision. I offered my input and opinions and together, we worked on finalizing the design before prototyping. There were layout adjustments throughout the process and I often would explain my design decisions to the client so they understood where each feature fell within the product roadmap. An overall key focus was to design for the MVP version and keep the platform's UX/UI simple.
I quickly realized that my client already had a solid idea of what they wanted each feature to look like, so I actually let them take the lead in drawing the first iterations of low fidelity wireframes rather than presenting a few options and guessing at their specific vision. I offered my input and opinions and together, we worked on finalizing the design before prototyping. There were layout adjustments throughout the process and I often would explain my design decisions to the client so they understood where each feature fell within the product roadmap. An overall key focus was to design for the MVP version and keep the platform's UX/UI simple.
I quickly realized that my client already had a solid idea of what they wanted each feature to look like, so I actually let them take the lead in drawing the first iterations of low fidelity wireframes rather than presenting a few options and guessing at their specific vision. I offered my input and opinions and together, we worked on finalizing the design before prototyping. There were layout adjustments throughout the process and I often would explain my design decisions to the client so they understood where each feature fell within the product roadmap. An overall key focus was to design for the MVP version and keep the platform's UX/UI simple.
I prioritized designing the platform's core features for the MVP and worked quickly for the engineering team to start getting involved in developing the product. Some of the chosen solutions included:
I prioritized designing the platform's core features for the MVP and worked quickly for the engineering team to start getting involved in developing the product. Some of the chosen solutions included:
I prioritized designing the platform's core features for the MVP and worked quickly for the engineering team to start getting involved in developing the product. Some of the chosen solutions included:
1
1
1
Integrating a check and balance system for course progression
Integrating a check and balance system for course progression
Integrating a check and balance system for course progression
I designed this feature to be more like a college course where the instructor looks over the completed assignments and decides whether or not the student can continue or not. In order to progress through the course, students must demonstrate a good understanding of the concept being taught. To get instructors more involved in the students’ learning, there is an option to add a note detailing feedback so the student knows their work has been carefully checked and what they need to work on.
I designed this feature to be more like a college course where the instructor looks over the completed assignments and decides whether or not the student can continue or not. In order to progress through the course, students must demonstrate a good understanding of the concept being taught. To get instructors more involved in the students’ learning, there is an option to add a note detailing feedback so the student knows their work has been carefully checked and what they need to work on.
I designed this feature to be more like a college course where the instructor looks over the completed assignments and decides whether or not the student can continue or not. In order to progress through the course, students must demonstrate a good understanding of the concept being taught. To get instructors more involved in the students’ learning, there is an option to add a note detailing feedback so the student knows their work has been carefully checked and what they need to work on.
2
2
2
Making class notes multi-functional
Making class notes multi-functional
Making class notes multi-functional
This feature allows students to reflect on what they've accomplished before a class, review course materials, and plan what they want to finish or work on before the next class. Class notes are also a space for instructors to provide feedback on assignments and assessments, additional resources, and work with students to stay on track.
This feature allows students to reflect on what they've accomplished before a class, review course materials, and plan what they want to finish or work on before the next class. Class notes are also a space for instructors to provide feedback on assignments and assessments, additional resources, and work with students to stay on track.
This feature allows students to reflect on what they've accomplished before a class, review course materials, and plan what they want to finish or work on before the next class. Class notes are also a space for instructors to provide feedback on assignments and assessments, additional resources, and work with students to stay on track.
3
3
3
Scheduling/rescheduling and sending quick messages
Scheduling/rescheduling and sending quick messages
Scheduling/rescheduling and sending quick messages
Both students and instructors can schedule and reschedule classes as well as additional tutoring sessions. For quick questions and comments, students can send a message to their instructor rather than scheduling a formal class session.
Both students and instructors can schedule and reschedule classes as well as additional tutoring sessions. For quick questions and comments, students can send a message to their instructor rather than scheduling a formal class session.
Both students and instructors can schedule and reschedule classes as well as additional tutoring sessions. For quick questions and comments, students can send a message to their instructor rather than scheduling a formal class session.
4
4
4
Group chats and direct messages
Group chats and direct messages
Group chats and direct messages
Depending on a student's age, parents/guardians can be included in a group chat with their student and instructor to get updates on their student's educational journey. If students are older, they have the option to message their instructor privately.
Depending on a student's age, parents/guardians can be included in a group chat with their student and instructor to get updates on their student's educational journey. If students are older, they have the option to message their instructor privately.
Depending on a student's age, parents/guardians can be included in a group chat with their student and instructor to get updates on their student's educational journey. If students are older, they have the option to message their instructor privately.
Once the designs were finalized, I met with the development team to walk through the MVP design end to end, breaking down the solution and explaining features along the way.
Once the designs were finalized, I met with the development team to walk through the MVP design end to end, breaking down the solution and explaining features along the way.
Once the designs were finalized, I met with the development team to walk through the MVP design end to end, breaking down the solution and explaining features along the way.
Conclusion
Conclusion
Conclusion
Impact
Impact
Impact
Improving student learning retention by 35%
Improving student learning retention by 35%
With a more personalized learning model that balanced flexibility and accountability, my client's student user base was able to better pick up course concepts compared to their previous off platform tutoring sessions.
With a more personalized learning model that balanced flexibility and accountability, my client's student user base was able to better pick up course concepts compared to their previous off platform tutoring sessions.
User engagement increased by 60%
User engagement increased by 60%
Students and instructors were being a lot more active and collaborative due to having a centralized platform with all the functionalities they needed.
Students and instructors were being a lot more active and collaborative due to having a centralized platform with all the functionalities they needed.
User satisfaction on the platform's overall experience rose 25%
User satisfaction on the platform's overall experience rose 25%
Compared to previous off platform tutoring sessions, all user groups felt much more satisfied with what the MVP platform had to offer. Although there was much room for improvement, the Practice & Potential was an improvement to what users previously experienced during tutoring or on other platforms.
Compared to previous off platform tutoring sessions, all user groups felt much more satisfied with what the MVP platform had to offer. Although there was much room for improvement, the Practice & Potential was an improvement to what users previously experienced during tutoring or on other platforms.
Next Steps
Next Steps
Next Steps
Fine tuning various features
Fine tuning various features
There were a lot of features that were designed in a bare bones kind of manner to keep up with the MVP's development timeline. I would want to clean up a few flows here and there as well as fully develop some features for future growth and scalability.
There were a lot of features that were designed in a bare bones kind of manner to keep up with the MVP's development timeline. I would want to clean up a few flows here and there as well as fully develop some features for future growth and scalability.
Keeping an eye on legal and ethical developments
Keeping an eye on legal and ethical developments
For privacy and compliance matters, my client had yet to formally discuss things with a lawyer, so when I was designing the product, I was unsure of some of the technicalities that could affect the overall user flow. I would want to prioritize this if I was still working with the team so that I could prepare for any adjustments that needed to be made product-wise.
For privacy and compliance matters, my client had yet to formally discuss things with a lawyer, so when I was designing the product, I was unsure of some of the technicalities that could affect the overall user flow. I would want to prioritize this if I was still working with the team so that I could prepare for any adjustments that needed to be made product-wise.
Micro-interactions and animations
Micro-interactions and animations
Fun and creative interactions and animations could help support the effort to keep student's engaged in their learning efforts. Not only should course curriculum be interesting, but the platform's experience in future iterations should be as well rather than just a means to manage assignments and classes.
Fun and creative interactions and animations could help support the effort to keep student's engaged in their learning efforts. Not only should course curriculum be interesting, but the platform's experience in future iterations should be as well rather than just a means to manage assignments and classes.
Connect with me!
I love making new friends and getting to know people. Feel free to reach out to me if you have any questions or just want to chat!
Made with love and care by Crystal Huynh © 2024
Connect with me!
I love making new friends and getting to know people. Feel free to reach out to me if you have any questions or just want to chat!
Made with love and care by Crystal Huynh © 2024
Connect with me!
I love making new friends and getting to know people. Feel free to reach out to me if you have any questions or just want to chat!
Made with love and care by Crystal Huynh © 2024