
UX/UI DESIGN FOR
JOYSORT
A responsive official website design for an AI fruit sorter company
CLIENT PROJECT
RESPONSIVE WEB

PROJECT OVERVIEW
As a crucial member of the Joysort team, I was tasked with developing a responsive official website and crafting a distinct brand identity to showcase the company’s expertise in providing AI sorter solutions for fruits. Joysort is a cutting-edge company that aims to inform clients about their innovative offerings

My Role
UX/UI and Visual Designer
I led the JOYSORT website design, conducting user research and collaborating effectively with engineering to complete the website.

Duration
4 weeks

Desgin Tools
-
Adobe XD
-
Illustrator
-
Photoshop
THE CHALLENGE
Creating a Functioning Website for Joysort in a Crowded Market
Building a website for Joysort, a start-up technology company, comes with its own set of challenges, including the need for a user-friendly interface optimized for various devices and browsers that functions effectively. In a crowded marketplace, it's important for Joysort to stand out and differentiate itself from other companies offering similar products and services. Additionally, the website must have an attractive and cohesive design that accurately represents Joysort's brand identity and messaging.
THE SOLUTION
Developing a User-Friendly, Effective, and Cohesive Brand Identity Official Website
Brand Value Proposition
-
Developing a clear and compelling value proposition that differentiates Joysort from competitors in the crowded marketplace.
Brand Consistency
-
Ensuring that the website's design, messaging, and content are consistent with Joysort's overall brand identity. This includes using the company's logo and color scheme, as well as conveying the brand's tone and values through the website's copy.
Prioritizing Customer Service and Contact
-
Adding clear and prominent contact information on the website, including a phone number, email address, and contact form.
-
Joysort can establish a strong relationship with its customers, build trust and loyalty, and ultimately drive sales and growth.

SECONDARY RESEARCH
AI Sorter Solutions For Vegetable And Fruit Market Scope
According to "AI in Agriculture Market" by Markets and Markets, key players in the industry include IBM, Microsoft, and John Deere. "Global Food Sorting Machines Market" by Mordor Intelligence also highlights top players such as TOMRA Systems and Buhler AG. These reports offer valuable insights into the AI food sorter market trends, opportunities, and challenges, providing critical information for businesses looking to enter or expand in this industry.

Growing Focus on Automation to Increase Productivity in Various Industries Has Fueled Market Growth

Vegetables & fruits sub-application is expected to dominate the optical sorter market for food application throughout the forecast period



References:
-
https://www.researchandmarkets.com/reports/5229540/global-optical-sorter-market-with-covid-19-impact?utm_source=CI&utm_medium=PressRelease&utm_code=3f76z4&utm_campaign=1719332+-+Global+Optical+Sorter+Market+Report+2022%3a+Opportunities+in+the+Increasing+Adoption+in+the+Food+Industry+for+Food+Processing+Activities+&utm_exec=como322prd
-
https://www.prnewswire.com/news-releases/global-optical-sorter-market-report-2022-opportunities-in-the-increasing-adoption-in-the-food-industry-for-food-processing-activities-301578106.html
DISCOVERY AND RESEARCH PHASE
Seek To Understand Customers' Problems, Motivations, And Goals
COMPETITIVE ANALYSIS
I chose direct 3 competitors, they all offer food sorting solutions for various industries.
There are 2 major findings from this analysis:
-
Building a strong brand identity is crucial for being memorable.
-
To promote a company's trustworthiness, it is important to provide clear product information and processing details.

USER INTERVIEWS
As Joysort is a startup company, I conducted interviews with individuals who have experience starting a business or working with similar businesses as clients. The purpose was to understand what functions they would require on the official website and how best to promote their business.
RESEARCH QUESTIONS:
-
Could you please tell me about the company you work for or the nature of the business that it's involved in?
-
What kind of information would be most attention-grabbing on the landing page for clients?
-
What specific product information do clients need on the official website?
-
What are the best ways to promote a startup company on its official website?
-
How can the company connect with its customers effectively?
-
What type of customer service do clients expect and require?

THE MAIN INSIGHT
Building a Strong and Simple Website: Key for Startups' Success
Based on the trends in my affinity map, I summarized the information about building a website for a startup business/company, the pain points and needs of startup companies, and promoting products:
-
Strong Brand Identity
Startups need a website that is simple, clear and highlight attention-grabbing information, such as the company's unique selling points, key benefits, and success stories to differentiate themselves from competitors.
2. Customer Service
Customer service is a critical aspect of a startup's success, and clients expect prompt and personalized service through multiple channels such as email, phone, and social media.
3. Product Information
Clients need detailed and comprehensive product information to make informed purchase decisions, and startups should prioritize providing clear and concise product information on their website to build trust with potential customers and increase the likelihood of a sale.
EMPATHIZE
Understanding the User's Needs and Context.
PERSONA


CUSTOMER JOURNEY
I leveraged the insights from the interview and the user stories to create a customer journey. This helped me gain a deep understanding of the users' needs, behaviors, and pain points. Additionally, I was able to identify opportunities for improving the user experience and maximizing the website's potential for the success of the business.

DEFINE
Defining the Problem and Goals for the Design.
By developing 4 "How Might We" questions, I established a framework for my solutions.
-
How might we simplify the user experience of the Joysort website so that customers can easily understand the benefits of the AI food sorting solution?
-
How might we provide clear and accessible information about the features and capabilities of the Joysort technology so that customers can make informed decisions about whether to use the service?
-
How might we improve the website's navigation and information architecture to make it easier for users to find the information they need and engage with our solution?
-
How might we streamline the customer service process to reduce wait times and improve response times?
IDEATE
Exploring Design Possibilities
INFORMATION ARCHITECTURE
Given the limited content of the start-up company, I created a preliminary sitemap based on their existing content and events. This allowed me to identify the pages that needed to be created, while also leaving room for future updates and additions.

PROTOTYPE & TEST
Create Visual Interfaces From Concepts and Test Functional Prototypes to Ensure User Needs Are Met And User Experience Improved
LOW-FIDELITY WIREFRAMES
Given the limited content of the start-up company, I created a preliminary sitemap based on their existing content and events. This allowed me to identify the pages that needed to be created, while also leaving room for future updates and additions.

UI STYLE GUIDE
Joysort leverages state-of-the-art AI technology to facilitate the product development journey of global enterprises. The brand’s logo, showcasing the touch rolls of the AI jujube sorting machine, underscores its innovative approach. With its use of royal blue, Joysort conveys intelligence and reliability, establishing itself as a mature and trustworthy brand.
Logo

Typography

Primary Colors

Secondary and Accent Colors

Components
Button

Icons

Dropdown menu

USABILITY TESTING of LOW-FIDELITY WIREFRAMES for INTUITIVE USER EXPERIENCE
To optimize the user experience, I conducted two rounds of usability testing focused on evaluating the intuitiveness of user flow, layout, and features. The initial low-fidelity wireframes were tested in the first round, while the second round evaluated the digital wireframes and filter through moderated remote testing in Maze
Improving Website Functionality and Navigation
-
Fix the navigation bar's position to remain visible during scrolling.
-
Incorporate the company's brief and update events onto the home page.


Keeping Menu Options to the Right
-
To ensure a cleaner and more user-friendly layout, consider keeping the menu options to the right.


REVAMPING WEBSITE DESIGN AND CONTENT: INSIGHTS FROM THE SECOND USABILITY TESTING
During the second usability test, the high-fidelity prototype was evaluated, revealing issues with the website's content and design. While the website emphasized the company's characteristics, it lacked separate product classification introduction content. Additionally, the layout design was not user-friendly, and the background design had problems when engineers built a responsive website. The resulting findings highlighted areas that need improvement.
Homepage Optimization
-
Increase the visibility of product images and company profile on the homepage for better customer understanding of the business.
-
Highlight the company's product update activities on the homepage to showcase a dynamic and active business.
-
Categorize the company introduction and value under "about Joysort," and product solutions under a separate category for easy navigation.
-
Place the Contact section at the bottom of the homepage for easy access in case customers have any questions after browsing.
-
Enhance the navigational features of the footer to improve user experience.


Elevating User Experience with Enhanced Website Navigation and Layout
-
The page layout has been updated to remove complex graphics from the background, creating a more user-friendly reading experience. This update has also improved the website's adaptability to responsive web development.
-
A breadcrumb trail has been added to every page to help users keep track of their location and maintain awareness throughout their browsing experience


Enhancing Solution Pages for Improved Product Presentation and User Experience
-
Categorize solutions and enhance product introductions with videos and pictures to provide customers with more comprehensive information.
-
Simplify page layout by eliminating complex graphics from the background, improving the website's adaptability to responsive web development, and enhancing the user's reading experience.
-
Strategically position the Contact section at the bottom of the page to ensure customers can quickly access it if they have any questions or concerns.


Revamping the Contact Page for Faster Solution
-
The page layout has been simplified by removing complex graphics from the background, resulting in a more user-friendly reading experience and increased adaptability to responsive web development.
-
The improved customer contact form allows representatives and sales to easily classify and prioritize customer questions, leading to quicker resolution and better solutions.


OUTCOME
The Impact of Joysort's Responsive Website Redesign
-
Placing the Contact section at the bottom of the homepage and enhancing the footer's navigational features reduced navigation time by 20%.
-
Categorizing solutions and enhancing product introductions with videos and pictures increased product inquiries by 36%.
-
The improved customer contact form resulted in 80% of test participants finding the new contact page to be clearer and more informative, while sales reported that the issue type classification feature helped them to quickly resolve cases.

