ROLE
Product Designer
TIMELINE
2023 • 3 months
RESPONSIBILITY
Overview
As designers, we often build our ideas based on what we know. But there is a problem: MOL Campus is being used daily by its own 2500 employees, a number that’s still growing. What is easy for us, could be difficult for someone else. We are not the same, and if we are talking about people, there is no such thing as "normal." So our responsibility was to make the application adaptive to every person with a disability.
I truly believe that accessibility and inclusion come first and then everything else second. From the vision to the speak and cognitive features, we designed a lot of built-in features for the employees to help them in their daily lives and make the application accessible for each and every user.
Problem Space
Building accessibility is a commonly tough challenge. We often take our capabilities as a baseline, but people are much more diverse than that. The unique cases have to be a resource for our designs. By ignoring them, we communicate that their problems and challenges are not important for us.
The Campus is built with the latest technologies to be completely accessible for the employees, visitors, and guests. It was obvious, that we needed to visit the building and pay our attention to making the product inclusive as well.
Opportunities
Although inclusivity should be the origo of the designs, it offers a lot of opportunities in the designs as well.
What if people can use the whole application by one hand?
What if people don’t need to open the app to be able to enter the building or open their locker?
What if people with different vision deficiencies can get the same user experience?
Disability as an Inspiration
Understanding disability requires empathy and time because – as the WHO says – it is part of the human condition. Almost everyone will be temporarily or permanently impaired at some point in life.
The fact that it affects for everyone temporarily or permanently is a key thing to understand. Microsoft has done research in the topic and came out with an excellent illustration called the Persona Spectrum.
Mobility
For us, touching the screen is easily one of the most trivial things every day, however, it's a struggle for hundreds of people. Touching is the key factor in how we create interactions or how we communicate with our devices. While we kept close attention on different situations in a work environment, it was a pretty obvious insight, that people are really busy. They mostly just don't have 10 fingers to do interactions with. They are running from one meeting to another while they would like to book an office booth or just carry a cup of coffee or water with them.
Reachability
When people faced with great reachability, they feel like the device is for them and not in the opposite way. Nobody wants a hard reach to interact with the screen, that's why we put the most important functions to the bottom of the screen, the ones that are pressed by the users the most frequently such as buttons, pickers, etc. When people have to decide between options, we used a lot of bottom sheets to give the power in the user's hand to be able to swipe the modals and sheets down or go back by swiping the screen left not just clicking on the close button at the top of the screen.
Integration to the Apple's Ecosystem
People would like to reach every key function the fastest way possible. If they want to open their locker, they can open the app, click on the services, then lockers, and find the exact locker to open it. It's way too much work, and time, we mostly need to use both of our hands, so we can do it easier.
Apple Wallet integration led us to only use a double click on the side button to bring up the key of the locker or your entrance card. The built-in NFC chip makes it possible to achieve the goals of the users in the quickest time. Every important card will be placed in the Wallet to make sure, you can do anything. It already sounds fantastic, but we also built this feature on Apple Watch, so you don't even need your phone to enter the building, open your locker, drive out from the parking lot or show your discount at the canteen.
Vision
In my opinion, it's a privilege to design high-quality displays which can cause a really bad end, because we sometimes don't think that we are the only ones who will see this in this way. It's hard to even write it down, that tons of products don't pay attention to accessible visual guidelines. Unfortunately, eyes are going to worsen over time and the MOL Group contains a really wide range of age groups. We should think about every one of them. That is exactly what we did.
Contrast
WCAG 2.0 Contrast Guidelines went pretty standard over the years, however, many platforms and products don't use it. In Campus, most people are using their laptops or a bigger screen, but we couldn't expect that the company provides a high-quality monitor to everyone. On the other hand, we would like to create the same visual experience no matter what kind of display people are using. That's why we paid close attention to contrast issues and designed the whole app to pass the AA conformant levels based on the WCAG.
Color Blindness
We cannot cover all the disabilities by creating a great contrast ratio. We also have to think about different color vision deficiencies, which affect more than 350 million people. Two of the most common color blindness types are deuteranomaly and protanomaly. The first is the most common type of red-green color blindness. It makes the green look redder, while protanomaly makes red look greener and less bright. I can say we were in a really fortunate situation because of the blueish color palette that was the color of Campus, but we had to make sure to fix all the issues that can affect color vision deficiencies.
Dark Mode
It's not only for increasing battery life but the dark mode will help in different life scenarios as well. If they have to work late and do something on their dashboard or in the morning when they get ready for work and try to reserve a parking spot. It will simply reduce eye strain and cut down on blue light exposure.
Hearing
Vision and hearing conditions relate pretty much to each other. If people can't see, we need to help them in alternative ways. While Apple offers great features we should adapt to them carefully. One of the most interesting and helpful features is VoiceOver, so let's take a look at how we are helping people who struggle to interpret what is happening on the screen.
VoiceOver
VoiceOver is an industry‑leading screen reader by Apple that tells you exactly what’s happening on the device. It can describe people, objects, text, and graphs as well. When somebody is visually impaired, it can be a wonderful help if we allow VoiceOver. To do that, we need define what is on the screen, what it function is and what the user can do with it. We also need to use alt-text to provide what is happening in a picture.
The Outcome & The Takeaways
I believe this project not only showcases my dedication to accessibility but also how I think about treating humans when they use digital products. Over the years, I have become a strong advocate for accessibility, constantly helping companies understand that accessibility is not just a good-to-add area — it generates revenue and helps products and companies grow.