Overview
Printivity is an online printing company that provides a wide range of printing services, including business cards, flyers, brochures, posters, and more. They offer high-quality printing with quick turnaround times and competitive pricing.
Printivity is known for its user-friendly website interface and convenient ordering process, making it a popular choice for individuals and businesses looking for professional printing solutions.
My contribution
Product strategy
User research
Product design
The team
1 × product designer
2 × engineers
Year
2023
01. Process
Breaking down the project
Printivity approached me with a request to revamp several of their web pages, which were still adhering to an outdated design system. This project involved a comprehensive overhaul to modernise the look and feel of their online presence, ensuring alignment with contemporary design trends and enhancing user experience.
Collaborating with the internal team
Throughout the project, collaboration was paramount. I closely collaborated with both the developers and the client to ensure that our efforts were in sync with the overarching company goals. This collaborative approach facilitated clear communication, allowed for the integration of valuable feedback at each stage, and ensured that the final product not only met but exceeded expectations. Working together as a cohesive team, we were able to navigate challenges effectively and drive the project towards successful outcomes.
Building on strong foundations
To initiate this project, I adopted the principles of a solid Design System, laying a robust groundwork for the redesign process. Using Figma, I meticulously organized all the content, establishing a cohesive structure that would serve as the framework for the updated web pages. By adhering to good Design System practices, I ensured consistency, scalability, and efficiency throughout the design process. The organization of the design system included:
Annotations: Crucial for handoffs, annotations provided detailed explanations and instructions for developers, ensuring seamless implementation of design elements.
Atoms: These small components, encompassing typography, color, and icons, formed the foundational building blocks of our design system, facilitating consistent visual elements across the platform.
Molecules: Components such as buttons, tooltips, and breadcrumbs were grouped as molecules, representing larger but still self-contained elements within our design system.
Organisms: Comprising more complex elements like input fields and modals, organisms brought together multiple molecules to form cohesive and functional units within our interface.
02. Experience first
With the groundwork firmly established, our focus now shifts towards the comprehensive integration of our meticulously crafted design system across all pages. This pivotal phase marks the culmination of diligent planning and meticulous execution, as we harness the full spectrum of our design components to elevate the user experience to unprecedented levels of sophistication.
03. Hands-on!
Trying out the new Design System
With the groundwork firmly established, our focus now shifts towards the comprehensive integration of our meticulously crafted design system across all pages. This pivotal phase marks the culmination of diligent planning and meticulous execution, as we harness the full spectrum of our design components to elevate the user experience to unprecedented levels of sophistication. Prepare to witness the seamless fusion of form and function as we embark on this transformative journey, where every detail is meticulously curated to reflect our commitment to excellence and innovation.
Responsiveness
As users engage with Printivity's website across various screen sizes and browsers, adaptability becomes paramount. Our analytics reveal a split user base, with half accessing the site via desktops, predominantly at a resolution of 1440 pixels, and also a good amount of users interacting in all types of phones mobile phones.
In light of this, our focus remains on delivering a seamless experience across all devices, prioritising accessibility and functionality irrespective of the platform.
04. Conclusion
Key takeaways
In the dynamic realm of design, collaboration emerges as the linchpin, fostering synergy among designers, developers, and stakeholders alike. Effective communication, particularly with our esteemed developers, demands meticulous attention and thoughtful annotation – an indispensable facet in our creative process. Recognising its paramount importance, we dedicated specialised components solely for annotations, illuminating intricate behaviours and showcasing diverse inspirations seamlessly integrated throughout the site.
