Project Summary
The Harman Press was a Union Printing Company with the inital goal to redesign their website to increase traffic, generate more leads, and ultimately boost sales. This project became a 3 step iteration project. For the first iteration, we came to the conclusion that the existing website failed to engage users effectively, lacked a user-friendly interface, and the dark palette created accessibility issues. The solution involved conducting thorough UX research, creating personas, ideating design concepts, conducting usability testing, and delivering a visually appealing and user-centric website design. For the second iteration we noticed more traffic but still very few conversions via our "get a quote" or "call us" CTA's so we wanted to improve the above with giving the ability for users to print to order feature where customers could easily place an order of their current design or create a design online. The latter was very successful, we got a lot positive responses so for our third iteration we wanted to focus on increasing or online competitive edge with some our biggest rivals. Although our third iteration didnt make it live, please read the full use case below to see the approach we had taken.
Problem Summary
The Harman Press's Union Printing Company's website was outdated and did not effectively attract and engage its target audience. The primary usage was initially set as corporate website to support sales and customer service teams through either sales quotes or calls. The lack of user-friendly features and a visually appealing design resulted in low website traffic, which directly impacted lead generation and sales. In addition to this, it was not responsive or SEO optimized.
Please view figma version of the original website here*Please note due to the age of this project, the original version of this website may no longer be available online so it has been recreated in Figma. Therefore some links, images, and other elements might appear broken.
Solution Summary
The solution involved a comprehensive redesign of the website to address the identified issues and achieve the company's goals. By improving the user experience and enhancing the website's visual appeal, we aimed to attract more visitors, increase conversions, and ultimately drive more sales for the Harman Press's Union Printing Company. We did see a significance growth for organic traffic, calls and overall sales increase the first year. A second iteration of the website was being worked on to compete with bigger online retailers.
-
Role
Lead developer, Senior UX/UI Designer
-
Team
Me (dev/designer), IT Manager, CEO, & Print Manager
-
Client
Harman Press
-
Duration
About 3year (12 quarters)
-
Tools
figma
Adobe XD
Wordpress
Photoshop
Illustrator
Premiere Pro
Indesign
-
Website URL
www.harmanpress.com
Read the Whole Use Case below
*Please note due to NDA agreements some of the actual information shared below might have been slightly or completely altered to respect such agreements.
The Beginning!
I initally started working at the Harman Press as a Developer which later then moved into a UX/UI position. The goal in the beginning was to simply manage the main parent website as well as managing the "Promotion Ticket System" which involved manually creating promotional tickets that radio agencies would order for new film promotions and giveaways.
Chapter 1
Empathize
Empathize summary goes here
Research
Competitor Analysis:
A thorough analysis of the competitive landscape within the printing industry was undertaken, focusing on direct and indirect competitors of The Harman Press. By studying competitors' websites, we gained insights into industry standards, best practices, and opportunities for differentiation. The analysis revealed that some competitors had visually appealing websites with modern designs, while others excelled in providing user-friendly features and functionality. This allowed us to identify areas where The Harman Press could stand out and provide a unique value proposition to its customers.
Key Findings:
Through the research process, several key findings specific to The Harman Press emerged. It was observed that potential customers faced challenges in finding relevant information on the existing website, leading to frustration and a high bounce rate. Additionally, users expressed dissatisfaction with the slow page loading times, which hindered their browsing experience. Clear calls to action were lacking, making it difficult for users to navigate the website and initiate the desired actions.
User Interviews and Surveys:
To gain further insights, user interviews and surveys were conducted among The Harman Press' existing and potential customers. This qualitative and quantitative research method allowed us to gather direct feedback on their experiences, preferences, and pain points. Users expressed a need for streamlined online ordering processes, personalized customer support, and a showcase of the company's expertise and successful projects. The findings from these interviews and surveys played a pivotal role in shaping the design decisions for the new website.User Needs and Goals:
The research phase helped uncover the specific needs and goals of The Harman Press' target audience. Users were looking for a seamless online experience with intuitive navigation and clear information architecture. They desired quick access to printing services, pricing details, and samples of the company's previous work. Understanding these needs and goals allowed the me to prioritize features and functionality that directly addressed them.
By conducting comprehensive UX research, including competitor analysis and gathering insights from user interviews and surveys, we gained a deep understanding of The Harman Press' target audience. These findings formed the basis for creating accurate personas, generating innovative design concepts, and refining the website to meet the specific needs of The Harman Press' customers.
User Journey Flows
Personas
Michelle
- Demographics:
- Name: Michelle
- Age: 38
- Gender: Female
- Occupation: Marketing Manager
- Education: Bachelor's in Marketing
- Location: Urban area
- Income: Upper middle class
- Quote:
"As a marketing manager, I need a printing company that can handle our large-scale printing needs and deliver top-notch results on time."
- Bio:
Michelle is a skilled marketing manager working for a medium-sized company. She oversees various marketing campaigns and frequently requires large quantities of printed materials for trade shows, events, and direct mail campaigns. Michelle is looking for a printing partner that specializes in bulk printing, offers a quick turnaround time, and consistently delivers high-quality prints. She values reliability and needs a printing company that can accommodate tight deadlines for her marketing initiatives.
- Motivations:
- Specializes in bulk printing orders
- Quick turnaround time
- Reliable and timely delivery
- Ability to meet tight deadlines
- Frustrations:
- Limited selection of paper stocks
- No live chat support on the website
- Mobile responsiveness can improve
Carla
- Demographics:
- Name: Carla
- Age: 32
- Gender: Female
- Occupation: Graphic Designer
- Education: Bachelor's in Graphic Design
- Location: Urban area
- Income: Moderate
- Quote:
"Design is my passion, and I need a printing company that can bring my creations to life."
- Bio:
Carla is a talented graphic designer who works for a creative agency. She has a keen eye for aesthetics and frequently collaborates with clients to create visually stunning marketing materials. Her goal is to find a reliable printing company that can deliver high-quality prints, offer quick turnaround times, and provide personalized customer support. Carla loves exploring new design trends and is always on the lookout for a printing partner that can bring her artistic visions to reality.
- Motivations:
- High-quality prints
- Quick turnaround times
- Personalized customer support
- Showcase of successful printing projects
- Frustrations:
- Difficulties finding relevant information
- Slow page loading times
- Unclear calls to action
- Limited customization options
Bryan
- Demographics:
- Name: Bryan
- Age: 40
- Gender: Male
- Occupation: Small Business Owner
- Education: Bachelor's in Business
- Location: Suburban area
- Income: Middle class
- Quote:
"As a business owner, I need a printing company that can provide reliable and cost-effective solutions for my marketing collateral."
- Bio:
Bryan is the owner of a small business specializing in event planning. He often requires various marketing materials, such as business cards, brochures, and flyers, for promoting his services. Bryan is looking for a printing company that offers customization options, competitive pricing, and reliable delivery. He values convenience and wants a straightforward online ordering process to save time and effort. Bryan seeks a printing partner that can meet his business needs and deliver professional-quality prints for his marketing campaigns.
- Motivations:
- Cost-effective solutions
- Convenient online ordering
- Customization options
- Professional print quality
- Positive customer reviews
- Frustrations:
- Higher pricing for certain products
- Slow customer support
- Limited print finishes available
Ideation
-
Ideation Kick-off
The ideation process began with a kick-off meeting, including The Harman Press CEO, VP, and other internal team managers. The primary goal of this meeting is to understand the current website's pain points, business objectives, target audience, and the desired outcomes of the redesign. Clear objectives got set, such as improving user engagement, streamlining the ordering process, and showcasing the company's expertise through successful projects.
-
Competitor Analysis
I conducted an in-depth competitor analysis, focusing on other printing companies and related graphic design service providers. This analysis helps identify the unique selling points and competitive advantages of The Harman Press compared to its competitors. It also reveals design trends and innovative features that can be incorporated into the new website to stand out in the market.
-
Brainstorming Sessions
Collaborative brainstorming sessions where held, involving sales, and customer service representatives. The team explores creative ideas to improve user experience, such as adding intuitive navigation, integrating a live chat support system, and creating a user-friendly pricing calculator. Ideas are sketched on whiteboards and discussed to encourage a diverse range of concepts.
-
Mood Boards and Inspiration
Mood boards where created to establish the visual direction of the new website. I initially collected images, colors, and typography that reflect The Harman Press' brand identity and resonate with the target audience, which includes designers, small business owners, and marketing professionals. The mood boards ensure that the website's aesthetics align with the company's values and industry positioning.
-
Sketching and Wireframing
Sketches and wireframes where created based on the ideas generated during brainstorming sessions and inspired by the mood boards. Wireframes focus on the website's structure, content hierarchy, and layout, with an emphasis on clear calls to action, easy navigation, and information accessibility. These wireframes act as the blueprint for the website's design and functionality.
-
Prototyping
From the wireframes, I created interactive prototypes that simulate the user experience. These prototypes allow CEO, VP, and other managers to interact with the website and provide valuable feedback. The prototypes showcase features like sample order processing, testimonials display, and interactive elements to engage users effectively.
-
Design Iteration and Refinement
Feedback from Managers and user testing sessions are gathered to iterate and refine the design concepts. I then make improvements based on usability findings, ensuring that the new website caters to user needs and addresses potential pain points. Changes are made iteratively to align the design with the project goals and objectives.
-
Design Decision-Making
Design decisions are made collaboratively with The Harman Press CEO and decions makers. The focus is on enhancing user experience, improving lead generation mechanisms, and optimizing conversion paths. Decisions may include selecting a visually appealing design, implementing responsive layouts for mobile users, and using persuasive visual elements to drive conversions.
-
Presentation and Feedback
The finalized design concepts are presented to The Harman Press CEO and managers for approval. Feedback is gathered, and any necessary adjustments are made to ensure the website's design aligns perfectly with the project's goals. I seek to strike a balance between creativity, user needs, and business objectives.
Ideation Images
Testing
-
Test Planning and Prototyping
During the testing phase of The Harman Press website redesign, I focused on evaluating the usability, functionality, and overall user experience of the new website. The primary decision-makers involved in the process were the CEO, VP, and other department managers, who provided guidance and feedback throughout the testing phase.
I began by outlining a comprehensive test plan, defining the testing objectives, and selecting the target audience based on user personas developed earlier in the project. The plan included the test methods, such as usability testing and A/B testing, and established the key performance indicators (KPIs) to measure the project's success. Prototypes created during the ideation phase were utilized for initial testing and gathering valuable user feedback.
-
Usability Testing
Conducting usability tests was a crucial step to ensure the website's user-friendliness. I observed real users as they interacted with the website prototype, assigning them specific tasks like finding printing services or placing sample product orders. Valuable feedback, user behavior, and pain points were carefully recorded to identify usability issues, navigation challenges, and design inconsistencies.
-
A/B Testing
To optimize the website's effectiveness in meeting the project goals, I conducted A/B tests to compare different versions of elements like landing pages and call-to-action buttons. These tests allowed me to determine which variants performed better and contributed to higher conversion rates and lead generation.
-
Performance Testing
Ensuring optimal performance was a priority. I conducted performance tests to evaluate the website's loading speed, responsiveness, and stability under different conditions. Tools like Google PageSpeed Insights and Lighthouse were used to assess the website's performance. This step aimed to optimize loading times and guarantee a smooth user experience across various devices.
-
Cross-Browser and Device Testing
To achieve consistency, I performed extensive cross-browser and device testing. This ensured that the website appeared and functioned seamlessly across different web browsers and devices, including desktops, tablets, and smartphones.
-
Accessibility Testing
Inclusivity was essential in the redesign process. I conducted accessibility testing to ensure that the website was usable by people with disabilities, complying with standards such as Web Content Accessibility Guidelines (WCAG).
-
Beta Testing and User Feedback
Before the final launch, I engaged a limited group of beta testers from the target audience. Their valuable feedback allowed me to make further refinements and address any last-minute issues, resulting in a polished and user-centric website.
-
Iterative Testing and Refinement
Throughout the testing phase, I iteratively refined the design based on the findings from various tests, incorporating user feedback to optimize the user experience and meet the project's objectives.
-
Final Review and Sign-off
Finally, I presented the fully tested and refined website to the CEO, VP, and managers for their review and approval. They ensured that the website aligned with the company's brand identity and met their expectations for delivering an exceptional user experience.
Image Section
Delivery
After incorporating feedback from user testing, the finalized website design was implemented. The redesigned website featured improved navigation, clear and compelling calls to action, optimized page loading times, and a visually appealing layout. The final delivery included design assets, style guidelines, and documentation to facilitate the smooth development and deployment of the website.
By implementing the redesigned website, The Harman Press successfully achieved its goal of gaining more traffic, generating leads, and ultimately increasing sales. The user-centric approach ensured that the website provided an enhanced user experience, leading to improved engagement and conversions.
Image Section