GBD Architects Map
The GBD map served as my initiation into Product Design and design thinking. Even though I was just a high school senior when I crafted this, it unearthed my passion for design. The creation remains a staple for GBD to this day, designed in alignment with GBD's brand identity and spotlighting their impact on the Portland, OR landscape.
Organization
GBD Architects
Role
Product Designer
Tools
MapBox, Adobe Photoshop, Adobe Illustrator, Adobe Indesign
Date
Spring & Summer 2019
Map Purpose:
The map was created with 3 goals in mind:
Make website more interactive to users.
Better represent GBD’s body of work in Portland.
Make finding projects easier.
Research:
My research first started by looking at what the previous intern had designed. Although it was a good starting point, I didn’t think it fit into GBD’s brand identity and design style.
When looking at other architecture firms maps, I noticed a pattern of keeping to a more simple map design to highlight pins and work done. They were interactive and led users to each project’s page.
Map Design:
For the map, I designed and prototyped it on MapBox. This allowed me to control the colors of the map, the information shown at different zoom levels and create databases of where the GBD projects existed.
As seen above, I tried various color combos but ultimately designed a neutral and simple map that fit GBD’s minimalism.
Pin Design:
For the pin design, there were 3 initial ideas I had:
Differentiate Architecture vs Interior design projects with a special pin for each.
Differentiate GBD projects by Architecture, Interior and Master planning with different pins and a corresponding icon on each.
Showcase all the projects with the same pin and allow the user to click on each to learn more.
In the end, I choose to keep the pin the same for all projects. User-testing found that the pin designs for the other choices were too small and hard to read to serve their purpose. Additionally, the freeform pin design fit the freeform design of the GBD logo.
Map Filters:
Filters allow the user to more easily find the projects they are interested in. When designing the filters, I choose categories that pertain to information that already existed for projects. I also kept the design style similar to the overlay effect used as a description bar that already existed on the GBD website.
Map Pop-Up Design:
For the project pop-ups, I decided to again look into the GBD Brand Identity. I kept true to it by using the same colors, fonts and font sizes to display hierarchical information. The GBD website is largely composed of images therefore, I made the project take up most of the space and catch the user’s eye.
Takeaways:
This was a great experience to learn about Brand Identity and how to design components that don’t currently exist but still feel a part of the rest. I was also introduced to other design tools like:
Adobe Illustrator and Photoshop
Participating and learning from critiques
Iterating on feedback in a meaningful manner
You can check the map out below!
