Pioneer Packaging requested an update on their web presence. The feedback they were receiving from clients was that the current site looked as if the company were a small low budget printing facility. However, the actual clients that worked with Pioneer were actually Fortune 500 consumer product companies. The lead salesman informed me that he felt the current site was harming the company more than helping it.
• Project Lead - Individual Project
• Product Research
• UX/UI & Visual Design
• Front-End Development
User Surveys, Personas, Competitive Analysis, User Stories & Flows, Prototypes, Wireframes, User Testing, Visual Design, Front-End Development.
Adobe XD, Adobe Photoshop, Adobe Illustrator, Adobe Dreamweaver "Text Editor", & Webflow,
Approximately 7 weeks
Create a website for Pioneer Packaging that needed to look more modern compared to the dated non-responsive site that was currently being used. The company also wanted to use the site to help convert visitors to customers and to help the sales team as a tool instead of bringing brochures and other collateral items to the clients.
1. Better Call to Action
2. Responsive Layout
3. Modern Premium Look
4. To be used by the sales team instead of brochures and other collateral items.
That Pioneer Packaging needed a total over all for their current site. After taking the time to research their competition and target consumers, I understood the solution needed to be a site that was simple to navigate, responsive and would be used by well-educated business people. The site also had to be able to inform the user of what services Pioneer Packaging could provide them.
After analyzing the three main competitors, I was able to understand and empathize what a person was experiencing when they were looking for a single source paper board printer facility. Dee Packaging Solutions (www.deepaperbox.com) had a massive amount of information on their site but the site felt disjointed, as if sections were added at different times which caused it to look and feel different from other sections on the same site. On the other hand Accurate Box (www.accuratebox.com) was a modern and attractive site, however it was somewhat hard to navigate due to how much information was being provided. They even felt the need to use two navigation bars to house all the paths the user was being offered. The third site LallyPak (www.lallypakusa.com) had a nice parallax scrolling site, that did a good job quickly informing the user of their services up front ,however the look and feel of the site seemed uninviting and cold.
From the data collected, I created two User Personas to bring focus to the target audiences. This allowed me to pinpoint specific frustrations and problems as well as tasks and goals for Pioneer Packaging (www.pioneerink.com) to solve for their users. The first persona represented a successful businesswoman in her 30’s with a hectic day to day schedule. The second persona represented a male company owner trying to offer the very best to his customers while also expecting the very best from his vendors.
This is where I started to hone in on the functionality of the Pioneer website. The User Stories allowed the opportunity to prioritize the core functions of the app, so that the interface had the proper hierarchy and information architecture when I started building wireframes. Below are examples of higher priority user tasks that defined Pioneer website’s main functionality, along with lower priority tasks that rounded out the user experience. By fully flushing out the high-priority tasks and maximizing their efficacy was key to staying on track.
• Be able to learn what about the company’s services before I speak to a representative.
• Be able to get a quote or request info for my project with ease.
• Be able to see the work they have printed previously.
• Be able to see testimonials from previous clients.
• I want to work with an environmentally friendly company.
• I want to be able to see their site from my mobile phone.
I started by creating user flows of the three main competitors. I knew Pioneer only wanted a small site compared to what their competitors had, however I needed to understand exactly what the competitors were doing right and wrong on their sites. By doing this, it would help me create an effective and enjoyable experience for the end-user while hopefully leading them to contact the company.
By using Adobe XD more refined digital wireframes were created from the sketches. The look and feel needed to be simple, clean and modern with a strong call to action.
I quickly created sketches of options for - layout, consistency, and navigation to ensure the app stayed user friendly, these quick sketches allowed me to spend less time designing on the computer ultimately saving time.
Initially the brand was not supposed to be updated but when the client looked at their dated logo on the new modern prototypes, they requested a logo exploratory. The client mentioned the logo was the only thing they could see because of how out of place it looked within the layouts. While keeping in mind that the target users are well-educated and successful people who have a consumer packaging goods product that needs a paper board service, the logo needed to appear confident and efficient while having a bold look and feel.
The UI Kit was created to have elements and requirements to hand off to the developer. Hopefully this information will inform the developer of any specifications or restraints that are intended to follow from the design process and/or the clients approval. This can also result in a considerable amount of time saved for the developer due to less questions and rework.
Once the basic structure of the app was finalized, it was time to create a mockup that would test all the information from the previous research. In the mockup stage I developed the wireframes digitally by using Adobe XD to create the clickable prototypes. To make sure I was aligning with their expectations, two different looking index layouts were created for the client to choose from. I expected to give more options, however the client immediately selected one of the directions to move forward with. This was a great moment knowing I had successfully made the client happy with the direction so quickly.
This is the time to seek clarity on certain points that may not be clear on how the end user may be feeling about a process or the appearance of something you have created from the user interface. Three separate preference tests were conducted to receive user feedback on different design elements. The tested design elements were then edited on the mockup to reflect the users’ most popular choices, then another user test was performed on both platforms with the same previous users. Feedback was positive; all users felt like it was a much better experience.
This was the fun step. Creating the final look of the mobile and desktop designs were meticulous work, but finally validating my hypotheses about the visual design choices with actual users was even harder. Not only did I have to study how users used the app, but I had to defend some of my design choices because at times they were questioned and challenged in preference and usability tests. However, each revision I created helped to arrive at better iterations that struck closer to the mark of what www.pioneerink.com needed to become and the testers helped target weak spots in the design and usability.
Normally I would imagine most would not use the UX process for such a small website, however I found that the UX process was beneficial. For example, during the competitive analysis I was able to empathize and understand the journey that the end-user was experiencing. Initially going to www.pioneerink.com it felt as if it was a low budget printing facility and that the quality of work was subpar at best; even though Pioneer Packaging worked with Fortune 500 companies and provided their customers with exceptional quality and services. Another area of the UX process that I found imperative was duplicating the user flows of the three main competitors. Even though Pioneer’s competitor’s websites were not perfect, they did offer a great deal of information to learn from. They helped me create a better experience for the end-user by demonstrating examples of what to do or not to do.
