Redesign
E-Learning
UIUX Improvement
Design Stratigies
User Research
Prototyping
Collaborated with DDOT Studio on a major rebranding and product redesign for YOTTA, an online course platform — aiming to create a more cohesive brand identity and a smoother, more engaging user experience across web and mobile.
My Role
UIUX Designer
Members
DDOT Studio
1 Product Manger
2 Developers
Timeline
8 Month
2024.05 - 2025.03
Freelancing
Tools
Figma
Figjam
GA4
Overview
This was a bold, brand-led redesign project in collaboration with DDOT Design Studio, where we reimagined the entire YOTTA experience. We gave its brand identity a modern and approachable facelift, redesigned the entire web interface, and helped roll out new product features.
About YOTTA
YOTTA is a online learning platform from Taiwan, designed to make education more accessible and dynamic.
Unlike typical platforms, YOTTA blends digital convenience by offering both online and in-person classes — giving learners the flexibility to choose how they grow.
Project Goal
01
Strengthened Brand Identity
Refined the brand direction to better align with an immersive "Netflix" viewing experience, turning an unclear positioning into a more emotionally engaging identity.
02
Redesigned Architecture & Interface
We mapped out all user flows and restructured key features, conducted usability testing to identify pain points and improve the overall user experience.
03
Ideated New Feature Proposals
Conducted user interviews to better understand the target audience, then proposed unique, YOTTA-specific features that aligned with both user needs and business goals.
Research
We began the project by conducting user interviews and surveys to understand how general users currently experience online learning platforms. These insights helped us uncover pain points, usage patterns, and unmet needs, which later shaped our design decisions throughout the project.
User Survey and Interviews
01
Understanding Preferences and Pain Points
We surveyed users who actively take online courses to learn more about their learning behaviors — including:
1. Course types
2. Learning frequency
3. Purchase motivations
4. Common pain points they’ve encountered
02
Finding Potential Opportunities
In addition, we asked users what kinds of features they would “wish for” in an ideal platform. These wish-list responses revealed potential areas for improvement and inspired several new feature ideas.
03
Usability Testing
We asked users to perform tasks on the YOTTA platform in person, including registration/login, purchasing a course, and navigating the learning area.
Using the think-aloud method, we observed where users encountered interruptions or difficulties during the process.
Analyzing Problems
01
Brand Awareness Problems
The visual style may give user the impression that YOTTA is less professional. For example, due to the use of overly feminine illustrations — which can also affect their perception of the instructors' credibility.
Feedback: 4
02
Overemphasis on Discounts
Compared to other platforms, YOTTA distributes coupons more frequently, and these often appear abruptly on screen, disrupting the browsing experience. Many users expressed that course content — not discounts — remains the key factor in their purchase decisions.
Feedback: 3
03
Usability issues
The registration and login flows were confusing, email verification often failed to redirect properly, and features like note-taking and progress tracking were not intuitive. On top of that, the overall site performance was slow, further disrupting the learning experience. The course categorization was also messy and unclear, making it difficult for users to browse and find what they needed.
Feedback: 7
Opportunity
Insights
01
Teacher-Student Interaction
Through user interviews, we discovered that some students prefer more than just online learning, they’re also hoping for connecting in person. Many users are interest in find in-person meetups directly on the platform, or engaging in real-time discussions with students or instructors online.
02
More Considerate Learning Experience
From our interviews, we learned that timestamps play a crucial role when users take notes or ask questions during class. This insight led us to focus on improving that part of the user experience in this redesign.
Design
We began the project by conducting user interviews and surveys to understand how general users currently experience online learning platforms. These insights helped us uncover pain points, usage patterns, and unmet needs, which later shaped our design decisions throughout the project.
Ideation
Our Ideation begins with an exploration of the user experience offered by video streaming platforms, aiming to extract immersive design inspirations from their interaction patterns and content presentation.
Design Systems
01
Color
We introduced a more professional and immersive dark mode, using a deeper shade of blue to enhance the sense of trust and expertise. The overall color palette was also simplified, significantly reducing the number of colors used within the same screen to create a cleaner, more focused visual experience.
02
Components
In addition, we asked users what kinds of features they would “wish for” in an ideal platform. These wish-list responses revealed potential areas for improvement and inspired several new feature ideas.
Home Page
Old
In addition, we asked users what kinds of features they would “wish for” in an ideal platform. These wish-list responses revealed potential areas for improvement and inspired several new feature ideas.
New
In addition, we asked users what kinds of features they would “wish for” in an ideal platform. These wish-list responses revealed potential areas for improvement and inspired several new feature ideas.
Emmersive Browsing Experience
We crafted an immersive hover experience across the homepage and course cards to elevate user engagement:
Homepage Banner
We implemented autoplay video banners that instantly bring users into the world of the course, creating a more cinematic and engaging first impression.
Course Cards
On hover, users experience smooth and thoughtful motion transitions along with instant video previews, allowing them to explore course content more intuitively and effortlessly.
Course
Landing Page
01
Watch Preview
We prioritized transparency and ease of exploration by showcasing all available preview videos upfront. This encourages informed decisions and builds trust with potential learners.
02
Crowdfunding
In crowdfunding courses, we visualized the reward milestones to encourage user participation and make the funding process more engaging and motivating.
Learning Page
01
Face to Face Events
Leveraging insights from user interviews and YOTTA’s existing strength in offering in-person courses, we designed a dedicated interface for offline event registration.
This feature not only boosts student engagement beyond the screen, but also opens up opportunities for a commission-based revenue model in the future.
02
Theater Mode
Inspired by YouTube, we introduced a Theater Mode for course playback — designed with a clean and minimal interface that keeps the focus on content. The layout is simple, intuitive, and optimized for distraction-free learning.
03
Timestamps Feature
We added a timestamp feature to the discussion and Q&A section, allowing users to optionally tag the exact moment in the video when they ask a question. This helps instructors quickly understand where users may have encountered issues, leading to more contextual and efficient responses.
04
Turn Assignments into Portfolio
In crowdfunding courses, we visualized the reward milestones to encourage user participation and make the funding process more engaging and motivating.
01
Organize Discount Details
Since the coupon system involved complex logic across both the frontend and backend, we focused this redesign on refining the interface — toning down the visual emphasis on discounts while still maintaining subtle cues to guide users when relevant.
Reflect & Others
As the UI/UX designer in this project, I worked with the team to rebuild YOTTA from the ground up — including brand positioning, visual style, usability improvements, and opportunity evaluation.The process was definitely challenging, but seeing the following results come to life made all the effort incredibly rewarding and exciting!
What We Handoff
01
Designing Components
In addition to delivering the final design mockups, we also built reusable components and UI elements for YOTTA’s design system to support future scalability and team collaboration.
02
Spec & Documentation
We organized complex design documentation into an index structure and used internal links to guide team members directly to detailed specs, making it easier for everyone to find and reference the information they need.
Reflection
01
Highly Competitive Market
We understood that the online learning market is highly competitive — with platforms like Hahow leading locally, and Udemy dominating internationally.Finding a clear positioning for YOTTA in such a saturated space was not an easy task.
Through this project, we realized that true transformation would require more than just a website redesign — it would involve rethinking the product’s positioning and even shifts in the company’s internal culture and strategy.
02
Data Tracking
Although we had access to the product’s analytics dashboard, it was a challenge to determine which metrics would be meaningful — especially as the product was actively exploring new strategic directions.
Unfortunately, due to shifting priorities and timelines, we didn’t have the opportunity to follow through and track the long-term impact of our design decisions.
This was a valuable reminder that identifying the right data to measure — and having the structure in place to follow up — is just as critical as the design work itself.
