Archdata is a startup I designed and built with Parker Bossier. The application was originally designed and conceived at Luis Von Ahn's CMU Tech Startup Lab, subsequently the project has gone through a series of iterations. Trained as an architect, this project has personal significance to me. Parker and I are striving to create solutions to many of the problems I experienced first hand as a designer in the building design and construction industry.
Architects spend a significant amount of time researching buildings for precedent studies, inspiration, material research and client presentations. The primary method for such research takes place via blogs and digital publications designed primarily as news outlets with an architectural bend. Many architects and designers are conducting research and organizing the same or similar information in isolation. Archdata is a crowdsourced ecosystem design from the ground up allowing architects, designers, material manufacturers and enthusiasts to browse, gather, share and organize information in a mutually beneficial fashion.
Archdata’s information architecture isolates what we believe are the key components to each project — the building and it’s associated architect, elements, typologies and products. We designed our database from the ground up to link each of these key components (and their metadata), creating a network of information in which users can jump from one branch to the next ultimately giving users the information they need and the potential for serendipitous discovery of inspiration, products and references.
Given the highly graphic/visual nature of the network illustrated above, we built Archdata’s user experience with imagery at it’s core. The concept allows users to browse and search photos overlaid with relevant data that links to images and information sharing attributes.
UX Iterations/User Research
Over time, Archdata’s image tagging interface has gone through a series of iterations driven by user research and analysis. Our first instinct was to color coordinate each image tag with it’s category allowing users to visually scan by category. Lines drawn from the tag connects the tag to it’s specific element on the image (A). In theory, this made sense; however, users had a difficult time processing the information due to the visual noise. Furthermore, we learned that presenting the specific category of tag was less relevant for images and more relevant for search. We also explored various ways to display tags based on the context in which they are discovered. For example, we currently show a condensed version for the feed (E) and a more detailed view for the building page (F) as well as rollover states within the building view. As the user digs deeper and screen real estate is less of a premium, they uncover more information. Current live version (E,F) are displayed below as wireframe and live versions.
Archdata is a crowdsourced ecosystem which relies on the contributions of various individuals. With our users in mind we designed our tagging interface to be simple and elegant, with as few controls as possible. Images can easily contain many tags and become crowded therefore we designed the tags to point to specific locations while orienting the data to the left, top, right and bottom. This allows 4 tags to point to the same location without overlapping. When designing this functionality we were adamant about not introducing another button. We designed an interaction that flips the orientation of the data based on the vector or direction that the tag is moving towards. This allows users to easily drag tags from the database, drop them on to the image and move the mouse around to orient its data.
Archdata is a continuous work in progress as we talk to users, design, build and iterate. Our top priority at the moment is building out or product ecosystem allowing manufacturers to upload detailed information and tag buildings with their products. This functionality will allow users to view various product in context of the built environment. For updates follow our twitter and facebook page.