Professional

Berlin Packaging Website Redesign


Overview

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.

Berlin Packaging


Date

May 2018 – October 2018

Client

Berlin Packaging LLC, Chicago, Illinois

Role

UX/UI was working with Stakeholders

Task

Sketch, Web Prototype, Navigation, E-commerce, Visual Design, Website Redesign, development


Problem

  • Berlin Packaging wanted to combine its e-commerce website “Freund Container” with its corporate website, “Berlin Packaging.” 
  • Create a homepage that combines e-commerce with company info. 
  • Clean, elegant, and modern design while still keeping the Berlin Packaging branding.
  • Make its e-commerce site a “one-stop-shop” for buyers of packaging supplies
  • Attract, engage, customers of varying sizes, from startups to Fortune 500 enterprises.

Navigation Problem

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.

Old navigation

Berlin Original Navigation

Navigation Requirements

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.

Navigation final

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.


Homepage problem

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.

Homepage first solution

At first, the Stakeholders wanted me to show our customers that they can now shop on the website but still focus on driving content.

Homepage Final solution

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.


Product detail page first solution

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.

Product detail page Problem

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.

Product detail page final solution

  • Step by step selection
  • Total Price and Price Charts need to be visible.
  • Remove Slide-In/Out Menu until the user click on a button
  • Create the same functionality as the slide menu using a dropdown

Visual design

To keep the look and feel consistent, I created a web style guide with an icon library.

Berlin Packaging Web Brand Guidelines


Reflection

75%

traffic increase as of February 2019

Retrospective

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.


Selected Works