DreamPro
DreamPro
DreamPro
TIME
TIME
June - August , 2025
June - August , 2025
MY ROLE
MY ROLE
UI Design
UI Design
TEAM
TEAM
Mankin
Mankin
Overview
Overview
During my internship, I worked on DreamPro, an ecosystem for a smart bed product. My role was to design both the mobile app interface for operating the bed and a promotional web platform to guide buyers through the purchase experience.
During my internship, I worked on DreamPro, an ecosystem for a smart bed product. My role was to design both the mobile app interface for operating the bed and a promotional web platform to guide buyers through the purchase experience.
Challenge
Challenge
The main design challenge lies in creating a high-tech, AI-driven application that allows everyone to easily and enjoyably track their daily sleep, effectively showcasing DreamPro's superior intelligence.
The main design challenge lies in creating a high-tech, AI-driven application that allows everyone to easily and enjoyably track their daily sleep, effectively showcasing DreamPro's superior intelligence.
Research & Analysis
Inspired by STEPN, my vision is to create a "sleep-to-earn" concept to incentivize people to adopt healthy lifestyle habits. To lay a solid foundation for DREAMPRO, I conducted comprehensive research on industry-leading smart beds such as Eight Sleep and HEKA. The research focused on how modern smart beds integrate everyday technologies such as automatic temperature control, motion tracking, and smart alarms. By combining Web3 gamification with intuitive smart bed technology, my research aimed to identify the drivers of user engagement and establish a functional baseline for the system.
Ideation & Concept Development
During the concept development phase, I structured the core information architecture (IA) for the DREAMPRO platform to ensure a seamless and logical user journey. The framework is divided into four key pillars: the Home page (highlighting the 5.0 sleep system and product breakdown), Sleep Health (showcasing proprietary sleep algorithms and targeted pressure-relief technology), About Us (introducing brand stories and smart manufacturing highlights), and Experience Booking (facilitating user onboarding and inquiries). This systematic layout bridges high-end hardware engineering with intuitive digital navigation.
Low-Fidelity Wireframing
Moving into the design phase, I translated the product architecture into low-fidelity wireframes to map out the core screen layouts and user navigation for DREAMPRO. The sketches outline key functional interfaces, including the Home/Dashboard (featuring greeting metrics and time display), the Sleep-to-Earn & Rewards Hub (tracking Dream Points, daily achievements, milestones, and reward shop modules), the Smart Bed Control Panel (for physical adjustments and massage settings), and the Sleep Report & AI Insights (showcasing the Sleep Fitness Score and physiological analytics). These wireframes establish a clear structural blueprint for the app's interactive flow.
In addition to the mobile app, I designed the comprehensive web platform and landing pages for DREAMPRO to establish a strong brand presence. The layout structure focuses on immersive storytelling and product conversion, featuring key sections such as the Hero Banner & Brand Introduction (highlighting the 5.0 smart sleep system and modern sleep era), Product Technology Showcase (detailing smart electric beds, automated temperature control, and pressure-relief algorithms), Sleep Health Insights, and an Experience Booking & Contact Portal. The web wireframes combine sleek dark-mode aesthetics with clean white sections, balancing high-end luxury branding with clear information hierarchy.
Research & Analysis
Inspired by STEPN, my vision is to create a "sleep-to-earn" concept to incentivize people to adopt healthy lifestyle habits. To lay a solid foundation for DREAMPRO, I conducted comprehensive research on industry-leading smart beds such as Eight Sleep and HEKA. The research focused on how modern smart beds integrate everyday technologies such as automatic temperature control, motion tracking, and smart alarms. By combining Web3 gamification with intuitive smart bed technology, my research aimed to identify the drivers of user engagement and establish a functional baseline for the system.
Ideation & Concept Development
During the concept development phase, I structured the core information architecture (IA) for the DREAMPRO platform to ensure a seamless and logical user journey. The framework is divided into four key pillars: the Home page (highlighting the 5.0 sleep system and product breakdown), Sleep Health (showcasing proprietary sleep algorithms and targeted pressure-relief technology), About Us (introducing brand stories and smart manufacturing highlights), and Experience Booking (facilitating user onboarding and inquiries). This systematic layout bridges high-end hardware engineering with intuitive digital navigation.
Low-Fidelity Wireframing
Moving into the design phase, I translated the product architecture into low-fidelity wireframes to map out the core screen layouts and user navigation for DREAMPRO. The sketches outline key functional interfaces, including the Home/Dashboard (featuring greeting metrics and time display), the Sleep-to-Earn & Rewards Hub (tracking Dream Points, daily achievements, milestones, and reward shop modules), the Smart Bed Control Panel (for physical adjustments and massage settings), and the Sleep Report & AI Insights (showcasing the Sleep Fitness Score and physiological analytics). These wireframes establish a clear structural blueprint for the app's interactive flow.
In addition to the mobile app, I designed the comprehensive web platform and landing pages for DREAMPRO to establish a strong brand presence. The layout structure focuses on immersive storytelling and product conversion, featuring key sections such as the Hero Banner & Brand Introduction (highlighting the 5.0 smart sleep system and modern sleep era), Product Technology Showcase (detailing smart electric beds, automated temperature control, and pressure-relief algorithms), Sleep Health Insights, and an Experience Booking & Contact Portal. The web wireframes combine sleek dark-mode aesthetics with clean white sections, balancing high-end luxury branding with clear information hierarchy.
Research & Analysis
Inspired by STEPN, my vision is to create a "sleep-to-earn" concept to incentivize people to adopt healthy lifestyle habits. To lay a solid foundation for DREAMPRO, I conducted comprehensive research on industry-leading smart beds such as Eight Sleep and HEKA. The research focused on how modern smart beds integrate everyday technologies such as automatic temperature control, motion tracking, and smart alarms. By combining Web3 gamification with intuitive smart bed technology, my research aimed to identify the drivers of user engagement and establish a functional baseline for the system.
Ideation & Concept Development
During the concept development phase, I structured the core information architecture (IA) for the DREAMPRO platform to ensure a seamless and logical user journey. The framework is divided into four key pillars: the Home page (highlighting the 5.0 sleep system and product breakdown), Sleep Health (showcasing proprietary sleep algorithms and targeted pressure-relief technology), About Us (introducing brand stories and smart manufacturing highlights), and Experience Booking (facilitating user onboarding and inquiries). This systematic layout bridges high-end hardware engineering with intuitive digital navigation.
Low-Fidelity Wireframing
Moving into the design phase, I translated the product architecture into low-fidelity wireframes to map out the core screen layouts and user navigation for DREAMPRO. The sketches outline key functional interfaces, including the Home/Dashboard (featuring greeting metrics and time display), the Sleep-to-Earn & Rewards Hub (tracking Dream Points, daily achievements, milestones, and reward shop modules), the Smart Bed Control Panel (for physical adjustments and massage settings), and the Sleep Report & AI Insights (showcasing the Sleep Fitness Score and physiological analytics). These wireframes establish a clear structural blueprint for the app's interactive flow.
In addition to the mobile app, I designed the comprehensive web platform and landing pages for DREAMPRO to establish a strong brand presence. The layout structure focuses on immersive storytelling and product conversion, featuring key sections such as the Hero Banner & Brand Introduction (highlighting the 5.0 smart sleep system and modern sleep era), Product Technology Showcase (detailing smart electric beds, automated temperature control, and pressure-relief algorithms), Sleep Health Insights, and an Experience Booking & Contact Portal. The web wireframes combine sleek dark-mode aesthetics with clean white sections, balancing high-end luxury branding with clear information hierarchy.
High-Fidelity Designs
High-Fidelity Designs
Final Product & Demo
Final Product & Demo
The Result
The Result
The Result
- Successfully designed and prototyped the GREEN$ Redesign, a comprehensive mobile app concept combining smart recycling station navigation, an in-app eco-store for direct redemption, and P2P point transfers.
- Successfully designed and prototyped the GREEN$ Redesign, a comprehensive mobile app concept combining smart recycling station navigation, an in-app eco-store for direct redemption, and P2P point transfers.
- Successfully designed and prototyped the GREEN$ Redesign, a comprehensive mobile app concept combining smart recycling station navigation, an in-app eco-store for direct redemption, and P2P point transfers.
- Successfully integrated intuitive user flows to transform the scattered recycling process into a fast, seamless, and reliable everyday experience for users on the go.
- Successfully integrated intuitive user flows to transform the scattered recycling process into a fast, seamless, and reliable everyday experience for users on the go.
- Successfully integrated intuitive user flows to transform the scattered recycling process into a fast, seamless, and reliable everyday experience for users on the go.
Reflection
Reflection
Reflection
- Gained valuable learning experiences in balancing real-time user utility (such as addressing point shortfalls), visual aesthetics, and system navigation flow throughout the design process.
- Gained valuable learning experiences in balancing real-time user utility (such as addressing point shortfalls), visual aesthetics, and system navigation flow throughout the design process.
- Gained valuable learning experiences in balancing real-time user utility (such as addressing point shortfalls), visual aesthetics, and system navigation flow throughout the design process.
- Recognizing that every step in UI/UX design, from addressing immediate pain points to perfecting point transfers and analytics, is crucial for building a coherent and effective product.
- Recognizing that every step in UI/UX design, from addressing immediate pain points to perfecting point transfers and analytics, is crucial for building a coherent and effective product.
- Recognizing that every step in UI/UX design, from addressing immediate pain points to perfecting point transfers and analytics, is crucial for building a coherent and effective product.
© Mankin Portfolio | Created by Mankin
Made in Framer
© Mankin Portfolio | Created by Mankin
Made in Framer
© Mankin Portfolio | Created by Mankin
Made in Framer