Role: Research, Redesign
Duration: 6 Months
Project: Toner Connect
Project Overview
As the UI/UX designer for Toner Connect, I spearheaded the redesign of the entire website and the toner-selling process. The project aimed to address user pain points, streamline the selling process, and improve overall user experience. By implementing new selling methods, enhancing navigation, and ensuring clear instructions. This project highlights the impact of user-focused design and collaboration on creating efficient and user-friendly digital experiences.
Tools: Figma, Adobe Suite (Photoshop, Illustrator)
My Role
Redesign the Selling Process:
- Simplified the selling options into three intuitive methods: form submission, photo upload, and inventory list addition.
- Focused on user-centric design to reduce friction and enhance the user experience.
- Incorporated user feedback to streamline the process and increase engagement.
Redesign the Entire Website:
- Implemented a cohesive and modern design to improve overall aesthetics and usability.
- Ensured the new design aligns with the brand’s identity and goals.
- Enhanced navigation and accessibility for a better user journey.
Problem Statement
Too many customer support tickets related to the toner selling process and low conversion rates.
Every day, around 30% of the support tickets were related to issues with the toner selling process. Our data also revealed that the conversion rate for this process was alarmingly low at approximately 35%, with a significant number of users abandoning the process midway. Based on the volume of support tickets and conversion data, we decided to conduct a usability test to understand user pain points and identify areas for improvement.
Usability Test and Pain Points
I conducted remote usability testing to identify user pain points and understand where users drop off during the toner selling process.
Afterward, I recorded observations, feedback, task completion times, and dropout points during the tests.
Research Findings
- Complex Process: Users found the process too time-consuming, especially when uploading large sets of toner lists.
- Lack of Awareness: Many participants were unaware of what types of toners were accepted, leading to frustration and drop-offs.
- Navigation Issues: Users struggled with navigation and often missed critical instructions, leading to incomplete submissions and support tickets.
- Technical Difficulties: Slow upload times and poor feedback mechanisms contributed to user dissatisfaction and abandonment.
Persona's
We outline key user profiles for Toner Connect. These personas capture,
- Users’ background
- Goals
- Pain points
- Motivations
Understanding these profiles guided our redesign efforts, ensuring the new platform meets diverse user needs and enhances the toner selling experience.
Wireframes
At the start of improving the selling process, I led brainstorming sessions filled with creativity and collaboration. Explored various ideas to enhance user experience and clarity. Sketches were crucial for visualizing and refining these concepts.
The resulting wireframes detailed the redesigned selling process, including form submission, photo capture, and inventory list upload. Each step was clearly annotated to serve as a blueprint for a seamless, efficient user journey, addressing pain points and boosting usability.
Design Solutions
🔆 Sell Toner in 3 Ways : We introduced three convenient methods to sell your toners
- Form Submission: Submit individual toner details through a simple form.
Users can select the brand, model number, quantity, and condition on the left side, with an option to upload photos for verification. A summary table on the right displays entered details, including options to delete entries. The “Add Item” button adds new entries, while “Back” and “Continue” buttons facilitate navigation. Clear guidance and intuitive layout ensure a smooth user experience.
2. Snap Photos: Take clear photos of toner boxes with visible product numbers and upload them.
This UI allows users to upload images of their toner boxes. It emphasizes that the more images provided, the more accurate the offer will be, and stock photos are not allowed. Users can upload a single photo showing the entire order as long as all product numbers are visible, with individual photos being optional. There is also a link for help with finding the toner model number.
3. Upload Inventory List: Upload your inventory list in .xlsx, .csv, or .pdf format
Upload the user’s inventory lists in .xlsx or .csv formats. The list should include brand name, model number, quantity, and item condition. It emphasizes that omitting details will delay processing. A link is provided for help with finding the toner model number.
🔆 What We Buy and Don't Buy: Clear Instructions
To ensure clarity at every step of the form submission process, we provide clear instructions on what types of toners we buy and don’t buy. Each step includes specific guidelines and examples to help users understand the criteria. This ensures users submit only acceptable items, reducing confusion and improving the efficiency of the process.
🔆 Real-Time Feedback
Implement mechanisms that provide immediate feedback to users if there are any issues with their submissions, such as missing details or unreadable photos. This ensures users can correct errors on the spot, improving the accuracy and efficiency of the submission process.
Design System
The Design System section outlines the key design principles, components, and guidelines used for the Toner Connect platform. It ensures consistency and scalability across all aspects of the interface. This section covers essential elements like typography, color palettes, layout structures, and interactive components, helping create a cohesive and user-friendly experience for all Toner Connect users.
Final Design and Visual Gallery
After incorporating feedback from the PM and engineers, I delivered the final visual design, bringing our ideas to life with clear visuals and an intuitive flow. The new design made the process easier for users and increased the toner selling conversion rate by 22%. This success highlights the power of collaboration and user-focused design. The Visual Gallery showcases the fully redesigned website layouts, where I maintained consistent Toner Connect branding and visuals, highlighting the improved design and user experience.
Results and Impact
The outcomes showcase the success of our user-focused design and collaborative efforts.
✅ Conversion Rate: Increased by 22% within 8 months.
✅ User Engagement: Improved by 18% over the same period.
✅ High Ratings: Achieved an average rating of 4.9 out of 5 in user reviews over 6 months.
✅ Support Reduction: Significant decrease in call center calls and support tickets during this time frame.
Moving forward, continuous user feedback and iterative improvements will be essential to maintaining and enhancing the user experience, ensuring Toner Connect remains efficient and user-friendly.