![](https://framerusercontent.com/images/QDfwcBnzX5A0cBJ7bezwtxf4xA.png)
![](https://framerusercontent.com/images/QDfwcBnzX5A0cBJ7bezwtxf4xA.png)
![](https://framerusercontent.com/images/QDfwcBnzX5A0cBJ7bezwtxf4xA.png)
Redesign of Jub Yam: A Chinese Astrology Web Application
Respondsibility
UX research, UI design
Duration
2 Months
*if image appear small please reload this site, Thank you.*
Redesign of Jub Yam: A Chinese Astrology Web Application
Respondsibility
UX research, UI design
Duration
2 Months
*if image appear small please reload this site, Thank you.*
Redesign of Jub Yam: A Chinese Astrology Web Application
Respondsibility
UX research, UI design
Duration
2 Months
*if image appear small please reload this site, Thank you.*
Overview
My role involves redesigning web applications, as well as creating landing pages and dashboards for Jub-Yam, a Chinese astrology calendar web application. My responsibilities encompass researching, creating wireframes, designing high-fidelity interfaces, establishing design systems, and collaborating closely with clients.
Objective
The objective is to redesign the web application with a more intuitive and modern design, aimed at expanding the target user base to individuals aged between 24 and 35 years old, shifting from the current target of 40-60 years old.
![](https://framerusercontent.com/images/kV4ieS9IJGPqUGPkRPjXdSoJaU.png)
Design thinking process
In this project, the double-diamond framework is used to guide the understanding of design problems and define solutions.
![](https://framerusercontent.com/images/JP0SPZ08s3mIqcxZfjwYs7Bnnk.png)
Discover phase
In the discovery stage, I conducted the primary research such as user interview and also conducted the secondary research such as competitor analysis, and UI pattern for best practices.
Competitor analysis
The competitor is Num Eiang. Num Eiang has a high market share in the Chinese Astro calendar application market. So I decided to analyze feature and their user target, As my assumption that Jamyam will likely have the same user target.
![](https://framerusercontent.com/images/sIPo27uCH93GJVdRsbv2tAxa4Hk.png)
In other competitors analysis. I decided to look on the horoscope astrology oracle app. My expectation is observation to feature inside the app that might be able to be implemented in my project.
![](https://framerusercontent.com/images/w3tMa4iIhdR9XMiDxLPpoYn9qfc.png)
User research
The clients also want to shift the target user base to office workers aged 24-35. In this project the user interview is conducted as primary research to understand new target group behavior and need about using horoscope service.
User interview
User interview was conducted as informal interview inside company. The participant selected was in a business team.
Assumption
Users like to check the horoscope energy in each day to make informed decisions about important things.
Research question
People around 24-35 have interested to check their horoscope in which aspect?
How frequency they are check their horoscope?
Participant profile
Office worker, 24-35 years old.
Have interested in horoscope.
Have ever use a online horoscope service.
User interview report
![](https://framerusercontent.com/images/PAjTBlskzvGxp9CLhFLvKhmxM.png)
Define phase
After research were done. I have defined lean persona, HMW(How Might We), user journey map, and key features in my project.
Lean persona
During the define user persona phase, the client provided detailed information about the current user base, which primarily consists of individuals from the Baby Boomer and Gen-X generations. However, the client is also aiming to attract new users following the redesign. Drawing on insights from this informal user interview and faced with a tight deadline for delivering the design to a developer, I opted to develop a lean persona in place of a user persona. This decision was made to streamline the process and expedite the design creation.
![](https://framerusercontent.com/images/HYPBH5bQRzXskvisTpZTHMGmvoM.png)
User journey map
After conducted user interview. Now we can visualize user behavior when they need to check their horoscope by create user journey map.
![](https://framerusercontent.com/images/003jkoE0XBRV2LNyoLraOJhMsIA.png)
HMW (How Might We)
How might we make the fortune timeline to be more prominent and simplify content?
How might we make a design in main page that contain essential information such as fortune schedule, fortune color suggestion in main menu?
Key Feature
Astrology Calendar
Weekly horoscope
Monthly horoscope
Yearly horoscope
Chines zodiac information
User astrology information, the subscription plan, Invite friends, and wallet
Develop phase
Develop stage is created from the define phase by aligning features, lean persona, and user journey map. In development stage has included a site map, user flow, web application wireframe, web application UI, landing page, and dashboard for the client.
Site map
A site map is created by focusing on the features in the list.
![](https://framerusercontent.com/images/XEI2O6SyPfrQ7qZjLtiERao9voM.png)
User flow
User flow creates to visual scenario when the user is using this app.
This User flow does not include a none-premium user scenario
![](https://framerusercontent.com/images/IoFwZ1puJn6CNQLdjUN0Ok6h24s.png)
This User flow only includes flow when the premium day is an expired scenario
![](https://framerusercontent.com/images/cKuDMw2lsAYfCnmvB9D80CIqR4.png)
Wireframe
![](https://framerusercontent.com/images/Z0VP2sqwrMDounPs5huUlHCo30.png)
HI-FI UI design
Astrology Calendar
![](https://framerusercontent.com/images/Gepax0XwczH15b5DUaZPT4yX2w.png)
Weekly horoscope, Monthly horoscope, and Yearly horoscope
![](https://framerusercontent.com/images/pbe2FDMg5vk2slK49OsXgnLVqEw.png)
the subscription plan, Invite friends, and wallet
![](https://framerusercontent.com/images/JTBM8Sum6t4zJ0J6xKaIACwNTg.png)
Chines zodiac information, User astrology information
![](https://framerusercontent.com/images/raVNobJ6pMGAoBJWbmQVxAkRk4s.png)
Design system
The design system is made to support web applications, landing pages, and dashboards. The design system will also make for scalable apps in the future.
Landing page design
The landing page is built from a no-code development tool and hosted by Webflow.
![](https://framerusercontent.com/images/tooNvK9pKySLbhU3JU6EMP9f80.png)
Dashboard
Dashboard application management for clients
![](https://framerusercontent.com/images/NUoDiQJgvs3szFWRGcjxltPmkE.png)
Deliver phase
After designing all processes delivering the design to the developer and doing some guerrilla usability testing with the team and close people Jub-yam is finally launched.
![](https://framerusercontent.com/images/eBRnHil58rp4RkeS72xLcStdHaw.gif)
Full walk through
Reflection
I’m proud to work on such a large-scale project from the very beginning. Thanks a lot to my team for believing in me and supporting me throughout the process. I learned to collaborate with engineers and hand off final deliverables.
Overview
My role involves redesigning web applications, as well as creating landing pages and dashboards for Jub-Yam, a Chinese astrology calendar web application. My responsibilities encompass researching, creating wireframes, designing high-fidelity interfaces, establishing design systems, and collaborating closely with clients.
Objective
The objective is to redesign the web application with a more intuitive and modern design, aimed at expanding the target user base to individuals aged between 24 and 35 years old, shifting from the current target of 40-60 years old.
![](https://framerusercontent.com/images/kV4ieS9IJGPqUGPkRPjXdSoJaU.png)
Design thinking process
In this project, the double-diamond framework is used to guide the understanding of design problems and define solutions.
![](https://framerusercontent.com/images/JP0SPZ08s3mIqcxZfjwYs7Bnnk.png)
Discover phase
In the discovery stage, I conducted the primary research such as user interview and also conducted the secondary research such as competitor analysis, and UI pattern for best practices.
Competitor analysis
The competitor is Num Eiang. Num Eiang has a high market share in the Chinese Astro calendar application market. So I decided to analyze feature and their user target, As my assumption that Jamyam will likely have the same user target.
![](https://framerusercontent.com/images/sIPo27uCH93GJVdRsbv2tAxa4Hk.png)
In other competitors analysis. I decided to look on the horoscope astrology oracle app. My expectation is observation to feature inside the app that might be able to be implemented in my project.
![](https://framerusercontent.com/images/w3tMa4iIhdR9XMiDxLPpoYn9qfc.png)
User research
The clients also want to shift the target user base to office workers aged 24-35. In this project the user interview is conducted as primary research to understand new target group behavior and need about using horoscope service.
User interview
User interview was conducted as informal interview inside company. The participant selected was in a business team.
Assumption
Users like to check the horoscope energy in each day to make informed decisions about important things.
Research question
People around 24-35 have interested to check their horoscope in which aspect?
How frequency they are check their horoscope?
Participant profile
Office worker, 24-35 years old.
Have interested in horoscope.
Have ever use a online horoscope service.
User interview report
![](https://framerusercontent.com/images/PAjTBlskzvGxp9CLhFLvKhmxM.png)
Define phase
After research were done. I have defined lean persona, HMW(How Might We), user journey map, and key features in my project.
Lean persona
During the define user persona phase, the client provided detailed information about the current user base, which primarily consists of individuals from the Baby Boomer and Gen-X generations. However, the client is also aiming to attract new users following the redesign. Drawing on insights from this informal user interview and faced with a tight deadline for delivering the design to a developer, I opted to develop a lean persona in place of a user persona. This decision was made to streamline the process and expedite the design creation.
![](https://framerusercontent.com/images/HYPBH5bQRzXskvisTpZTHMGmvoM.png)
User journey map
After conducted user interview. Now we can visualize user behavior when they need to check their horoscope by create user journey map.
![](https://framerusercontent.com/images/003jkoE0XBRV2LNyoLraOJhMsIA.png)
HMW (How Might We)
How might we make the fortune timeline to be more prominent and simplify content?
How might we make a design in main page that contain essential information such as fortune schedule, fortune color suggestion in main menu?
Key Feature
Astrology Calendar
Weekly horoscope
Monthly horoscope
Yearly horoscope
Chines zodiac information
User astrology information, the subscription plan, Invite friends, and wallet
Develop phase
Develop stage is created from the define phase by aligning features, lean persona, and user journey map. In development stage has included a site map, user flow, web application wireframe, web application UI, landing page, and dashboard for the client.
Site map
A site map is created by focusing on the features in the list.
![](https://framerusercontent.com/images/XEI2O6SyPfrQ7qZjLtiERao9voM.png)
User flow
User flow creates to visual scenario when the user is using this app.
This User flow does not include a none-premium user scenario
![](https://framerusercontent.com/images/IoFwZ1puJn6CNQLdjUN0Ok6h24s.png)
This User flow only includes flow when the premium day is an expired scenario
![](https://framerusercontent.com/images/cKuDMw2lsAYfCnmvB9D80CIqR4.png)
Wireframe
![](https://framerusercontent.com/images/Z0VP2sqwrMDounPs5huUlHCo30.png)
HI-FI UI design
Astrology Calendar
![](https://framerusercontent.com/images/Gepax0XwczH15b5DUaZPT4yX2w.png)
Weekly horoscope, Monthly horoscope, and Yearly horoscope
![](https://framerusercontent.com/images/pbe2FDMg5vk2slK49OsXgnLVqEw.png)
the subscription plan, Invite friends, and wallet
![](https://framerusercontent.com/images/JTBM8Sum6t4zJ0J6xKaIACwNTg.png)
Chines zodiac information, User astrology information
![](https://framerusercontent.com/images/raVNobJ6pMGAoBJWbmQVxAkRk4s.png)
Design system
The design system is made to support web applications, landing pages, and dashboards. The design system will also make for scalable apps in the future.
Landing page design
The landing page is built from a no-code development tool and hosted by Webflow.
![](https://framerusercontent.com/images/tooNvK9pKySLbhU3JU6EMP9f80.png)
Dashboard
Dashboard application management for clients
![](https://framerusercontent.com/images/NUoDiQJgvs3szFWRGcjxltPmkE.png)
Deliver phase
After designing all processes delivering the design to the developer and doing some guerrilla usability testing with the team and close people Jub-yam is finally launched.
![](https://framerusercontent.com/images/eBRnHil58rp4RkeS72xLcStdHaw.gif)
Full walk through
Reflection
I’m proud to work on such a large-scale project from the very beginning. Thanks a lot to my team for believing in me and supporting me throughout the process. I learned to collaborate with engineers and hand off final deliverables.
Overview
My role involves redesigning web applications, as well as creating landing pages and dashboards for Jub-Yam, a Chinese astrology calendar web application. My responsibilities encompass researching, creating wireframes, designing high-fidelity interfaces, establishing design systems, and collaborating closely with clients.
Objective
The objective is to redesign the web application with a more intuitive and modern design, aimed at expanding the target user base to individuals aged between 24 and 35 years old, shifting from the current target of 40-60 years old.
![](https://framerusercontent.com/images/kV4ieS9IJGPqUGPkRPjXdSoJaU.png)
Design thinking process
In this project, the double-diamond framework is used to guide the understanding of design problems and define solutions.
![](https://framerusercontent.com/images/JP0SPZ08s3mIqcxZfjwYs7Bnnk.png)
Discover phase
In the discovery stage, I conducted the primary research such as user interview and also conducted the secondary research such as competitor analysis, and UI pattern for best practices.
Competitor analysis
The competitor is Num Eiang. Num Eiang has a high market share in the Chinese Astro calendar application market. So I decided to analyze feature and their user target, As my assumption that Jamyam will likely have the same user target.
![](https://framerusercontent.com/images/sIPo27uCH93GJVdRsbv2tAxa4Hk.png)
In other competitors analysis. I decided to look on the horoscope astrology oracle app. My expectation is observation to feature inside the app that might be able to be implemented in my project.
![](https://framerusercontent.com/images/w3tMa4iIhdR9XMiDxLPpoYn9qfc.png)
User research
The clients also want to shift the target user base to office workers aged 24-35. In this project the user interview is conducted as primary research to understand new target group behavior and need about using horoscope service.
User interview
User interview was conducted as informal interview inside company. The participant selected was in a business team.
Assumption
Users like to check the horoscope energy in each day to make informed decisions about important things.
Research question
People around 24-35 have interested to check their horoscope in which aspect?
How frequency they are check their horoscope?
Participant profile
Office worker, 24-35 years old.
Have interested in horoscope.
Have ever use a online horoscope service.
User interview report
![](https://framerusercontent.com/images/PAjTBlskzvGxp9CLhFLvKhmxM.png)
Define phase
After research were done. I have defined lean persona, HMW(How Might We), user journey map, and key features in my project.
Lean persona
During the define user persona phase, the client provided detailed information about the current user base, which primarily consists of individuals from the Baby Boomer and Gen-X generations. However, the client is also aiming to attract new users following the redesign. Drawing on insights from this informal user interview and faced with a tight deadline for delivering the design to a developer, I opted to develop a lean persona in place of a user persona. This decision was made to streamline the process and expedite the design creation.
![](https://framerusercontent.com/images/HYPBH5bQRzXskvisTpZTHMGmvoM.png)
User journey map
After conducted user interview. Now we can visualize user behavior when they need to check their horoscope by create user journey map.
![](https://framerusercontent.com/images/003jkoE0XBRV2LNyoLraOJhMsIA.png)
HMW (How Might We)
How might we make the fortune timeline to be more prominent and simplify content?
How might we make a design in main page that contain essential information such as fortune schedule, fortune color suggestion in main menu?
Key Feature
Astrology Calendar
Weekly horoscope
Monthly horoscope
Yearly horoscope
Chines zodiac information
User astrology information, the subscription plan, Invite friends, and wallet
Develop phase
Develop stage is created from the define phase by aligning features, lean persona, and user journey map. In development stage has included a site map, user flow, web application wireframe, web application UI, landing page, and dashboard for the client.
Site map
A site map is created by focusing on the features in the list.
![](https://framerusercontent.com/images/XEI2O6SyPfrQ7qZjLtiERao9voM.png)
User flow
User flow creates to visual scenario when the user is using this app.
This User flow does not include a none-premium user scenario
![](https://framerusercontent.com/images/IoFwZ1puJn6CNQLdjUN0Ok6h24s.png)
This User flow only includes flow when the premium day is an expired scenario
![](https://framerusercontent.com/images/cKuDMw2lsAYfCnmvB9D80CIqR4.png)
Wireframe
![](https://framerusercontent.com/images/Z0VP2sqwrMDounPs5huUlHCo30.png)
HI-FI UI design
Astrology Calendar
![](https://framerusercontent.com/images/Gepax0XwczH15b5DUaZPT4yX2w.png)
Weekly horoscope, Monthly horoscope, and Yearly horoscope
![](https://framerusercontent.com/images/pbe2FDMg5vk2slK49OsXgnLVqEw.png)
the subscription plan, Invite friends, and wallet
![](https://framerusercontent.com/images/JTBM8Sum6t4zJ0J6xKaIACwNTg.png)
Chines zodiac information, User astrology information
![](https://framerusercontent.com/images/raVNobJ6pMGAoBJWbmQVxAkRk4s.png)
Design system
The design system is made to support web applications, landing pages, and dashboards. The design system will also make for scalable apps in the future.
Landing page design
The landing page is built from a no-code development tool and hosted by Webflow.
![](https://framerusercontent.com/images/tooNvK9pKySLbhU3JU6EMP9f80.png)
Dashboard
Dashboard application management for clients
![](https://framerusercontent.com/images/NUoDiQJgvs3szFWRGcjxltPmkE.png)
Deliver phase
After designing all processes delivering the design to the developer and doing some guerrilla usability testing with the team and close people Jub-yam is finally launched.
![](https://framerusercontent.com/images/eBRnHil58rp4RkeS72xLcStdHaw.gif)
Full walk through
Reflection
I’m proud to work on such a large-scale project from the very beginning. Thanks a lot to my team for believing in me and supporting me throughout the process. I learned to collaborate with engineers and hand off final deliverables.
Table of contents
Table of contents
![](https://framerusercontent.com/images/ZkMm9AQYc9cnT9pkaZv0ydEFsGw.png)
Look interesting? Let's chat!
peeradonte@gmail.com
© 2024 Peeradon Teabrit, All Rights Reserved.
![](https://framerusercontent.com/images/ZkMm9AQYc9cnT9pkaZv0ydEFsGw.png)
Look interesting? Let's chat!
peeradonte@gmail.com
© 2024 Peeradon Teabrit, All Rights Reserved.
![](https://framerusercontent.com/images/ZkMm9AQYc9cnT9pkaZv0ydEFsGw.png)
Look interesting? Let's chat!
peeradonte@gmail.com
© 2024 Peeradon Teabrit, All Rights Reserved.