JBS SIAM INTERNATIONAL
RESPONSIVE WEBSITE
Overview
A Web Design Project for JBS Siam International, an auto parts wholesale company who is looking to expand their reach from their wholesale customers, to include online end users as well.
Project Details
Freelance Project
Duration: 6 Weeks
Tools: Figma,
Role: UX Design, UI Design, Branding
Background
Siam JBS International has been in operation for over 40 years, selling all kinds of auto parts under their own brands. Their current customer bases are auto repair shops, and auto parts shops. Most customers have direct contact with the company and order their products in large quantity. There were attempts to make an e-commerce website in the past, but due to the large variety of products, and no specialized team behind it, it was not successful.
Problem
-
Currently, JBS Siam International does not have a functional E-Commerce website, and their branding needs an update, in order to stand out and appeal more to potential users on the internet.
Goal
-
Develop a strong brand identity that is memorable and stands out to users
-
Design an e-commerce website that is easy to navigate, especially for users with limited knowledge about auto parts
01.
Empathize
02.
Define
03.
Ideate
Empathize
Understanding the company, their products, and their target group
The Company
As mentioned, Siam JBS International is a large auto part manufacturer, importer, and wholesaler in Thailand. They relied mostly on existing contacts to sell their products in large quantity.
The Products
As someone who is not familiar with auto parts at all, I had to take some time and learn about how the products are categorized.
There are 18 Main product categories that they manufacture and sell under 4 different brands. In some categories, there will be different parts for specific areas of the vehicle as well, for example, left/right or front/back.
(IMGAGE OF TREE DIAGRAM)
As they manufacture these parts for most cars in the market, this means that there are countless variations of the same product, each made for a specific model/year of a car as well.
The challenge
Upon learning that there are possibly over a thousand variations of products I’ll be dealing with, I know that the most important part of this project is categorizing items in a way that is easiest for users to find exactly what they want.
The Target Groups
Two different types of users were given for this project
Out of the two, we will be considering the needs of the first group of customers. because...
Additional Insights
-
There are a lot of variants when it comes to names, both for the specific products, and car models, this makes it hard for customers to find what they need, as there might be misunderstandings.
​
-
General customers will be more comfortable looking for car model names (Ex. Toyota Corolla) while Mechanics will use specific codes (Ex. AE90) When referring to a specific car.
USER PAIN POINTS
-
There are many auto parts in the market, and they are all specific to each model of the car.
-
There are many auto parts in the market, and they are all specific to each model of the car.
-
The sheer amounts of products and car models available makes it hard for users to browse
The Competitors
Competitive Analysis
To kick off, I looked up some examples to study. The first example was given by the company, as an indirect competitor. Then, I looked up other companies and websites selling auto parts online, and try to learn how they categorize their products.
Persona 1
What they're doing well
Improvement opportunity
Research Summary
-
To kick off, I looked up some examples to study. The first example was given by the company, as an indirect competitor. Then, I looked up other companies and websites selling auto parts online, and try to learn how they categorize their products.
Define
This is your About section. Every website has a story and users want to hear yours. This is a great opportunity to give a full background on who you are and what your site has to offer. Double click on the text box to edit the content and add all the information you want to share.
Persona
Persona 1
Persona 2
User Journey
User Journey Diagram
How Might We
How might we allow users to easily look up and purchase the specific auto parts they need, while only having limited knowledge on the topic.
Pain Points
This is your About section. Every website has a story and users want to hear yours. This is a great opportunity to give a full background on who you are and what your site has to offer. Double click on the text box to edit the content and add all the information you want to share.
Key Features
This is your About section. Every website has a story and users want to hear yours. This is a great opportunity to give a full background on who you are and what your site has to offer. Double click on the text box to edit the content and add all the information you want to share.
Ideate
This is your About section. Every website has a story and users want to hear yours. This is a great opportunity to give a full background on who you are and what your site has to offer. Double click on the text box to edit the content and add all the information you want to share.
UX Storyboard
UX Storyboard
Brainstorm
Ways to sort and filter items that will be easiest for users to navigate?
Ways to sort and filter items that will be easiest for users to navigate?
Sketches
Conclusion: Provide all options, but emphasize on one main route that supports the main target group. The alternatives are for users who knows the products very well and wants to reach them quickly.
User Flow
This is your About section. Every website has a story and users want to hear yours. This is a great opportunity to give a full background on who you are and what your site has to offer. Double click on the text box to edit the content and add all the information you want to share.
UX Storyboard
Sitemap
This is your About section. Every website has a story and users want to hear yours. This is a great opportunity to give a full background on who you are and what your site has to offer. Double click on the text box to edit the content and add all the information you want to share.
Sitemap
Wireframe
This is your About section. Every website has a story and users want to hear yours. This is a great opportunity to give a full background on who you are and what your site has to offer. Double click on the text box to edit the content and add all the information you want to share.
Wireframe
Design
This is your About section. Every website has a story and users want to hear yours. This is a great opportunity to give a full background on who you are and what your site has to offer. Double click on the text box to edit the content and add all the information you want to share.
Branding
Branding Brief
Design System
This is your About section. Every website has a story and users want to hear yours. This is a great opportunity to give a full background on who you are and what your site has to offer. Double click on the text box to edit the content and add all the information you want to share.
User Interface
This is your About section. Every website has a story and users want to hear yours. This is a great opportunity to give a full background on who you are and what your site has to offer. Double click on the text box to edit the content and add all the information you want to share.
Homepage Strip
Selecting brands
Sort And filter
Highlight sections
1. Car diagram to make sure users are aware of part variations
Banners to direct users toward main flow
Contact information for wholesale prices
Prototype
This is your About section. Every website has a story and users want to hear yours. This is a great opportunity to give a full background on who you are and what your site has to offer. Double click on the text box to edit the content and add all the information you want to share.
Wireframe
Reflection
Challenges
2. Working with the subject matter that I'm not familiar with at all
​
1. Dealing with organizing complex items with confusing names - have to really spend time and test the flow to see if it will really work.
What I learned
1. The more accessible the design is, the better it is for all users
​
2. I learned a lot about auto parts - makes me confident in future projects that I'm ready to learn.