A new easy wayto customize your prints
With an increase in demand for business printing products, there's an opportunity to explore new solutions to offer a responsive and cohesive experience across any connected device to create custom graphic designs.
Today, multiple retailers are dependent on third-party vendors to power their website's services that limit the end-user experience to customize the overall functionality, layout, and availability in various platforms based on their respective customers' needs.
The Challenge
The graphic design platforms have been a huge success that allowed multiple retailers, including VistaPrint, Costco, Staples, and Sam's Club, to offer an online printing service for their clients, capable of customizing all kinds of marketing stationery. However, most of these tools face new challenges and limitations that affect the overall customers' experience— the lack of an optimized mobile service, accessibility features, and a proper cross-platform interface forces the users to rely on a single desktop browser experience.
The Concept
This project aims to simplify marketing prints' customization by offering a more intuitive and inclusive graphic design platform that helps people create unique products for their business on multiple devices.
The Tech
To kick-off this project, it was essential to define our goal, objectives, and MVP. I wanted to incorporate all the business requirements and determine what type of tool we wanted to create, considering that the current graphic design platforms rely on multiple media features and photo editing tools.
Business Printing
Photo Editing
Understanding the Workflow
I'm a firm believer that it's worth spending enough time researching before jumping into any fancy designs.
At this stage, it was crucial to understand how the entire website and graphic design builder interact with different products. In this case, choosing a particular product configuration to be displayed inside the builder and how a user could move any text, image, or icon component were vital elements to study and analyze.
Personas
As a team, we defined different customer types to understand their needs and motivations.
User Journey
Another good exercise that is always helpful in my creative process is to capture out how users feel while navigating these websites. This practice allowed me to share significant insights with the rest of the team in a more precise and simplified format.
Heuristic Analysis
As a starting point, I wanted to know how the graphic design platforms stand against other lead retailers from a performance, assortment, and design perspective. Then, I was in an excellent spot to study the industry best practices and assess the features, tools, and services to be optimized based on the users' needs and industry recommendations.
Data Analysis
One of my best allies to conduct research is the data that I put together from FullStory. By analyzing this information, I identified some of the users' pain points and learn how users actually select a product, customize their design, and then place an order.
Data Analysis
One of my best allies to conduct research is the data that I put together from FullStory. By analyzing this information, I identified some of the users' pain points and learn how users actually select a product, customize their design, and then place an order.
User Flows
This documentation helped me to visualize the global purchase flow and understand how the graphic design platform stands in the overall experience.
Competitive Analysis
An essential step of my discovery process was to spend enough time researching different companies that offer a customized printing service. I learned how customization and photo editing tools work differently, looking for an intuitive experience to determine a new standard behavior.
Design Strategy
After discovering how other platforms showcase their products and graphic design services, it was necessary to prioritize which key features will be part of the project. Once I had a clear idea of these tools' operation and the overall purchase flow that these companies offer, it was time to discuss these findings with the design, management, and development teams to compile a new list of opportunities, challenges, and new business requirements.
Our Design Principles
A good starting point in my creative process is to define the core pillars that will support the overall design considering that meaningful experiences require more than just quick wireframes and fancy designs.
User Experience
Usability
Accessibility
Responsiveness
Sketching
At this stage, it was the perfect opportunity to explore new ideas while having fun and collaborate with other teams to get the most appealing and viable solutions.
LoFi Wireframes
I had the chance to iterate different design proposals and analyzed various use cases to discuss with the rest of the design, management, and development teams.
Responsive Design
To make sure that I translated all our ideas across multiple devices, I created wireframes for both desktop and touch devices.
HiFi Prototyping
A critical milestone for this project was to develop high-fidelity prototypes to share how this graphic design platform would work and differ from the rest of the competitors.
Live Testing
Users are your best friends in terms of feedback and design choices. As a designer, I feel comfortable talking to other people and listening to their feedback. By the end of this activity, I found great value in collecting all their comments and final thoughts to improve the overall design.
Architecture Mapping
After compiling the feedback from the teams, users, and business representatives, the final design's goal was to provide a clean interface and only display in-context tools that the user will require based on a specific task. I decided to group all the tools and components into three main sections - Global Functions, Canvas, and Object controls - instead of displaying tools all over the screen.
HiFi Mockups
After running various design review sessions and usability tests, it was time to put together the final user interface mockups. At this point, I was able to leverage some components from an existing design system, visual library and optimize the page layout on each breakpoint.
A vital factor of this new graphic design platform was to reduce the margin of error to print the products correctly by offering a well-detailed preview of their content without leaving the builder.
For this final version, the team decided to go with a modern approach that will be visually attractive on desktop, iOS, and Android devices. We also redefined the color palette to highlight the platform tools, onboarding tips, and media content to improve users' learnability and usability.
Working with Accessibility
One of our core objectives was to create an inclusive tool so everybody could interact with it regardless of any physical impairment or disability. As part of our design process, the team considered the WCAG recommendations to offer an accessible tool across multiple devices. As a result of this implementation, the new graphic design platform is compatible with the OS readers, tab navigation, and keyboard inputs. Also, it uses a simple color palette to improve the contrast and readability of the content through a consistent and descriptive interface from a visual perspective.
The Outcome
To conclude this project, the team shared the final UX and UI documentation with the key stakeholders, including the creative director, product manager, product owner, and the rest of the development collaborators such as Front-End, Back-End, and the Release teams. Based on my professional experience as a designer, I consider this project fun and engaging. It allowed me to immerse myself in the printing business and reimagine how people could take their graphic designs to a new level. I'm proud that this new platform will allow people with different needs to design and print their online products using this digital service across multiple devices.
