Select Page

RESPONSIVE WEBSITE

AIA Triangle

A complete overhaul of the website for the North Carolina Triangle (Raleigh, Durham & Chapel Hill) chapter of the American Institute of Architects (AIA Triangle or AIAT). They were looking for something bold that set them apart from other local and state divisions, while still fitting within the national AIA’s brand standards.

The 75-page site includes a shopping cart, a complicated calendar system, as well as a career board with paid listings and microsites for each of their internal groups.  We developed a site with a clear path for each of their visitors to navigate as well as a modern and appealing aesthetic.

GO TO THE WESBITE

THE PROBLEM

The AIAT needed a site that was visually appealing and would live up to the architects’ demanding expectation for quality design. However, it also needed to be functional and intuitive for the architects, partners, and the general public. It must also be easy to manage by the Member Services Coordinator who has no website management training.

CLIENT

The AIA Triangle. Stakeholders included the president of the chapter and the board.

DURATION

February to August 2019

ROLE

I was a one-man team from initial research and copy-writing to prototyping, building and launching the site.

RESPONSIBILITIES

  • User research
  • Architecture
  • Copywriting
  • Wireframing
  • Low and hi-fidelity prototyping
  • Accounting for accessibility
  • Iterating on designs

DELIVERABLE

A fully functional website including:

  • ecommerce
  • complicated calendar system
  • job board
  • a dozen microsites
  • a blog

EMPATHY

UNDERSTANDING THE AIAT

Before jumping in and getting lost in the details, my first step was to establish an understanding the AIA Triangle including what they do and their goals for the future. Once we had a clear focus for the organization’s future, we could determine how we could use the website to achieve those goals.

Organization Goals

Be a dynamic resource hub with up-to-date information that facilitates connections for our members and the curious public.

Website Goals

  1. Increase volunteer sign-up
  2. Drive newsletter sign-up
  3. Educate the public about the AIA, the profession of architecture and where to find an architect
  4. A resource for architects to find a community, expand their knowledge, advance their careers, and stay abreast of what’s necessary for their license

USER INTERVIEWS + DATA

To get a clear understanding of our users and be able to truly empathize with them, I conducted user interviews, stakeholder interviews and studied user analytic data.  Interviews were unmoderated questionairres with their members and partners.  I also reviewed feedback received by the clients concerning the old site, and lastly we looked at analytics from the old site to see where users went, where they left the site and where they spent the most time.  We also were able to categorize who our users are to understand what kind of user flows would be necessary.

MEMBERS

POTENTIAL MEMBERS

PARTNERS

POTENTIAL PARTNERS

EMPLOYERS

JOB SEEKERS

EDUCATORS

PUBLIC

PAIN POINTS

1

Knowledge

Architects and Partners alike wanted to find out what is happening at the AIA and be able to know how to easily engage.

2

CE Credits

One of the main draws of becoming a member with the AIA is having access to Continuing Education credits, but it was hard to know classes were available and how to sign up.

3

Public Education

The non-architects interviewed had largely incorrect information about what an architect does and how much they cost.

4

AESTHETICS

As a community of highly opinionated and visual artists, the architects felt that they would be more likely to use the site if it was more compelling, interesting and reflected the beauty of the buildings they design.

PERSONAS

Angeline

“Architecture is a visual art and
the buildings speak for themselves.”

Angeline is a young architect who needs a community to support her career and give her the resources to stay abreast of what is going on in architecture nationally and locally.

AGE

26

FAMILY

Single

PRONOUNS

She/Her

OCCUPATION

Architect

EDUCATION

MFA

HOMETOWN

Garner, NC

GOALS

  • Continuing Education credits
  • How to get involved in a community
  • Resources and guides for architects

FRUSTRATIONS

  • Bad design that makes me uninterested in the whole organization
  • Not being able to find what I’m looking for

Angeline recently graduated from NC State University and received her license to become an architect.  She has a job with a small local firm but misses being surrounded by passionate young minds who are still excited about the possibilities of architecture.  She is also hoping to find a mentor to help guide her through some of her career path.

GEORGE

“The best way to get started
is to stop talking and begin doing.”

George is considering partnering with the AIA Triangle, but wants to see if this organization will give him a return on his investment.  He needs to find out what the benefits are and what they have going on for companies that are not solely architecture firms.

EVELYN

“Don’t wait for everything to be perfect
before you start to enjoy your life.”

Evelyn is interested in building a custom home and plans to build in a neighborhood.  However, she is curious about the possibility of purchasing some land she found and working with an architect, but suspects it will be too expensive.

ARCHITECTURE

Determining the site architecture was challenging for this project because there are so many types of users and the sheer content that needs to be accessible on the site.  To start, I determined what content was essential for each of our personas. 

ARCHITECT

Includes current members, potential members, and students

  • A career board
  • Resources section with important information about handling things like Ethics and new environmental policies, etc.
  • Information about the Task Forces and how to get involved
  • Events Calendar
  • Easy way to pay dues and join
  • Scholarship information

PARTNERS

Includes current and potential partners

  • Career board for posting jobs
  • Description of Partner benefits
  • Events Calendar
  • Application to become a Partner
  • Recognition for being a Partner

ARCHITECT

Includes the media, educators, and potential clients

  • General information about the AIA Triangle for Media
  • What the AIA Triangle does
  • Classes teaching about architecture
  • The benefits and process of hiring an architect
  • Information about what the AIA does for the community
  • A database for finding an architect

THE SITEMAP

The sitemap is broken down into sections based on the user journeys established during the empathy phase.  Menu nomenclature is chosen specifically to be obvious where to find specific information.

WIREFRAMES

 

MAIN PAGE

This landing page needs to give an overview of who the AIA Triangle is and what they do immediately, then direct people to the information they came for.  Because the members have their own section, the focus for this page is on the public, prospective members and prospective partners.

JOIN THE AIA TRIANGLE

This wireframe is for potential members who are looking to understand what the benefits of becoming a member are.  They need to know what they will get out of it and how much it will cost.

USABILITY STUDY

INSIGHTS

1

MEMBER SECTION

Members were overwhelmed by the Members Section and there were several sections they did not think would be utilized, so this page was simplified and streamlined.

2

TASK FORCE LISTS

Users were annoyed about the amount of clicking to get to specific task force pages and so they were all added to the drop down menu

3

Adding partner logos

The user in charge of adding new partner logos was frustrated by the number of places that needed updating when a new partner joined, so this was updated to be able to change in one place and update site-wide.

THE SOLUTION

HOME

This is the original mockup for the main page which features the logo and mission statement with featured projects to gives the public a sense of what the architects in the Triangle are capable of and keeps members aware of what their fellows are working on. There is also a featured section for why hire an architect, upcoming events and an invitation to join the newsletter.

MEMBERS

The updated members page has quick links for the most common destinations plus a calendar list to give them the information they need about upcoming continuing education credit opportunities and community events.

JOIN

The Join page is an example of a majority of the website which has a huge amount of content.  By breaking it into smaller pieces with descriptive headlines, the information becomes much easier to scan so users can focus on the information that is important to them.  The information is also broken into sections through background color and images.

The design itself was based on the concept of the triangle with sharp angles and bold lines, just like an architect sketching a new building.  Because this website is so text-heavy, I wanted to use the text itself as design, maintain whitespace and limit the images.  By pushing the boundaries of the text size, I’ve created bold and surprising elements that are also informative.

I also worked to ensure that the AIA Triangle’s website was unique among the other AIA chapters while still staying within the AIA brand guidelines

Impact

The final product was launched without any issues and over the next two weeks there were a few minor adjustments to make as we received feedback from the users.  Overall, however, the comments were extremely positive from all of our user groups who loved the design and the new features that made the website so functional.

In order to accommodate the client who now needed to manage a brand new website system, I provided several one-on-one training sessions as well as Informational Guides about how to work with the website.

Conclusions

I learned an extraordinary amount from building this website.  Just a few things include time management, keeping clients on schedule, and planning a project on such a large scale.

Some things I did well were keeping our focus on the goals and the user’s needs and building the website from that foundation.  I also exceeded the client’s concepts on the design of the site and gave them something they were proud to show off.

Some things I have learned for the next project include being realistic about timelines and managing expectation. I also have a better understanding of my strengths and will focus my efforts on UX and UI design and leave hosting, moving websites and troubleshooting code to those that do that best.