GA UXDI Project 3: Columbia GSAPP

Alice Wang
Alice Wang UXDI Portfolio
5 min readJun 29, 2019

My Role: UX Designer| Duration: 2 Weeks| Project Status: Completed.

Personal Note: Huh. So I said the process is going by much smoother and enjoyable? (Condescending laugh at past self.) The 3rd project, or as my GA instructors called it, “The Mountain,” didn’t exactly turn me into Alex Honnold from Free Solo, triumphant and full of adrenaline at the end of the climb. Below’s image is more accurate to my feeling yesterday once all my deliverables were turned in.

George Costanza = my spirit animal.

Project 3 Overview

Our third project was a re-design of the Columbia GSAPP (Graduate Program for Architecture, Planning and Preservation) website that was broken out between group and individual work. The course of study was focused on Information Architecture so newly learned research methods were implemented such as card sorting, heuristic evaluations and a mobile audit. The main limitation was the amount of time assigned to complete the work. While two weeks had been previously suitable for Project 2, as my classmates and I realized for Project 3, two weeks would fly by and leave us incredibly busy up until 8:59am on Friday morning.

Archetype and Problem Statement

The archetype provided for Columbia GSAPP was a prospective architecture student interested in applying to Columbia’s grad program. The problem statement addressed that our archetype needed the right tools to decide whether or not Columbia GSAPP was the right fit for them and was overwhelmed by the mass of information available on the current website.

Problem Statement: How can we help potential and current Columbia grad students find the resources they need to apply for or continue their architecture studies?

Research Methods

First, my team and I conducted usability testing with five users who had experience searching for Continuing Education programs (found through a screener survey) and asked them to accomplish a series of tasks geared around navigating the current GSAPP website for information about degree requirements, applications, events and international study. We also conducted an initial round of open and closed card sorting to determine what categories seemed most intuitive to users in the Navigation bar.

Through the individual coursework, I also conducted heuristic evaluations to compare individual screen pages based on UX standards of function/design, a business model canvas, a mobile audit comparing the mobile and desktop views and experiences as well as feature analysis with both direct competitors and comparators. An initial site map of the whole website and user flow of one task was also created to better understand the current navigation flow of a typical user.

Insights from Research

What the findings and insights from research showed was that the actual information on the website was valuable and necessary to help a prospective or current student understand the GSAPP program. However, the visual display of the information was distracting (overuse of animated multimedia, neon color choices) and prevented users from getting directly to where they needed to go.

Top left: Competitive Matrix, Top right: Competitive Feature Analysis, Bottom left: Heuristic Evaluation, Bottom Right: Mobile Audit

Mid-Fidelity Wireframes and Round 2 Research Methods

Before creating a mid-fidelity prototype, I sketched out some general ideas of how I could improve and re-design the website on pen and paper before transferring those ideas digitally into Sketch. I also conducted another round of closed card sorting with my revised navigation bar to see if users would sort the topics on the website into my proposed categories. I then adjusted some design elements based on card sorting results and created the wireframes digitally in Sketch in grayscale.

Round 2 of usability testing with my first prototype showed improved success rates of 17%, and time to complete and difficulty ratings also decreased. Testers made some callouts about Navigation bar spacing and a need for a vertical imagery for sub-Navigation which was adjusted into the final prototype submitted. Overall though, the results showed the new simpler and more streamlined re-design was received favorably by all users.

Left: Original homepage in Grayscale, Right: Mid-Fidelity re-design
Left: Original GSAPP global page, Right: re-designed GSAPP global page

Link to Final Prototype

Spec Document

Along with the final report due, we were also tasked to create a spec document (or spec doc) with all details clearly labeled and explained of re-design changes which would in the real world be passed to a developer team for production. The document included a redesigned site map, user flow and side by side comparisons of webpages with annotations to list out all changes.

Example of Annotations

Reflection

While yes, technically I did feel a major sense of accomplishment after Project 3 was completed, overall the project was by far the hardest work I’ve ever put in in my entire life (and that’s including planning a wedding in five months). The sheer amount of research methods conducted in the span of less than two weeks left my head feeling dizzy, and translating all the data and research into mid-fidelity wireframes and a professional final report, spec doc and final presentation was no small feat.

With that said, I definitely felt a sense of pride at my own work and for my classmates when thinking back to Day One of my immersive program where innocent Alice had no idea what the word “heuristic” meant or could barely adjust her Gmail settings, let alone navigate the worlds of Sketch or Invision. While I still have a looooong way to go, I’m at the point now where I know basic UX methods and now just look forward to improving my skills in design, research and presentation. I’ve already taken mental note of every classmate who’s better than me at any particular skillset, and plan to harass them next week to teach me their ways…..that is, after everyone’s recovered from P3!

--

--