Maya El Murr - a Lebanese user experience designer that has been around the world and now is settled to spread her knowledge to you.

Music isn’t as inclusive as we think — but it can be!

On the 14th of May 2020, I had an online conference with uxhealthcare.co and I would love to share it with you.

Below are the images the UX Healthcare website and I will now write what I talked during the speech:

 

 

Introduction

My name is Maya El Murr, I’m currently a UX designer at SeaChange, a health and safety consulting company in Ireland. I graduated my masters last year in London, I’m the founder of So true to be true and I’m part of the Toptal community since 2017. For the people who don’t know Toptal, Toptal is a global network of the top talent in business, design, and technology that enables companies to scale their teams, on-demand. Toptal screens every client to make sure they have reliable expectations and experience working with remote freelancers. There are also ample professional development opportunities to keep your skills sharp, like the Speakers Network or writing on the blog. If you would like to learn more about Toptal, feel free to approach me after this talk or contact me via email.

Problem:

Applications are becoming a huge part of our daily lives.

UX designers like myself need to rapidly embrace those apps and we need to begin proactively define our relationship with it

Now, what I’m going to ask from all of you, is to imagine that you are also designers and I want us to think for a second.. about the difference between designing an application and designing an accessible application.

 

Persona Examples

Persona 1

Now let’s imagine we have someone, a private trainer who wants to edit and share music to social media. She would probably download any app she finds to edit the audio that she needs for her blog podcast.

And because we are designing that experience, the decisions we made in the design, affected that experience process for her … However…. there are some experience that can not be controlled.. that Private trainer had a hard time finding the app that she wanted. She downloaded more than 3 music applications on her phone, … She had to learn each app how it functions before she was able to mix, cut and add effects to her audio. There were so many steps, and trials that made her sit 15 min longer to achieve her goal.

Persona 2

Now let’s imagine another person.. a person who has a disease called Muscular Dystrophy. For those who are not aware of this disease, it’s a genetic disease that is caused by a deficiency of a protein that supports the making of fibers in the muscles secure. It leads the person to be unable to walk by his early teens and while growing up, his life gradually becomes more difficult to the level that he needs assistance in everything he does.

 

What do you think that person would have faced if he wants to download a music app to edit audio? Well, in order to answer the question in a good way, let’s watch this small video.

 

 

I’ve known Simon for 6 years now.

We met in a church choir and we became part of each one’s life since then. During those 6 years, I saw how he was gradually changing and going backwards. Month after month, year after year, the things he loves doing became a struggle for him and one of those things was creating music.

 

 

So, let me ask the question again.. What do you think Simon would have faced if he wants to download a music app?….. or you know what?.. let me ask a better question..

how can we make music applications accessible for Simon? For us to answer the question, we need to understand the term accessibility.

Accessibility is creating a product that can be used by everyone. I believe because we are talking about a case with motor disability, we need to think not only about creating an accessible app but also creating an inclusive app. Another word for inclusive design is “universal design” which means: a design for all. In order to give a great user experience for Simon, we need to think of the usability (which is the user experience that focuses on effective, efficient, and satisfying designs), the accessibility (which is the outcome) and the inclusive designs (which is the process).

So how do we achieve that?

Let’s ask ourselves 3 simple questions:

  1. Why does Simon need to download such an app?
  2. Where is he facing difficulties while using any music app?
  3. and What are the features that need to be added for him to edit and share his music?

If we went back to the example we mentioned before.. we should also take into consideration on .. how long will Simon need to achieve his goal?

So in order to know how to make the right decisions for better user experience, designers need to ask the right questions and get the right data.

App Example

I want to dive into an example here and I’m going to use Enlight Video Leap as an example, a winner award of Apple’s iPhone & iPad App of the Year in 2017. Enlight Video Leap is a video and audio editor app that includes standard editing features like trimming and adding fonts, different effect, sharing and more.

UX Method Used

Knowing how usable and efficient the app is, my team and I used standard best practices, user research and usability testing to help to discover the problem for people with Muscular Dystrophy.

In other words, we focused more on qualitative and behavioural research. Eventually what we did is recorded online ethnographic observations and interviews. Ethnographic research is a method where researchers observe and/or interact with a study’s participants in their real-life environment.

 

Why we used this method?

Because it allows for the capture of unarticulated and tactic information where it gives insights into the participants’ behaviour in the context of use.

So what did we learn?

Looking at the qualitative metrics, the participants who have a Muscular Dystrophy faced several difficulties trying to edit audio and share it. 2/7 participants finished the tasks earlier than the others, 3/7 participants stopped and gave up from the whole idea and 5/7 asked someone next to them to help them achieve some of the tasks.

One of those features was timeline navigation. The user needs to click and drag to reach the end of the audio. This is due to the lack of having the ability to press on the screen and navigate.

Another issue with the same finger pressure gesture was the trimming, In order to trim audio, the user needs to click and drag the edge side of the audio to the left or right…

And a third issue was the zoom.. pinching in and out wasn’t usable for the participants, neither the click and drag. It took them  longer time to achieve tasks.

These were just a few examples that one would never take into consideration while creating an app.

So we did some wireframes and tested them to the same participants and compared the results.

It was a huge change for them.

4/7 participants finished the tasks earlier than they did before, none (0/7) asked for assistance and all (7/7) were able to finish all tasks.

Solution

What was the thing that changed?

The key navigation.

We created a keyboard for the app.

  1. we worked on making everything available on one screen..
  2. 2 ways to navigate through timeline – using the arrow keys to navigate the timeline left or right, or he can just click on “go to” and write which time in the timeline he needs to reach.
  3. we worked on eliminating everything that needs a click and drag gesture.. whether it was a horizontal and vertical scroll, or trimming audio, or search for audios in the file
  4. the zooming is done using single clicks
  5. We added a voice assistant where it can make the work for him if he needed help using any of the features
  6. With these changes, we were able to extract design principles that show the importance of the context and its simplicity where we are willing to apply that knowledge to future work

Implementation

A small sneak peeks on the high fidelity wireframes of the app, where you can see the splash screen, the features screen where the user can mix and edit audios, create videos and share the work. Also, there will be onboarding screen which will help the user to understand more the features and gestures. You can also see how a new project screen shows and how it appears when the user is editing. And the last wireframe is the voice assistance screen where the user can click or talk to through the app if he or she needed help.

 

Giving you an example about the private trainer facing issues while downloading and trying new apps, was just a small example of what a lot of people face in the digital world.

So, we need to know that one day, we will be disabled, whether it was a temporary, permanent or even situational. The job for us, as designers, is to try to focus on making and including accessibility in our apps in any way possible, because together we can make a huge impact in each other’s life

Thank you and I would appreciate if you can send me feedback of this talk.

You can either email me on hello@mayaelmurr.com or direct message me on Instagram

 

Want to know more about the details of the process?

Previous