top of page
logo guideline-16.png

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.

iMac Pro Front View Mockup.png

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.

vecteezy_quotation-marks-set-for-text-is

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

vecteezy_quotation-marks-set-for-text-is

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

vecteezy_quotation-marks-set-for-text-is
vecteezy_quotation-marks-set-for-text-is
-global-optical-sorter-market.webp

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.

Th
ere 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:

  1. Could you please tell me about the company you work for or the nature of the business that it's involved in?

  2. What kind of information would be most attention-grabbing on the landing page for clients?

  3. What specific product information do clients need on the official website?

  4. What are the best ways to promote a startup company on its official website?

  5. How can the company connect with its customers effectively?

  6. 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:
 

  1.  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

Group 920.png
Group 921.png

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.

customer journey-04.png

DEFINE

Defining the Problem and Goals for the Design.

By developing 4 "How Might We" questions, I established a framework for my solutions.
 

  1. 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?​

  2. 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?

  3. 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?​

  4. 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.

网站脑图-结构参考-01.jpg

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.

joysort workflow.png

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

JOYSORT-graphic-02.png

Typography

font.png

Primary Colors

primary colors.png

Secondary and Accent Colors

secondary colors.png

Components

Button

button.png

Icons

icons.png

Dropdown menu

dropdown menu.png

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.

Web 1280-home – 1.png
Web 1280-home.png

Keeping Menu Options to the Right

  • To ensure a cleaner and more user-friendly layout, consider keeping the menu options to the right.

Web 1280-menu – 1.png
Web 1280-menu.png

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.

Web 1280-home.png
Web 1366 – Home-menu.png

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

Web 1280-why.png
Web 1366 – Why.png

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.

Web 1280 – product index – 1.png

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.

Mobile mockup.png

TAKEAWAYS

Reflections on UX Design: My Journey with Joysort

I gained valuable insights from my second UX project by going through the entire UX process and experiencing it firsthand. It's not just about delivering the final product, but the knowledge and skills I acquired through the journey.

Emphasize Iteration in The UX Process
Through multiple iterations and exploring different options, I discovered the importance of purposeful design and the value of iterating as often as possible. Next time, I'll be sure to follow WCAG guidelines more closely.

Effective Communication With Clients
Effective communication with Joysort team is crucial for developing the best user experience. During the development process, it's important to consider different opinions from the Joysort team and work collaboratively to find the best design solutions that provide real practical value for users.


The Importance of Understanding Technical Limitations
To create successful designs, To To create successful designs, it's important to understand technical limitations before starting. This saves time by considering the feasibility of individual features before integrating them. 

bottom of page