vhw - IA & Redesign

Federal Association for Housing & Urban Development

Data Organization, IA (Information Architecture) & Redesign

About: vhw – Bundesverband für Wohnen und Stadtentwicklung e. V. (Federal Association for Housing and Urban Development) is an established non-profit association with around 2,000 members, mainly municipalities and housing companies. It is committed to the performance of municipalities, a diverse civil society and the strengthening of local democracy through training and research. With around 1,900 events and about 53,000 participants nationwide every year, vhw is one of the leading training providers for managers and employees in administration, municipal companies and the real estate industry.

Visit the vhw website: Link to the final product education & contact

My function: Concepter, UX/UI Designer in a team with Software Engineer My Trang Hong
Period: Spring 2019
Customer: vhw – Bundesverband für Wohnen und Stadtentwicklung e. V.

 

Methods

  • IA (Information Architecture): site mapping, user flow
  • UCD (User Centered Design)
  • Mini UX-Workshop with the client & Presentation
  • UX & UI Design
  • Collaboration with DEV

 

Designer Tasks

Conception and design of a clear search and filter function for the large amount of training opportunities and contact persons of vhw throughout Germany. 
These functions can be found on the vhw website in the “Training”(Fortbildung) and “Contact”(Kontakt) sections.
I created a user-friendly UX concept for this with e.g. Information and Navigation Architecture, User Flows and User Journey Maps. 
So I developed the filter system and the keyword or name search.
The IA (information architecture) was translated into a clear and intuitively understandable UI design, which saves the user from a daunting information overload.
There are also no search results by default. For a successful and specific result, the user must first operate the search functions. This avoids arbitrary calls to non-responsible vhw staff (usually the first 5 in the list), who have to forward the calls and do not get to their work. It also leads to better search results for the user, because he has to think about what he is looking for in the first place and then gets a specific result.
Hiding the telephone numbers and e-mail addresses of vhw employees has also reduced false contacts. The further click on “more information” gives the user even more time to think.
For urgent cases, I positioned a central CTA area “Questions about your vhw training?” on the right, which moves sticky with where to find the central customer support. This also discourages wrong calls to the wrong contact person, as it is always present and conspicuously designed.

 

Parameters for the search and filter function

FORTBILDUNGEN (CONTINUING EDUCATIONS) are filtered and structured by:

  • Event type (webinars (538 pcs.), face-to-face event (813 pcs.), distance learning course (3 pcs.))
  • Keyword, period, topic, state

KONTAKTE (CONTACTS) (subdivided into 5 areas: vhw Bundesverband, Fortbildung, Regional Offices Fortbildung, Forschung, Verlag) are filtered and structured by:

  1. Areas/Role at vhw
  2. vhw department
  3. Title, name, academic degree/education
  4. Field of activity, responsibility (as title) within vhw
  5. Location/address, telephone number, e-mail address, federal state

All five contact details can each be additionally filtered and searched by: Subject area, region (north, east, southwest), office, name search.

 

Technology

html / javascript / css
——————————————

“Fortbildung”(Continuing Education) default

 

 

 

“Kontakt” (Contact) 02. Fortbildung

 

 

 

 

 

 

 

“Kontakt” (Contact) 03. Regionale Geschäftsstellen Fortbildung

 

 

 

“Kontakt” (Contact) 04. Forschung