Redesign of Jub Yam: A Chinese Astrology Web Application

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

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

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.


Design thinking process

In this project, the double-diamond framework is used to guide the understanding of design problems and define solutions.

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.

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.

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

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.

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.

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.

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


This User flow only includes flow when the premium day is an expired scenario

Wireframe

HI-FI UI design

Astrology Calendar


Weekly horoscope, Monthly horoscope, and Yearly horoscope


the subscription plan, Invite friends, and wallet


Chines zodiac information, User astrology information

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.

Dashboard

Dashboard application management for clients

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.

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.


Design thinking process

In this project, the double-diamond framework is used to guide the understanding of design problems and define solutions.

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.

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.

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

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.

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.

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.

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


This User flow only includes flow when the premium day is an expired scenario

Wireframe

HI-FI UI design

Astrology Calendar


Weekly horoscope, Monthly horoscope, and Yearly horoscope


the subscription plan, Invite friends, and wallet


Chines zodiac information, User astrology information

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.

Dashboard

Dashboard application management for clients

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.

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.


Design thinking process

In this project, the double-diamond framework is used to guide the understanding of design problems and define solutions.

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.

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.

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

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.

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.

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.

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


This User flow only includes flow when the premium day is an expired scenario

Wireframe

HI-FI UI design

Astrology Calendar


Weekly horoscope, Monthly horoscope, and Yearly horoscope


the subscription plan, Invite friends, and wallet


Chines zodiac information, User astrology information

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.

Dashboard

Dashboard application management for clients

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.

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

Look interesting? Let's chat!

peeradonte@gmail.com

Look interesting? Let's chat!

peeradonte@gmail.com

Look interesting? Let's chat!

peeradonte@gmail.com