Allstar Packaging Corp.
Website Revision
Problem: The old website is outdated and inconvenient for customers to request samples/quotes.
Goal: Create a smooth user experience without changing the structure so old customers don't need to adapt to a new sitemap.
Project Overview
The client:
Allstar Packaging Corporation provides premier packaging components for the dynamic beauty and personal care industries. Customers can browse the website for products and request quotes or samples.
The problem:
-
The website was created 10+ years ago and the style was outdated.
-
Customers were confused which products are Custom Orders and which are In-stock.
-
To request for samples/quotes, customers had to type all details in a contact form or in an email, which was time consuming.
My role:
UX/UI designer/researcher, developer
Project duration
4 months
Understanding the Client &
their Customers
Allstar's goal
Improve SEO and user flow.
Update website UI to current trends while maintaining the branding style.
The customers' goal
Know if the product is In-stock or Custom Order. Products on the old website had not been updated and the only the in-stock items were categorized.
​
We asked what the customers liked about Allstar's old website, and their feedback was that the layout is similar to a printed catalog, making it easy to view. They are happy that there are no hidden navigations such as dropdown menus.
Research
Competitive analysis
I worked closely with Allstar Packaging Corporation's co-founder and sales manager. They provided me two competitor websites for inspiration:
ABA Packaging Corporation – UI
Minimalistic color palette, strong style.
APC Packaging – Features (Filter, Bag)
-
Filter option – easy to find product by size/material etc.
-
Quote bag – like a shopping site, customers can add multiple items to their bag and request for quotes
Sitemap
The sitemap will be remain the same so old customers wouldn't need to adapt to a new website structure. There will be extra features/information added to some pages to improve usability.
Wondering what "In-stock" in the sitemap means?
​
There are two stock options:
-
Custom Order: Every product can be custom ordered (customize color and print etc.) from the factory in China.
-
In-stock: A few selections are available from Allstar's New Jersey warehouse. It can be shipped out immediately.
​
Maybe you've seen on a shopping website before: Amanda Dress in red is available in stores, but the green colorway can only be ordered online. That's because they only have stock in their warehouse. Just like Custom Order and In-stock products. Ta-da! Makes sense now? ;)
​
Website – Before and After
Homepage
Before: The old Homepage also served as the About page. The texts were overwhelming.
​
After: The Homepage and About page are separated. The new homepage is more engaging and announces current events/new products.
Before
After
Products Pages
Before: To find certain products, customers will have to scroll through the entire page.
After: With the filter installed, customers can easily view stock options and narrow down their search by other categories such as size and material.
To improve SEO, all images have alt text and products have tags (Like social media, #bottle, #acrylic. They are not visible on the webpage but increases search visibility).
Before
After
Quote/Sample List Feature
Before: To request for samples/quotes, customers would have to type out all of the product info in the contact form or in an email.
​
After: On the new website, customers can add multiple products of interest to the Sample/Quote List and submit a single form (similar to a shopping cart). This method saves time and reduces missing information (ex. customers will be asked to select Fill Size/Order Quantity before adding the item to the List).
Before
After
It's a wrap!
Check out the new website
Handing off the project: This website was built on Squarespace, which is Allstar's preferred web host. There are some restrictions with style and page layout, a lot of CSS/Javascript were applied to acheive the stakeholders' design vision.
You bet it complicates editing!
I don't know which lovely Allstar employee will be taking over website maintainance. But to make life easier, I consolidated all code with explanation in a Google doc and made some tutorial videos for the complicated ones. It's important to me the successor has all the info/tools they need to maintain a good website.
What I Learned
I had the opportunity to learn how to code HTML, CSS, and Javascript. Code used to scare me, but now I find it very interesting and would be open to delve deeper!
​
I enjoyed communicating with Allstar's team and learning from people who have 20+ years of experience in the packaging industry. I have offered UI/UX web consulting for different fields such as restaurant, jewelery, and home textiles. Different audiences react to the same web design very differently. While I could adopt trendy UX designs and components to Allstar's website revision, the final decision came down to "Would the customers understand this button/layout? Would it be too complicated?".
​
We considered the classic question "How would old customers react to the new design?" And as we all know, people don't like change. Which is why we didn't alter the header format or add a cookie consent banner.
​
Another thing I love about this project is the people I work with! It's wonderful to know that my skills contributed to a great company.
See the before and after of Photo Retouch and homepage designs I did for for this project.