Berlin Packaging is the World’s Only Hybrid Packaging Supplier offering a range of packaging products and services designed. They are serving business from fortune 500 to startups. First UX/UI e-commerce project. The goal is to improve the e-commerce and web experience for a World’s Only Hybrid Packaging Supplier.
May 2018 – October 2018
Berlin Packaging LLC, Chicago, Illinois
UX/UI was working with Stakeholders
Sketch, Web Prototype, Navigation, E-commerce, Visual Design, Website Redesign, development
Not correctly using the space or having a visual weight. No mega menu or dropdown menus. Separate shopping from the content menu and making it more visible to the user. Not correctly using icons and designing for responsive.
The requirement was to redesign the navigation without changing what’s already there. Use a button for the shop products dropdown. I wanted to use the whole space. I made the navigation full width. Then I separated the left column with the logo on the far left and the content pages link and shop product button.
The navigation was split into two levels, the top that focuses on shopping and the bottom that focuses on content.
Due to stakeholders’ requirements, the shop product name was changed to shop now. Shop now had to be a button with no indication telling the user that it’s a mega dropdown menu. The content link should not be a dropdown.
The problem is that the homepage only focuses on programs and services. Does not include the new shopping experience from merging Freund + Berlin Packaging into one of website.
At first, the Stakeholders wanted me to show our customers that they can now shop on the website but still focus on driving content.
After meeting with the owner, he mentioned that he wanted to have two paths for the user when the user lands on the homepage, focusing on product and another that focuses on content. My idea was to divide the hero banner into two. The middle section on the page would focus on shopping, and the bottom would focus on content.
My first wireframe had the slide in/out to make a selection. I love the idea of taking the user on a step-by-step selection journey. I thought the slider was a great idea because it focuses on that selection, and it’s easy to add extra information to help make a choice.
The problem not being able to show the real-life price as the user make their choices.
My solution was to do the slide in/out until the user reaches “the quantity.” They would have to into the quantity, and the price will change below. The development company told us that it would cost and take a lot longer to build this process. I had to come up with another solution.
To keep the look and feel consistent, I created a web style guide with an icon library.
traffic increase as of February 2019
The redesign was challenging. Mainly because I had no data and the wrong approach, it was hard to support my cause. Knowing what I know now, I would’ve done the Information Architecture approach.
Overall this redesign taught me the importance of user research, data, how to follow specific guidelines, and how to design and create end-to-end experience.