Enhancing the Read Aloud Browser Extension Experience
My Role
UI/UX Designer
Tools
Figma
Year
2023
Overview
The Read Aloud browser extension, an open-source project, provides users with the ability to listen to text rather than reading it. Initially developed by a team of enthusiasts, the extension has evolved into a vibrant community-driven initiative.
My engagement with the Read Aloud project began as a user. While I found the extension to be helpful, I identified areas for enhancement. The user interface, in particular, was not very intuitive, and navigating through options proved challenging.
This is how the extension looked before:
Problems found
- The extension does not show the page that the user is currently on. This makes it difficult for users to know what text is being read aloud.
- Some options are not easily accessible. For example, the option to change the voice is buried in a submenu.
- The option page is not very intuitive. Users may have difficulty finding the options that they need.
- The UI does not have a Light – Dark switch. This can be a problem for users who prefer to use a dark theme in their browser.
- The UI elements are outdated and do not look good on modern browsers. This can make the extension look unprofessional and less appealing to use.
- Some icons and buttons could be rearranged for better usability.
Solutions
- Dark Mode: By introducing a Dark Mode option, users can comfortably use the extension during nighttime or in low-light environments without straining their eyes.
- Reorganized Options: I moved essential options to the first screen of the extension, allowing users to access crucial settings without unnecessary navigation.
- User-Friendly Option Page: The redesigned option page is now more intuitive, with clear headings and categorization, making it easier for users to customize their experience.
- Modern UI Elements: By updating the UI elements to match the aesthetics of modern browsers, the extension now feels more visually appealing and in harmony with the user’s browsing environment.
- Icon and Button Reorganization: The rearrangement of icons and buttons was done strategically to ensure a logical and seamless user flow throughout the extension.
Research and Analysis
In this phase, I conducted user research on the official forum to gather feedback from active users. Subsequently, I identified several critical issues affecting the extension’s UI and UX. These findings served as the foundation for the ongoing redesign efforts.
User Persona
Meet Emily
Emily is a tech-savvy digital content creator who spends long hours researching and writing articles for her blog. She often relies on browser extensions to enhance her productivity and optimize her reading experience. Being an avid reader, Emily appreciates tools that allow her to listen to articles while multitasking or taking breaks from the screen.
Needs and Goals
Improve reading efficiency by utilizing a browser extension for text-to-speech functionality.
Find a user-friendly and aesthetically pleasing extension that seamlessly integrates into her browsing experience.
Have the option to customize the extension’s appearance to suit her preferences, including using Dark Mode for nighttime reading.
Behaviour
Emily values seamless integration of technology into her workflow and appreciates applications that optimize her reading experience.
As an avid reader, she relies on text-to-speech functionality to listen to articles while multitasking or taking breaks from the screen.
Emily is also keen on personalization options, seeking user-friendly interfaces that allow her to customize her experience, including enabling Dark Mode
User Flow
The User Flow is very simple with the new design.
Wireframes
A wireframe is a basic, simplified visual representation of a web page or application interface that outlines the layout, structure, and key elements without including detailed design elements like colors, images, or fonts. It serves as a blueprint for the user interface, focusing on the arrangement of content, navigation, and functionality, helping to plan the overall user experience and interaction flow.
After conducting discussions and gathering feedback from the developers, we have collaborated on finalizing the wireframes for the Read Aloud browser extension. These wireframes showcase the agreed-upon design choices, illustrating the layout and organization of the extension’s user interface. The wireframes serve as a crucial reference point for the subsequent design and development phases, ensuring a cohesive and user-centric approach throughout the implementation process.
Colors
Mockups
Prototype
Prototype is a working model of a product that can be used to demonstrate and test the product’s functionality and user interface. In the case of this particular design, the prototype showcases the various features and interactions of the app, allowing users to see how it would look and feel in action. By providing a tangible representation of the design, the prototype helps to communicate the project’s vision and provides valuable feedback for further development.
