School of Architecture at Taliesin​

The School of Architecture at Taliesin

Heuristic Analysis and Responsive Website Redesign

|

Role:
UX Researcher and Designer
Heuristic Analysis
Competitive Analysis
User Flows
Site Map
Wireframing & Prototype
Usability Testing
The Client
Taliesin West, located in Scottsdale Arizona was once the winter home of Frank Lloyd Wright. Today, it houses the Frank Lloyd Wright Foundation and serves as the main campus for the School of Architecture at Taliesin (SOAT). The current site is outdated in comparison to other universities and schools and doesn't allow users a way to apply and track their application status within the site.
Objective

To increase applications to the school by:

  • improving the navigability of the site

  • providing users with a way to apply and track their application status within the site

  • bringing the site up to the same level of relevancy as its competitors

Research | Heuristic Analysis

The first step of the process was to complete a heuristic analysis. I evaluated the site using the Abby Method and determined the most critical issues to be addressed for the user's experience.

Many of the problems from one area crossed into and affected the other aspects of the user experience. Primary causes for these poor scores came down to three issues:​​​​

​​

  1. READABILITY

  2. ACCESSIBILITY

  3. NAVIGATION

Findable

Serious Problem

Clear

Serious Problem

Accessible

Serious Problem

Communicative

Serious Problem

Useful

Minor Problem

Valuable

Serious Problem

Credible

Minor Problem

Critical Problem

Learnable
Controllable

Minor Problem

Delightful

Critical Problem

Readability and Accessibility

The use of a widened, bold, font creates a difficult reading experience for the user. Because of that, the clarity, communication and accessibility scores suffered - the wide font requires readers to slow down in order to process the information - disrupting the clarity of what is being communicated. It also detracts from the hierarchy of information being communicated because it becomes harder to distinguish what content is being emphasized versus supplemental text. Without any sight disabilities, it's a difficult font to read but for users who may have eyesight deficiencies or reading disabilities, the use of this type of font further compounds those problems, affecting the accessibility of the site. 

Diminishing the accessibility rating further was the use of color on the site. The majority of the site was in a black ground with tones of grey and with the one pop of color being red. Certain forms of colorblindness would read the entire site in greys and miss any clearly defined CTA. Because the main school color appears to be red, we won't be able to change the use of the color red from a branding perspective, however, we can reconfigure the site to make the CTAs more clearly defined in their placement.

Navigation

One of the biggest misses with the site is its navigation in terms of its inconsistency in appearance and actions throughout the website experience. 

 

Certain pages were only accessible from the footer, and when a page was accessed from the footer - the Main Nav wouldn't load properly at the top and text would actually overlap. Further interrupting it is an overlay window that cuts into the navigation experience and appears multiple times throughout the site.
 

Lastly, and possibly the biggest miss in terms of feature prioritization for a school website is the lack of a search bar.  Most school sites contain a search bar to enter a keyword search in order for the user to access pertinent information to their research of the institution; the lack of this feature diminishes the user's experience.

Research | Competitive Analysis

The next step was to perform a competitive analysis of other architecture school websites and the features of their sites. A competitive matrix was used to determine the four most comparable competitors. 

 

SYRACUSE UNIVERSITY (COLLEGE OF VISUAL AND PERFORMING ARTS)

 

CORNELL UNIVERSITY (SCHOOL OF ART, ARCHITECTURE, AND PLANNING)

 

WOODBURY UNIVERSITY SCHOOL OF ARCHITECTURE

 

THE PRATT INSTITUTE

 

Schools analyzed for comparison were selected on the criteria of being private Art or Architecture programs that required portfolio submittals from prospective students and considered elite programs in their fields.

Looking at how these schools structured their navigation and categorized information, the content of SOAT's site was then broken down and used in a card sort and tree-test which influenced the restructuring of the site navigation.

 

Based on the information collected, account creation and having a separate portal to access, track and follow application progress was a priority. The external site would be left to provide the necessary educational, financial and program info about the school.

Wireframes and Usability Testing

Two rounds of testing was conducted with 4 participants per round. Users were asked to complete several tasks with the primary being to locate and complete an online application. Wireframes were lo-fi clickable prototypes and brought up to Mid-Fi upon completion of testing.

Initial iterations had separate portals for current students vs applicants, but based on usability testing, users found it confusing that it wouldn't be the same account, in which permissions and access levels change once enrollment is verified.

Round 1: Original Lo-Fi Design Homescreen

Round 2: Iteration of Homescreen

Round 2: Iteration of My Account Dashboard

After two rounds of testing, it became apparent that the color scheme of red and black and grey was also difficult for the user to visually break up. So in the final mid-fi frames, the color blue was added in addition to red. I didn't want to affect the branding identity of the school by completely removing the red, however, in order to update the site and make it more visually friendly to the user, the addition of blue was important in terms of accessibility and the communication of information.

Final Mid-Fi Wireframe

Application Dashboard

"About" Landing Page

"Admissions" Landing Page

"Requirements" Detail Page

"Application Progress" Dashboard

Next Steps

Continue testing on Mid - Fi prototype to ensure ease of use and learnability of the site. Followed by usability testing with the mobile version of the site to ensure a seamless transition between devices.

Click Image to View Prototype