Improving Accessibilty in Firefox Preview
OVERVIEW
In these past years, Mozilla redesigned Firefox for Android; explored and implemented various design ideas to address people‘s needs identified in user research.
In this project, I explored the design questions
“How might we support people to consume information under ‘uncertain’ conditions?”
ROLE & DURATION
UX Research Intern | Mozilla | Outreachy
​
​
User Research, Interaction, Prototyping & User Testing
May - August 2020
Scope
The scope of the design question was vast, so our first step was to narrow down our research criteria. We brainstormed and came up with a set of “How might we” questions to further break down the problem and design a more specific problem statement.
-
How might we “provide access to information in uncertain situations”?
-
How might we “enhance the experience of a user with low visibility”?
-
How might we “allow users to have continuous access information with a fluctuating connection”?
-
How might we “reduce battery consumption in low battery mode”?
-
How might we “reduce the loss of information if a connection is abruptly lost”?
For my research, I choose the research question
​
“How might we enhance the experience of a user with low visibility?”
If we are able to address that, we automatically improve the experience for a lot of other people too. For example, someone who uses their phone in bright sunlight or are on the go.
Validating Identified Problem
After identifying the problem, it was essential to validate it. To validate the problem, we looked at the foundational study by Mozilla and case studies of specially-abled users as they were not included in the previous.
Existing User Research
​
​
Past Mozilla user research studied 10 professionals based in France and Germany.
​
Limitation of a mobile browser
-
The screen size of mobile phones
-
Eye fatigue from reading too much on their phones
-
Websites not well-designed for mobile devices. (not responsive to mobile)
​
Triggers to change device
-
Level of detail required.
-
Eye fatigue
-
The small screen size made it preferable to look at photos and video on the desktop.
Secondary Research
Case study of partially sighted users(user type not in existing user research)
An Older user
-
Hard to read large blocks of text
-
Not knowing how to adjusting browser settings
-
Content with poor contrast is a nightmare
​
A partially sighted adult
-
Uses a screen magnifier(Zoomtext)
-
Text reader user wishes for a less cluttered website
-
Content with poor contrast is a nightmare
After going through Secondary resources we formulated a list of research questions to further guide us in the process.
Based on these research questions, I studied two real-world user cases.
To analyse Users Current behaviour
​
-
What kind of problems do users face in their daily lives from their browser?
-
How do users use their browser while travelling?
-
What do users do to cope up with adverse situations?
-
Does the user utilize the accessibility settings provides in their browser?
For Concept exploration
​
-
How do other browsers help users?
-
What other apps and products for reading ( kindle, google reads) provide to users?
-
What is the user’s approach to changing a setting in their browser? Do they change it if they are aware of it?
-
Due to network interruptions she losses interesting information as she forgets about it later.
Learnings from the participants' behaviour:
Not looking for settings
Not finding available settings
Losing data while travelling
​
Not looking for settings.
Users generally don't look for settings in the browser, only a better connection.
​
Not finding available settings
Sometimes users can't find available settings like reader mode as they are deep in settings.
​
​
Discontinuous information and loss of data due to network interruptions.
​
Next, we tried to find how our competitors are dealing with the users' problem and their accessibility settings. I choose to study 2 direct and 2 indirect competitors.
Direct Competitors
InDirect Competitors
After analysing competitors and User research we came up with the following opportunities:
Icon and its location
Element visibility and representation can be made more prominent.
​
Customisation based on User’s habits
Features that can be personalised based on the browsing habits of the user.
​
Visual/Auditory support
How can we incorporate auditory support when low visibility?
​
Based on these inferences I proposed 3 new features or modifications to the existing user flow
User Scenarios and flows
1. Remind me later
​
Scenario:
Before - Jane wants to look up types of camera lenses as she recently got interested in photography. She tries to use her travel time on the bus for browsing, but the bright sun makes it impossible.
User Flow:
Sidebar menu >> Save to collection >> remind me later collection (auto-generated collection) >> tab saved to remind for later.
Feature speciality:
-
Notification to remind me later (default collection)
-
Save page offline (can we consider having this for collection)
After - She saves pages to 'Remind me later' lists, so she doesn’t forget, and pages are saved offline, so she can access the information later even with the poor connection.
2. Reader mode
​
Scenario:
Before - Tina likes to read. She reads articles on her browser. But concentrating on her phone screen for long causes irritation, headaches and stress on the eyes.
User Flows:
Search widget >> Reader mode (activate) >> Horizontal option menu
Feature speciality:
-
Narration
-
Save for later (bookmark, add to the collection, add to top sites)
-
Font size customisation
3. Customisation of menu
​
Scenario:
Tina changes screens often while working; she uses Google docs on her phone and laptop. She bookmarks her docs for easy access on multiple devices.
User Flows:
If the user visits bookmarks several times a day, so bookmarks are displayed on the home page(automatic using AI)
Sidebar >> settings >> customise home page
Features:
Shortcut for-
-
History
-
Bookmarks
-
Synced tabs
(based on user’s habit)
Prototype
Testing Plan--Viewing and saving content to Fenix
Background
We want to test the desirability and usability of new ways to access content in Fenix. These include features for viewing the content in reader mode (“Narration mode” & “Always open website in reader mode”) and saving content in the collection (“Default collection- Remind me later”, “save offline” & “Notifications”).
We hope to improve accessibility for the browser. We want users to consume data even in uncertain conditions (like “low visibility”, “poor networks”) through these features. We did our testing on Usertesting.com
​
Screener survey
-
2+6 participants in the remote, unmoderated session
-
An android user
-
People who travel using public transport 3+ times a week.
We came up with a set of research questions for what we wanted to understand from our user testing based on these questions we prepared a script to ask or participants.
Insights from Usability testing Viewing & Accessibility in Fenix
The responses I received were recorded time tracked videos, and to get a systematic and comparative analysis of their responses, I formulated an excel sheet. Based on the sheet, I proposed priority vice changes to the prototype.
​
Link to the response sheet: Response sheet
Future Plans and Actions
Based on the insights from the user testing, modifications will be introduced into the beta version of Firefox Preview.
Learnings throughout the internship
Some of the valuable learning from the internship were there should be an organic flow of information, it's important to have a clear and informative icon location for better accessibility. Users are aware of locations or situations where they can encounter bad reception, so they are interested in saving information offline for a short time.
​
It was an exciting learning experience. I coordinated with the team of designers in different countries and verticle. I also got to learn about Mozilla's design philosophy of creating a healthy internet for everyone.
Working in a design team with professionals from different nationalities I understood along with a user-centric, a well documented and systematic design process is essential.
​