Time to market
6 Months
adira.de - barrier-free portal solution for wheelchair accessible and barrier-free living space
For the Blind and Visually Impaired Association of Niedersachsen (BVN) we developed a portal for the procurement of wheelchair accessible and barrier-free living space.
The implementation was carried out under strict examination of the guidelines of the BITV (Barrierefreie-Informationstechnik-Verordnung) and WCAG (Web Content Accessibility Guidelines) testing procedures.
Client
Association for the Blind and Visually Impaired of Lower Saxony (BVN)
Fields of activity
Self-help and interest association of people in Lower Saxony who are visually impaired, blind, multiply handicapped, hearing impaired or deaf-blind
Challenge
Marketing of guaranteed barrier-free and wheelchair accessible housing with connection to established and standardized interfaces of the housing industry
Solution
Creation of a portal solution for the marketing and procurement of barrier-free and wheelchair-accessible living space as a barrier-free online service in accordance with BITV and WCAG guidelines, including a complete form section for the publication of advertisements.
Activities
consulting, architecture, UX design, UI design, backend development, frontend development, productive operation
Technologies
Typo3, Fluid, Sass, JS
Project summary
Challenge
Within the first project phase, the task was to derive functional and technical requirements for the realization from an already existing design prototype. In particular, the generally applicable guidelines for accessibility according to BIK (barrier-free information and communication) were to be reviewed in this step and brought into line with the product to be developed.
The second project phase included extensive optimizations in the entire user interface with regard to accessibility and usability.
Procedure, activities and solution
First, a functional version of the design prototype created in advance was implemented. This consists of a service for the administration of housing offers, an editorial system for the administration of the website and the user interface, which was especially optimized for the use of screen readers.
The first published version of the portal was tested in cooperation with blind and severely visually impaired test persons. The feedback was compared with BIK's catalog of measures for the realization of barrier-free websites. In addition, the tips from the "leserlich.info" platform were taken into account.
As a result, a new UI concept was developed, which ensures that required contrasts and font sizes are maintained. The structure of the existing pages was adapted so that content read aloud via screen readers was presented in a way that was easy to understand.
Result
In the course of the 2nd project phase, adira.de was developed as a portal that can be used without restrictions by those interested in wheelchair-accessible and barrier-free housing. Providers of such housing offers are informed via the input form whether their apartments meet the applicable requirements.
Hans-Werner Lange Managing Director of the Association of the Blind and Visually Impaired in Lower Saxony, Initiator adira.de
At adira.de, the aim is to be as barrier-free as possible in all directions. Therefore, our task in the future is both to keep improving the service and to optimize the topic of accessibility even further.
Garantiert rollstuhlgerecht und barrierefrei
Der Service zur Anlage von Wohnungsangeboten beinhaltet in der Basis die relevanten Abfragefelder, um ein Wohnungsangebot allgemein zu beschreiben. Teil der Validierungsautomatik ist die Überprüfung verschiedener Werte, welches die Mindestvoraussetzungen zur Erfüllung der Kriterien für eine rollstuhlgerechte oder barrierefreie Wohnung sind. Als simples Beispiel dafür kann das Vorhandensein eines Aufzuges genommen werden. Dieser ist erforderlich, wenn die Wohnung rollstuhlgerecht sein soll und sich nicht im Erdgeschoss befindet. Eine Vielzahl solcher spezifischer Feldtypen wurde in Abstimmung mit dem BVN in die Eingabemaske integriert und unterstützt Anbieter von Wohnungen dabei, alle notwendigen Angaben zu treffen, die zur vollumfänglichen Beschreibung einer Wohnung nötig sind. Gleichzeitig hilft dieser Validierungsprozess dabei zu gewährleisten, dass keine Wohnungen angeboten werden, die die Kriterien nicht erfüllen.
Phase 2
Die uns bereits bekannten Limitierungen hinsichtlich Barrierefreiheit konnten auf Basis der ersten veröffentlichten Version bestätigt werden. Das Feedback mehrerer Testpersonen wurde konsolidiert und mit dem Maßnahmenkatalog abgeglichen, der Bestandteil der BITV und WCAG Testverfahren ist. Um den darin festgehaltenen Richtlinien gerecht zu werden, war die Zielvorgabe für die zweite Projektphase die Entwicklung eines neuen UI-Konzeptes. In Konsequenz daraus erfolgte die frontendseitige Umsetzung und die Überführung des Formulars zur Eingabe von Wohnungsangeboten in das neue UI. Im Zuge dessen wurde auch das UX-Konzept überarbeitet und das Eingabeformular u. a. auf thematisch gegliederte Einzelschritte verteilt.
Accessible UI
The already existing and coordinated interface design should be optimized in terms of accessibility. Accordingly, no new design was to be created. Nevertheless, all components in the basis that have an impact on accessibility were to be checked. Low color contrasts were increased, font weights adjusted, line spacing increased, and interaction elements specially marked. In addition, the overall look and feel was more unified. Within our tooling, enhancements helped us determine in the design process whether the newly defined font formatting had sufficient readability. Early user tests also helped us to optimize the interface design and develop a good basis.
Input 2.0
Also within the second project phase, we revised the input form for storing and publishing housing offers. In contrast to the first solution, which was developed as a separate service with its own UI, we fully integrated the form into the portal and revised the structure. Instead of querying all input fields on one page, we collected thematically related fields and distributed them to individual steps. The result of this UX customization is that providers know at any given moment how many steps are still ahead of them and what kind of information is being asked for on each step. When subsequently editing a housing listing, it is convenient to navigate to the desired item.
Another advantage of the migration of the input form was the significant optimization of its accessibility. While the initial implementation was purely functional, we were able to benefit from the UI component library in the new version, which already has sufficient contrast and font sizes in the base.
For the offer of the housing industry an interface was established, which allows a seamless export of exposés from the real estate software to adria.de. In this way, advertisements can also be administered without having to maintain them in parallel on two different sources.
Wheelmap and other services
There are enough ideas for useful tools and services within the portal. For example, it is planned to add a Wheelmap to the apartment listings in a further expansion stage. This will provide information on wheelchair-accessible locations based on a specific GEO location. This includes public transport, shopping facilities, cultural sites, public facilities and restaurants. This information can also be processed for screen readers by reading out the most relevant locations as list entries instead of on a map.
Usability features for interested parties are also to be considered in further expansion stages.
We are pleased to have expanded our expertise in the development of accessible solutions in this project and are excited to see where adira.de's journey will take us.
Malte Gärtner Project Manager adira.de, Association for the Blind and Visually Impaired of Lower Saxony e. V.
Chroma Experience has succeeded in making not only the apartment search, but also the newly developed input mask barrier-free - thus even exceeding the requirements for our portal!
Project Management
Paul Lewandowski
Requirements Engineering, UX-Research
Paul Lewandowski, Florian Köppe
Design-Lead
Ilona Maslioukovskagia
Technology Lead, Architecture
Andrius Baliutis, Sebastain Reihs
UX-Design
Florian Köppe
Backend-Entwicklung
Andrius Baliutis
UI-Design
Ilona Maslioukovskagia
Frontend development
Sebastain Reihs
tesa SE - A company of Beiersdorf
Consulting ⟶ Architecture ⟶ UX-Design ⟶ UI-Design ⟶ Full-Stack-Development