Product UX case study:- Elly, your accessibility assistant

Role:

Product Designer

Team members :

Mirielle Tan, Sabiha Shaik, Okonkwo Rita, Zubaida Bakhar

Tools:

Figma, Adobe Illustrator

Year:

2020

Background:

Elly is a project birthed from the social impact hackathon organised by Microsoft, the social impact hackathon is focused more on creating software solutions that foster inclusivity and accessibility. After the hackathon, my teammates and I decided to continue building the project.

The Challenge:

How can we foster inclusivity and accessibility on the web? How can we raise more concerns about accessibility online?

There has been a lot of advocacy for accessibility on the web, especially on social media, there is a large need for images, videos, gifs, memes etc... to become more accessible.

Top social media apps such as Twitter, have swung into action by creating avenues for content creators and users to type in their alternate descriptions for their images.

Although these solutions are in the right direction, most regular users and content creators still do not put in / forget to add alt descriptions for their media.

User research:

Elly Team brainstormed on the Miro board

After brainstorming for our possible users, it was time to prove our assumptions. We began reaching out to :

Visual artists,

Bloggers,

Teachers,

Photographers and

Regular web users

Scheduling one-on-one interviews with them.

We drafted out the questions tailored to the participant's field in order to narrow the answers.

Sample questions for an artist interview participant

Findings:

We got a lot of responses as we conducted the interviews and gained a lot of insights, I'll highlight a few.

📢

Participants (mostly content creators) care about web accessibility and inclusivity. but haven't really tried doing much about it.

📢

Participants (Artists and content creators) are interested in making their content more accessible.

📢

Participants (Artists and content creators) mostly use Instagram and Twitter for sharing their work

📢

All participants were interested in using a tool to make their content more accessible.

We proceeded to build Elly and then divided the team into three: UI/UX Design, Research and Development of which I handled all things Design and User Experience.

Solution:

Elly is a browser extension for Chrome and Microsoft Edge that aims to foster image accessibility on the web by providing a simple way to create alternate text for images within seconds.

Defining the solution:

My team and I brainstormed different solutions before coming up with the Elly Idea. Then, we proceeded to make make our solution clear by answering the following questions.

Define solution

Question

answer

What's the product?

A browser extension for (Chrome and Microsoft edge).

Who are the target users?

visual artists, bloggers, teachers, photographers and anyone who posts images online.

Why does it need to be created?

To raise more awareness about web accessibility and make it easy for web users to do so easily.

Where can it be used?

On web browsers

🚧

Due to the wide scope of the solution, we first focused on building the extension to work on Twitter web pages

Elly logo mark

Sample UI flow

UI Designs

The Pop-up menu: this is where most of the browser action is made visible to the users. Before a user tweets out a post containing an image, Elly is triggered and reminds the user to add an Alt description to the image.

Elly pop up menu when an image is detected on a tweet

Elly pop up without image on a draft tweet

See Elly in action!

Demo video:

Elly demo video

Style guide

While creating the UI elements, I created a style guide to give all UI elements one source of truth, I then documented their use and guidelines using Notion.

Reflections:

Overall, I am really proud to have contributed to a project geared at promoting digital accessibility. Being a strong advocate for digital accessibility, I really enjoyed every process my teammates and I went in bringing this project to life from talking to different persons and engaging in conversations that promote digital accessibility.

Right now, Elly is still far from where we'd love to scale it, the sky is the starting point in this case. I and my teammates are dedicated to the continuity of Elly. We are still iterating and taking feedback to make it better and scale it to more social media platforms such as Instagram and LinkedIn.

Forward ever!

Elly is currently in Beta testing and has been successfully launched on the Chrome Webstore.

We are really excited about this milestone and also glad about the positive reviews we're getting from our beta testers.

Learn more about Elly at www.joinelly.com

User feedback

Elly extension review on Chrome web store

Elly logo text outro video

Thank you.

If you've scrolled this far, thank you for taking the time to read about my design decisions and solutions in response. If you'd like to talk more about the project, please reach out!