About
ADE is a platform for architectural educators to connect and acquire knowledge.
Initially, ADE was an interactive map where architectural educators could find each other. In its next iteration, ADE set out to add 2 new main sections:
- Resource base of educational resources related to architecture,
- Archipedia: an encyclopedia of architectural terms.
I was tasked with UX and UI design for growing the website into a complex knowledge base. This required both deep UX rework and expansion of the brand’s visual language.
Information Architecture
The UX had to be both easy enough for kids and elders to browse through, while also providing a comprehensive filtering mechanism for researchers and students to find exactly what they were looking for.
The site's IA was significantly reworked. This step was the most important as it ensured consistent experience for end-users and laid foundation for all following work.
Sitemap according to brief and after UX rework. Highlighting parent-child relationships helped the client understand the benefit of consistency.
Design
With the aesthetic foundation laid by the initial website’s design, my main task in the design phase was to add character to the minimalistic and functional UI.
Wireframes smoothly transformed into design. Iterations of a Search Results page.
Design is highly functional and unobtrusive but not without its own distinct characer.
Interactive Animations
The existing geometric branding was expanded with a set of responsive illustrations, playfully depicting concepts such as building, networking, or clarifying.
I hand coded the prototypes to test out different interactions.
See interactive examples live: Home page, Archipedia.
Illustrations for different sections.