Rich Text Editor
An end to end cross-platform design project, adding essential functionality of formatting text to the composer - a critical feature for Element’s enterprise users.
My role
Product Designer
Team
1 Engineering Team
1 Product Designer
1 Product Manager
Timeframe
Aug 2022 - Nov 2023
Impact
Successfully delivered cross-platform text formatting functionality
Problems
Technical Complexity: The only way to add formatted text into the composer was via markdown
Hidden Functionality: Users are unable to utilise this behaviour to format text, and they are unaware of the current formatting options
Confusion: Many users don’t understand or want to learn markdown, and expect to see formatted text instantly
Competitive Edge: Competitors offer this functionality which meant we were falling behind with client expectations
Entering text formatting via markdown on web
Design goals
Unified Experience: Redesign the composer across iOS, Android, and Web to ensure feature parity and a consistent mental model for users moving between devices
Simplicity: Make an intuitive, easy to use solution that bridges the gap between our two distinct user groups, and provides a way to revert to the old functionality
Scalability: Create a solution which solves current needs but also keeps the door open for future additions
Process
This was a highly iterative and cross-functional process, and I spent 8 weeks working through 6 iterations of designs. I focussed on:
Cross-functional collaboration: I partnered closely with Product Managers and Engineers throughout to ensure technical feasibility and alignment with business requirements
Stakeholder Validation: I conducted feedback sessions with stakeholders, design and product team members to validate ideas
User Testing: Insights from end user testing helped improve accessibility issues, but generally people commented that the experience is easy to use and makes sense
The Solution
Web Experience
Functionality is toggled on and off from the composer, providing a scalable solution which bridges the gap between clients and technical users
Mobile Experience
An intuitive design for our new mobile app, which meets accessibility standards and ensures feature parity with web
Design System Optimisations
I worked closely with the design systems team to migrate the feature to Element X (our new mobile app), with the aim to:
Refactor Components: Align with our updated visual language and token system
Optimise for Accessibility: Increasing touch target sizes and icon contrast colour
Refine Interactions: Smoothed out micro interactions from the legacy product, ensuring it felt responsive on new devices
Impact
The Rich Text Editor successfully eliminated a major friction point for enterprise sales, and was well received by clients, stakeholders and the community.
Qualitative feedback from user testing confirmed that the Element X optimisations reduced error rates and frustration when formatting text on smaller screens.