JSL Foods Inc.
Case Study & Redesign
The purpose of this case study is to analyze how effectively JSL Foods communicates their products and capabilities as well as the effectiveness of the user interface elements on their webpage.
Overview
Role: UX/UI Designer, Conducted User Testing
Tools: Adobe XD, Adobe Illustrator, Loop11
JSL Foods Inc. manufactures and markets Asian noodles and wrappers, long goods pasta, and baked goods for food service and industrial customers. They also produce three nationwide brands that are available in retail stores: Twin Dragon, Fortune, and Amber Farms. The goals of their website, according to their Vice President of Sales and Marketing, Wayne Nielsen, are:
To communicate who we are and what we do
To communicate our products and capabilities
To show we are a resource for Culinary support
To show we lead in Food Safety, R&D and Innovation.
Problems
-
one of JSL’s goals for their website is to communicate who they are and what they do. JSL has multiple in-house brands, such as Twin Dragons and Fortune, but they also have a large-scale B2B manufacturing side to their business. Their industrial capabilities, which accounts for 20% of their yearly profits, are not featured at all on their homepage, and there are not any contact sales calls to action on their Professional Products pages.
-
The image carousel on the Homepage shows the user multiple brand names and images without offering any explanation. While, the image carousel on the Professional Products page shows images of noodles throughout the manufacturing process without any additional information. This could cause the user to be confused as to what company website they actually landed on, and the user could be confused about JSL’s capabilities.
-
Users have been trained to expect certain elements to be clickable whether it be buttons or images. When you go against those user expectations, the user can become confused. The JSL website has various items that look like buttons, but are not clickable. A user might think something has been broken and leave the site.
User Testing
In order to determine the validity of these problems, a usability study was conducted using eight participants that met the following criteria:
They have never purchased a JSL Foods product.
They did not previously know about JSL’s capabilities.
They have never tried to contact JSL Foods
Users were given the two tasks, and they were asked to indicate how strongly they agreed or disagreed with the four statements listed below:
Tasks:
Find JSL’s large scale manufacturing capabilities.
Find a way to contact a sales representative about manufacturing a product.
Statements:
Finding JSL’s manufacturing capabilities were easy.
Find a way to contact a sales representative about manufacturing a product.
I found it easy to contact a sales representative.
I know how to contact a sales representative about purchasing bulk products.
All users were instructed to begin on the homepage, and their tasks were determined successful if they completed the task on the correct page. Task 1 was successful if the user ended on the Industrial page, and task 2 was successful if the user ended on the contact page.
Findings
Task 1 Findings:
Statement 1 and 2 Findings:
Task 1 Conclusion:
55% of users either failed or abandoned the task to find JSL’s manufacturing capabilities. Users visited an average of 14.6 pages before either succeeding in, failing, or abandoning their goal. When asked whether or not they thought finding JSL’s manufacturing capabilities was easy, 44.4% of users disagreed with the statement and 22.2% of users strongly disagreed with the statement.
Task 2 Findings:
Statement 3 and 4 Findings:
Task 2 Conclusion:
22% of users abandoned the task to find a way to contact a sales representative. Users visited an average of 9 pages before either completed or abandoning their task. When asked whether or not it was easy to contact a sales representative, 50% of users strongly agree while 12.5% neither agreed nor disagreed and 37.5% disagreed. A common statement from users was, “This page says contact, but I don’t know if it goes to sales.”
Solutions
-
Placing information about JSL’s manufacturing capabilities directly on the homepage will prevent confusion. Currently, a user lands on the homepage and will view an average of 14.6 pages before discovering this information. A homepage should be a brief overview of what a company does and has to offer. In JSL’s case, that information shoud include their industrial capabilities, their three in house brands, and their company strengths. According to the Nielson Norman Group, one of the best practices for displaying contact information is to, “Provide the phone number and email address for a primary contact first, then list phone numbers and email addresses by department (sales, accounts, support, geographic headquarters, etc.)” Adding “contact sales” calls to action along with an individual contact form will increase the number of qualified leads and opportunities as well as decrease the user’s confusion as to who they are contacting when they fill out the current form.
-
Breaking apart the image carousels into four distinct sections increases JSL’s SEO opportunities while also providing the user with more information about their products, brands, and capabilities. This approach improves the efficiency of the user’s interactions, and allows the user direct access to the information they are looking for.
-
The Nielson Norman Group states that “animations that are repeatedly encountered are roadblocks to content and lengthen the amount of time to complete a task.” By removing the unnecessary animations the user will get to the content they are looking for faster and with less frustration. Animations that do not aid in the user’s comprehension of a task or element should be removed. It is also important to make elements that look clickable actually clickable. If an element looks like a button, it will attract the user’s attention unnecessarily. It would be best to use these elements to drive the user towards a desired task or page.
