Problem
Problem
For designers, self-learning is often necessary, but reliable resources for mastering design software are limited.
For designers, self-learning is often necessary, but reliable resources for mastering design software are limited.
For designers, self-learning is often necessary, but reliable resources for mastering design software are limited.
Mission
Mission
DigiHub is on a mission to democratize design education by providing accessible, engaging, and practical online courses for designers or Individuals interested in learning how to use design tools.
DigiHub is on a mission to democratize design education by providing accessible, engaging, and practical online courses for designers or Individuals interested in learning how to use design tools.
Role & Process
Role & Process
I started with user research to understand needs and pain points, creating personas and journey maps to guide solution design. I iterated wireframes and prototypes based on feedback to ensure clarity and usability.
I started with user research to understand needs and pain points, creating personas and journey maps to guide solution design. I iterated wireframes and prototypes based on feedback to ensure clarity and usability.
Based on my research, I've found that the biggest challenge learners face with online learning is inconsistent course quality.
Based on my research, I've found that the biggest challenge learners face with online learning is inconsistent course quality.
Positioning Statement
Positioning Statement
Competitor Analysis
Competitor Analysis
Target Audience
Target Audience
How might we build an app that combines easy-to-follow design tool tutorials with an active community and makes learning simple and fun?
How might we build an app that combines easy-to-follow design tool tutorials with an active community and makes learning simple and fun?
How might we build an app that combines easy-to-follow design tool tutorials with an active community and makes learning simple and fun?
User Story
User Story
Storyboard
Storyboard
01
Nanxi wants to build her portfolio before graduating to aid in her job search.
Nanxi wants to build her portfolio before graduating to aid in her job search.
02
She opens Dighub and logs into her account.
She opens Dighub and logs into her account.
03
She clicks “Portfolio”.
She clicks “Portfolio”.
04
She type keywords “Webflow” and selects “Beginner”.
She type keywords “Webflow” and selects “Beginner”.
05
Nanxi enrolls in the course: "Webflow Portfolio Creation”
Nanxi enrolls in the course: "Webflow Portfolio Creation”
06
Nanxi starts to build portfolio with Dighub tutorial.
Nanxi starts to build portfolio with Dighub tutorial.
07
After the portfolio was completed, Nanxi shared the portfolio with the course community.
After the portfolio was completed, Nanxi shared the portfolio with the course community.
08
Nanxi received feedback from Dighub community.
Nanxi received feedback from Dighub community.
Layout Exploration
Layout Exploration
Exploring the dashboard layout based on information structure.
Exploring the dashboard layout based on information structure.
The Winner!
The Winner!
Keep the navigation bar clean and straightforward by grouping less important functions under a collapsible menu.
Position the core course details and study plan management at the center of the dashboard for optimal usability.
Place "Messages" and "Notifications" on the right side of the dashboard for easy access.
Keep the navigation bar clean and straightforward by grouping less important functions under a collapsible menu.
Position the core course details and study plan management at the center of the dashboard for optimal usability.
Place "Messages" and "Notifications" on the right side of the dashboard for easy access.
Keep the navigation bar clean and straightforward by grouping less important functions under a collapsible menu.
Position the core course details and study plan management at the center of the dashboard for optimal usability.
Place "Messages" and "Notifications" on the right side of the dashboard for easy access.
Keep the navigation bar clean and straightforward by grouping less important functions under a collapsible menu.
Position the core course details and study plan management at the center of the dashboard for optimal usability.
Place "Messages" and "Notifications" on the right side of the dashboard for easy access.
Keep the navigation bar clean and straightforward by grouping less important functions under a collapsible menu.
Position the core course details and study plan management at the center of the dashboard for optimal usability.
Place "Messages" and "Notifications" on the right side of the dashboard for easy access.
Usability Testing
Usability Testing
Feedback based on user test of 4 people, focus on the points that user felt important or lack of service. Below designs are 2 major improvements from the UT feedback.
Feedback based on user test of 4 people, focus on the points that user felt important or lack of service. Below designs are 2 major improvements from the UT feedback.
Final Design
Final Design
Dashboard
Dashboard
The Dashboard serves as the central hub, offering users a personalized overview of their learning journey.
The Dashboard serves as the central hub, offering users a personalized overview of their learning journey.
Overview and Quick Navigation:
The dashboard displays the user’s progress and pending tasks. With a card-based layout, users can easily access their ongoing courses or dive into specific tasks.
Learning Metrics Visualization:
Progress charts and performance indicators such as course completion rates and daily study hours help users track their achievements and set clear goals.
Overview and Quick Navigation:
The dashboard displays the user’s progress and pending tasks. With a card-based layout, users can easily access their ongoing courses or dive into specific tasks.
Learning Metrics Visualization:
Progress charts and performance indicators such as course completion rates and daily study hours help users track their achievements and set clear goals.
Course Overview Page
Course Overview Page
This page is designed to provide users with all the essential details they need to evaluate a course before enrolling, fostering confidence in their decisions.
This page is designed to provide users with all the essential details they need to evaluate a course before enrolling, fostering confidence in their decisions.
Course Highlights:
Clear objectives, syllabus overview, and visual previews.
Reviews:
Reviews from past learners, enhances the credibility of the course.
Duration and Pricing Information:
“Enroll Now” button with course level, clear pricing and duration details. The design is engaging and intuitive, guiding users toward action.
Course Highlights:
Clear objectives, syllabus overview, and visual previews.
Reviews:
Reviews from past learners, enhances the credibility of the course.
Duration and Pricing Information:
“Enroll Now” button with course level, clear pricing and duration details. The design is engaging and intuitive, guiding users toward action.
Video Learning Page
Video Learning Page
This page focuses on delivering a seamless and engaging learning experience, prioritizing functionality and user interaction.
This page focuses on delivering a seamless and engaging learning experience, prioritizing functionality and user interaction.
Video Playback Area:
The video player offers full-screen mode, adjustable playback speed, and quality settings features.
Community Interaction:
A discussion section allows users to engage with peers and instructors in real time, fostering community and collaborative learning.
Seamless Navigation:
A course chapter menu and progress tracker.
The layout ensures focus, usability, and a distraction-free learning environment.
Video Playback Area:
The video player offers full-screen mode, adjustable playback speed, and quality settings features.
Community Interaction:
A discussion section allows users to engage with peers and instructors in real time, fostering community and collaborative learning.
Seamless Navigation:
A course chapter menu and progress tracker.
The layout ensures focus, usability, and a distraction-free learning environment.
Highlights & Next Steps
Highlights & Next Steps
Highlights
Highlights
DigiHub stands out by offering a structured curriculum that addresses inconsistent course quality and unengaging content, fostering a thriving design community through collaboration and peer-to-peer learning. Its focus on hands-on projects and real-world applications ensures users can immediately apply their skills, bridging the gap between learning and professional growth.
DigiHub stands out by offering a structured curriculum that addresses inconsistent course quality and unengaging content, fostering a thriving design community through collaboration and peer-to-peer learning. Its focus on hands-on projects and real-world applications ensures users can immediately apply their skills, bridging the gap between learning and professional growth.
Next Steps
Next Steps
Moving forward, I plan to integrate data analytics and AI to develop personalized learning paths. By tailoring course recommendations to users' progress, interests, and career goals, I aim to create a more impactful and relevant learning journey for every user.
Moving forward, I plan to integrate data analytics and AI to develop personalized learning paths. By tailoring course recommendations to users' progress, interests, and career goals, I aim to create a more impactful and relevant learning journey for every user.
Let's create together!
Cindy57.wu@gmail.com
Copyright© 2024 Cindy Wu. All rights reserved 💜
Let's create together!
Cindy57.wu@gmail.com
Copyright© 2024 Cindy Wu. All rights reserved 💜
Let's create together!
Cindy57.wu@gmail.com
Copyright© 2024 Cindy Wu. All rights reserved 💜
Let's create together!
Cindy57.wu@gmail.com
Copyright© 2024 Cindy Wu. All rights reserved 💜
Let's create together!
Cindy57.wu@gmail.com
Copyright© 2024 Cindy Wu. All rights reserved 💜