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 2022
Impact
Successfully delivered cross-platform text formatting functionality
Markdown is confusing
Element had functionality to send messages with formatted text, but it was via markdown. This was more of a power user secret feature and was confusing for Element's non-technical user base. As Element was moving towards a higher number of enterprise users, it was important to offer a more conventional work messenger formatting experience.
Problems
Technical Complexity: The only way to add formatted text into the composer was via markdown.
Hidden Functionality: Users were unable to utilise this behaviour to format text, and they were unaware of the current formatting options.
Confusion: Many users didn't understand or want to learn markdown, and expected 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
The main challenge wasn't just adding formatting buttons, but managing the transition between markdown and the new text formatting functionality. We had a community that loved markdown and a new enterprise user base that didn't, so to create an experience that worked for all users we set goals for:
A 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.
How the iOS composer progressed iteratively on mobile
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.