ROLE
-
Led the design & strategic vision for the mobile editor
-
Designed the mobile editing experience with accessibility at its core.
-
Collaborated with cross-functional teams, including developers, marketing, and customer support, to launch a mobile design editor.
TEAM
1 Product Designer + Owner (me)
2 Engineers
1 QA
1 Technical Writer
1 Content Marketer
PROBLEM
A Missed Opportunity
Venngage users were frustrated and abandoned the platform due to the lack of mobile editing capabilities. Our data showed that 16% of new registrations came from mobile, but 55% of these users dropped off. While they could browse templates, they couldn’t edit or customize them on mobile. This friction created a major barrier, especially for users with diverse needs, and represented a missed opportunity to convert mobile visitors into customers.
I led the end-to-end design and development of a mobile editor that delivers core functionality—enabling users to create, customize, and share visuals anytime, anywhere. The mobile editor increased registration by 44%, unlocking a critical growth channel and expanding Venngage’s reach.
16%
of registration come from mobile
46%
of users dropoff
60%
of global web traffic came from mobile devices.
70%
of screen reader users primarily browsing on mobile.
How might we...
ensure users can create and edit designs, regardless of device limitations?
User Objective
Allow users to create designs anywhere, anytime, improving productivity, accessibility, and providing a seamless cross-device experience.
Business Objective
-
Registration Rate: Increase mobile sign-ups from 16%.
-
Engagement Rate: Increase template creation on mobile from the baseline of 45%.
CONstraints
Time and Resources Constraints
We aimed for a 3-month timeline to release the mobile editor MVP, with possible delays due to the project’s complexity. At least 2-4 weeks were allocated for usability testing, bug fixes, and refining the experience.
In a small team of two developers and myself, I wore multiple hats as both UX/UI designer and product manager, guiding the process from research and design to execution and launch.
Scope Constraints
Core Features:
-
Simple and intuitive UI
-
Cross-platform compatibility
-
Essential functionalities (text editing, image upload)
-
Support for key touch-based interactions (pinch to zoom, pan, scale)
Nice-to-Have Features (for future releases):
-
Advanced widget editing (e.g., charts and diagrams)
-
Gesture optimizations
-
Accessibility features and audits
Laying the Foundation
When tackling complex UI challenges, I like to start with a solid Information Architecture. This helped me map out the relationships between features, ensuring everything was logically organized. I prioritized essential features like the brand kit, templates, and text and icon editing, while making sure customization options were easy to access to support the user's design workflow.
One of the biggest challenges was creating an intuitive mobile editing experience that felt just as powerful as the desktop version. With limited screen space, I had to strategically decide which features to display while ensuring a seamless workflow.
Prototyping the Interactions
Building on wireframes, I designed the interface layout and developed interactive prototypes to demonstrate key user interactions. This hands-on approach enabled me to test the design in real-world scenarios, identify potential pain points, and refine the overall user experience.
Refining User Interaction & Usability
For the MVP, we prioritized touch interactions to improve the mobile experience. Early testing revealed some critical issues—unresponsive gestures, jittery panning, accidental misclicks, and difficulty selecting and moving elements around. Over the next 2–3 weeks, we focused on refining the touch controls to make the workflow more seamless:
-
Pinch-to-Zoom & Pan: Zoom in and out and pan smoothly to focus on details across the canvas.
-
Tap to Select: Activates relevant editing options, like the text toolbar or color picker.
-
Drag to Move: Move elements around the canvas with responsive, precise control.
-
Scaling & Rotating: Adjust size and orientation smoothly with intuitive bounding box handles.
To further improve usability and accessibility, we refined the features to overcome the limitations of editing on smaller mobile screens.
Dynamic Toolbar
Challenge: It’s important to support key editing actions without cluttering the interface, ensuring users can access the right tool at the right time.
Solution: We implemented in-context interactions, such as triggering the text editing toolbar when selecting a text widget and displaying background color and page size options when tapping the canvas. This kept the interface clean and allowed users to focus on their tasks.
Better bounding box handles
Problem: Small handles made resizing hard on mobile.
Solution: Increased handle size to 44px for better touch accuracy.
Dedicated text editing window
Problem: Text editing was buggy and unstable, especially with long paragraphs.
Solution: Added a separate editing window for more reliable input.
Consolidating edit options
Problem: Scattered text tools slowed users down.
Solution: Merged formatting options into a single, streamlined menu.
In-context menu
Problem: Users had to scroll to access key actions.
Solution: Introduced a floating menu for quick access—later adopted on desktop too.
Eat our own dog food
Before launching the mobile editor, we conducted comprehensive testing to ensure its performance, quality, and usability. The QA team thoroughly tested the product across multiple devices and mobile operating systems to ensure compatibility and consistency.
I also organized internal usability sessions with Venngage employees, gathering feedback to identify potential bugs, usability issues, and edge cases that might have been overlooked. The feedback from these sessions was invaluable, helping us refine the user experience and address key concerns before the official launch.
mobile editor goes live
After months of work, the mobile editor was finally in users’ hands!
A successful launch goes beyond delivering a product—it’s about driving adoption and usability. To support users, I created help center articles and FAQs, equipping both users and our customer support team with the resources needed for a smooth transition. I also worked with marketers in crafting email campaigns and launch announcements to drive awareness and engagement.
Like most MVPs, the initial version of the mobile editor wasn’t perfect, but it was an important first step. We knew that the launching was just the beginning, and there was still plenty of work ahead to refine and enhance the experience.
IMPACT
Following the launch, we saw a significant impact on acquisition and engagement:
-
Mobile registration increased from 16% to 23%, resulting in a 28.5% reduction in drop-off.
-
Creation rate on mobile went up from 45% to 60%.
The mobile editor expanded accessibility, allowing users without desktop access to fully utilize Venngage’s design tools. These results validated the importance of investing in a mobile-first approach, improving both user experience and business outcomes.
Learnings
Reimagining the Mobile Experience
Transitioning from desktop to mobile required rethinking the entire user flow. Every tap and swipe had to feel natural and intuitive. It required optimizing for touch-based interactions, ensuring smooth navigation and making sure the experience was seamless across different screen sizes and devices.
Wearing Multiple Hats
Leading the design and execution of Venngage’s first mobile editor taught me valuable lessons in cross-functional collaboration. Balancing both product strategy and design responsibilities helped me understand the importance of aligning user needs with technical feasibility.
Eat Your Own Dogfood
Internal testing is key to refining the product. By using the mobile editor ourselves, we identified pain points early and made adjustments before the final delivery. It’s a good practice to incorporate internal testing as part of the development process to ensure a polished, high-quality product.