Princess Oviawe

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.
Tweet draft with image
Tweet draft with image
 
 
Twitter alt descriptions box
Twitter alt descriptions box
 
 
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
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
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.
 
Project objective statement
Project objective statement
 

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
A browser extension for (Chrome and Microsoft edge).
visual artists, bloggers, teachers, photographers and anyone who posts images online.
To raise more awareness about web accessibility and make it easy for web users to do so easily.
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
Elly logo mark
 
 

Sample UI flow

 
Elly user interface flowchart
Elly user interface flowchart
 

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 menu when an image is detected on a tweet
 
 
Elly pop up without image on a draft 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.
 
Elly style guide
Elly style guide
 

 

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
 
Elly on chrome web store
Elly on chrome web store
 
 

User feedback

Elly extension review on Chrome web store
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!
 

Contact me 👉🏻