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
A Missed Opportunity
Despite the growing trend of mobile use, visitor are abandoning our platform due to the lack of mobile editing capabilities. Our data shows that 16% of new registrations come from mobile, but 46% of these users drop off. While they can browse templates, they cannot edit or customize them on mobile. This friction created a significant barrier for users, particularly those with mobile needs, and represented a missed opportunity to convert mobile visitors into customers.
PROBLEM
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
.webp)
From idea to execution
Rethinking the Mobile Experience
Designing for mobile goes beyond just shrinking a desktop layout. It requires reimagining the entire user experience for touch interactions and screen size constraints. To ensure accessibility, I looked into WCAG guidelines specifically for mobile interfaces. This influenced key design decisions, from touch target sizes and color contrast ratios to gesture-based interactions.
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.
.webp)
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
Challenge: On smaller screens, small bounding box handles made it difficult for users to resize and position objects accurately, resulting in a laggy experience.
Solution: We increased the bounding box handles to 44px (2.75rem) to meet touch target size recommendations, ensuring smoother resizing and repositioning of objects on mobile.
Dedicated text editing window
Challenge: Editing text on mobile was initially problematic due to buggy bounding boxes and frequent accidental misclicks that deselected the text box, especially when working with long text.
Solution: I designed a separate editing window to improve visibility and control. It offers a much more stable environment, allowing users to edit paragraphs without distractions or resizing issues.
Consolidating edit options
Challenge: On desktop, text formatting options (such as font style, list style, and text alignment) were spread across multiple menus. Reusing the toolbar on mobile would have forced users to scroll through many options, slowing their workflow and causing frustration.
Solution: I consolidated all text editing options into a single menu, making it quicker and easier for users to access the necessary formatting tools.
In-context menu
Challenge: Mobile users had to scroll excessively to find common actions in the toolbar, such as delete or duplicate, making the process inefficient and frustrating.
Solution: I introduced a floating context menu for quick access to essential functions. This feature was so effective on mobile that we later integrated it into the desktop version.
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.