Uraipaint
Uraipaint
Uraipaint
To redesign the Uraipaints website, enhancing the UI for over 20 pages to create a more visually appealing and trend-aligned design.
To redesign the Uraipaints website, enhancing the UI for over 20 pages to create a more visually appealing and trend-aligned design.
To redesign the Uraipaints website, enhancing the UI for over 20 pages to create a more visually appealing and trend-aligned design.
Company
Company
Company
Trienpont International
Trienpont
International
Trienpont International
My Role
My Role
My Role
UX/UI Designer
UX/UI Designer
UX/UI Designer
Time Frame
Time Frame
Time Frame
April 2024 - May 2024
April 2024 - May 2024
April 2024 - May 2024
Project Overview
Project Overview
Project Overview
This project focused on redesigning the website for Uraipaints, using a scrum process within a three-week timeline for designing phase. The website consists of over 20 pages, and the client wanted to enhance the UI to make it more visually appealing and align with current design trends.
This project focused on redesigning the website for Uraipaints, using a scrum process within a three-week timeline for designing phase. The website consists of over 20 pages, and the client wanted to enhance the UI to make it more visually appealing and align with current design trends.
This project focused on redesigning the website for Uraipaints, using a scrum process within a three-week timeline for designing phase. The website consists of over 20 pages, and the client wanted to enhance the UI to make it more visually appealing and align with current design trends.
My Contribution
My Contribution
My Contribution
This project has two designers, including one team member (K. Sopark Kongtawin) and myself. I contributed to the Contact Us, About Us, Search Shop, Career Details, and Join As A Dealer pages, as well as certain components in the design system. For the other pages, I assisted with some aspects of the UI.
This project has two designers, including one team member (K. Sopark Kongtawin) and myself. I contributed to the Contact Us, About Us, Search Shop, Career Details, and Join As A Dealer pages, as well as certain components in the design system. For the other pages, I assisted with some aspects of the UI.
This project has two designers, including one team member (K. Sopark Kongtawin) and myself. I contributed to the Contact Us, About Us, Search Shop, Career Details, and Join As A Dealer pages, as well as certain components in the design system. For the other pages, I assisted with some aspects of the UI.
HOW DID IT ALL START
HOW DID IT ALL START
1
DISCOVER
DISCOVER
Discover:
Discover:
Requirement Gathering:
The client wants to revise the navigation flow, focusing on creating an informative website rather than a full e-commerce platform. The goal is to guide users toward contacting the company and making a purchase. We planned to research competitors to analyze their features and UI styles.
Requirement Gathering:
The client wants to revise the navigation flow, focusing on creating an informative website rather than a full e-commerce platform. The goal is to guide users toward contacting the company and making a purchase. We planned to research competitors to analyze their features and UI styles.
2
DEFINE AND RESEARCH
DEFINE AND RESEARCH
Competitor Analysis:
Competitor Analysis:
The direct competitors are TOA and Nippon Paint. We found that each platform offers easy navigation, making it simple to access different pages. Additionally, the layout and text are clean and highly readable.
The calculation page, in particular, features clear visuals, helping users easily understand which section of the house they are calculating.
The direct competitors are TOA and Nippon Paint. We found that each platform offers easy navigation, making it simple to access different pages. Additionally, the layout and text are clean and highly readable.
The calculation page, in particular, features clear visuals, helping users easily understand which section of the house they are calculating.
3
IDEATE
IDEATE
Information Architecture:
Information Architecture:
We improved the information architecture flow, making navigation easier.
We improved the information architecture flow, making navigation easier.
4
Design
Design
Design System:
Design System:
We created the design system for both desktop and mobile views based on the shadcn/ui library components, as discussed with the front-end developer.
We created the design system for both desktop and mobile views based on the shadcn/ui library components, as discussed with the front-end developer.
UI Design Overview:
UI Design Overview:
We organized the files by separating each page into sections, which helped the development team and project manager easily understand how to review and implement them.
We organized the files by separating each page into sections, which helped the development team and project manager easily understand how to review and implement them.
Contact Us:
Contact Us:
On the current website, there is a lot of contact information, including a contact form button, Google Maps, and a graphic map.
To streamline this, we reorganized the contact details into four categorized tabs: 'Head Office,' 'Head Factory,' 'Distribution Centers,' and 'Overseas Dealers.' Additionally, we updated the content within each tab to be displayed in an accordion format, which includes the Google Maps details, making it more user-friendly and easier to navigate.
On the current website, there is a lot of contact information, including a contact form button, Google Maps, and a graphic map.
To streamline this, we reorganized the contact details into four categorized tabs: 'Head Office,' 'Head Factory,' 'Distribution Centers,' and 'Overseas Dealers.' Additionally, we updated the content within each tab to be displayed in an accordion format, which includes the Google Maps details, making it more user-friendly and easier to navigate.
News & Knowledge:
News & Knowledge:
We used the same layout as the product listing page to make it consistent and easy to develop within the limited timeframe. We merged these two sections into a single page where users can filter to select between 'News' and 'Knowledge.’
We used the same layout as the product listing page to make it consistent and easy to develop within the limited timeframe. We merged these two sections into a single page where users can filter to select between 'News' and 'Knowledge.’
Career:
Career:
We revised the layout to make job positions more outstanding. In addition, the current career details page was not functional, so we redesigned it for better readability. The form is now positioned on the right side to attract users and increase conversion rates.
We revised the layout to make job positions more outstanding. In addition, the current career details page was not functional, so we redesigned it for better readability. The form is now positioned on the right side to attract users and increase conversion rates.
Find Color Shade:
Find Color Shade:
For the color shade page, users can filter colors by categories. Each category contains a list of colors based on your selection. After clicking on a color, you'll see a list of that color shades. When you select one of those, you'll be taken to the color detail page, which also features related products.
For the color shade page, users can filter colors by categories. Each category contains a list of colors based on your selection. After clicking on a color, you'll see a list of that color shades. When you select one of those, you'll be taken to the color detail page, which also features related products.
About Us:
About Us:
On the current website, the old flow required users to select a menu first to access a detail page. If users wanted to navigate to another page, they had to exit the detail page and select a different menu. We revised the flow by using tabs, making it easier for users to switch between detail pages. There are three tabs: 'Milestones,' 'Vision and Mission,' and 'Our Success.'
On the current website, the old flow required users to select a menu first to access a detail page. If users wanted to navigate to another page, they had to exit the detail page and select a different menu. We revised the flow by using tabs, making it easier for users to switch between detail pages. There are three tabs: 'Milestones,' 'Vision and Mission,' and 'Our Success.'
Search Shop:
Search Shop:
We redesigned the shop search layout because the current website cannot be used. Therefore, we added a filter allowing users to sort by location and categories, with results showing where the selected categories are available.
We redesigned the shop search layout because the current website cannot be used. Therefore, we added a filter allowing users to sort by location and categories, with results showing where the selected categories are available.
Join As A Dealers:
Join As A Dealers:
The "Join as a Dealer" page is a form for those who want to join the team as a dealer.
The "Join as a Dealer" page is a form for those who want to join the team as a dealer.
5
Deliver
Deliver
Challenge and Learning:
Challenge and Learning:
The challenge of this project was that it was my first time applying the shad/cn library to create components and a design system. Additionally, we had to complete the project within a tight timeframe.
What I learned: I actively participated in the scrum framework, which helped me work more systematically. I also presented to the client, explaining the UI we developed. This project has been a significant professional growth experience.
The next step is for the website to go live later this year. Stay tuned for the launch of the new site!
The challenge of this project was that it was my first time applying the shad/cn library to create components and a design system. Additionally, we had to complete the project within a tight timeframe.
What I learned: I actively participated in the scrum framework, which helped me work more systematically. I also presented to the client, explaining the UI we developed. This project has been a significant professional growth experience.
The next step is for the website to go live later this year. Stay tuned for the launch of the new site!