top of page

(III) Case Study: Websites Design (Online Shopping Platform)

(III) Case Study: Websites Design (Online Shopping Platform)

This module will introduce the UX and UI design-related knowledge of websites (online shopping platform) in detail---from conducting user research, thinking about the starting point of the product design, to collecting product information, creating user blogs, mind maps, and the basic structure of the product, to using to design the user flow, using Penpot to create wireframes and preliminary product prototypes, creating product-related components, and then completing pages connection and animation-adding, to finally doing prototype testing, students will experience the complete professional UX and UI design process in the class.

At the end of the course, the instructor will guide students to compile their work completed in class into a personal portfolio for use after the course.

( 1. Basic concepts of UX/UI
2. UX/UI examples
3. Design elements necessary for UX and UI
4. Searching skills
5. Software operation skills
6. Basic aesthetic skills
7. Skills in creating prototypes for mobile apps, websites, mobile games, etc.
8. Skills in creating product components
9. Skills in creating a personal portfolio)



Learning Outcomes

1. Analyze UI/UX features and advantages of popular online shopping platforms
2. Grasp methods of collecting data, creating user blogs, mind maps, and basic product architecture
3. Learn how to conduct user flow, wireframes, and preliminary product prototypes using
4. Learn how to search for product-related resources and design (product branding, image editing, etc.)
5. Learn how to design the interface of an advanced product prototype (color, font, picture usage)
6. Learn how to design different pages of a website (such as login page, landing page, dashboard, setting page, etc.)
7. Understand how to connect and perform prototypes testing (page connection and animation effect setting)


our proprietary cloud-based learning platform. It is designed to work seamlessly with free creative and development tools in providing support for DECT education.


Krystal’s Student Empowerment Programme (SEP) provides students the knowledge, skills and tools necessary to survive in the global digital economy, preparing them for excellence in their future careers.


is a comprehensive program designed to equip individuals and citizens with essential digital competencies and soft skills to thrive in the digital economy.


Provide DECT Professional TTT Training and Support for Teachers


Krystal OTP includes all the office tools needed to keep daily office tasks running efficiently and economically.

bottom of page