Since beginning UX bootcamp five weeks ago, I have been frequently reminded that the third project in the General Assembly course is the hardest one, by far. Instructors, course graduates, and fellow students further along in their programs have all said the same thing: do not underestimate the dreaded P3.
Reader, let me tell you — I did my best to heed their warnings. I took them so seriously, in fact, that everything turned out… sort of fine. On Friday, I submitted everything and did a 10-minute presentation my findings. Today it is Sunday. I am, as Adele says, on the other side.
What follows is a recap of the eight days of work that P3 entailed.
There are 21 students in my class, and we all got one of four website redesign prompts for this project. One was for an observatory, another was for an architecture school, and the third was for a dog adoption service. The fourth, which I was assigned, was for a rock formation in Arizona that is shaped like a wave. People love it on Instagram.
I was tasked with systematically evaluating whether the site meets its visitors’ needs, and adjust my redesign accordingly.
Some key contextual information, summarized in brief: the main people that use The Wave’s site are hikers, photographers, and nature enthusiasts. The main things they use the site for are applying to the permit lottery, planning their trip to The Wave, and learning how to visit.
I started the research process by conducting a detailed heuristic analysis of the current Wave site using the Abby method. I then did a comparative study of The Wave’s site by seeing how it measured up against its competitors in the natural attractions market. I focused on noting what sorts of features competing sites offered, and how usable they were.
With all this information in mind, I proceeded to analyze the Wave site’s information architecture. What kind of information is featured on the site? How is it presented? Could it be organized more effectively and efficiently?
I catalogued 30 representative items from the existing site and annotated the selection, noting what should be kept, improved, or swept away altogether. Next, I added to the pile features that the site should offer, and sorted all of it into six categories. (Information, Updates, Maps and Directions, Planning Your Trip, Reservations, and Photo Gallery.)
I then used a process called card sorting to give five users those 30+ items along with my chosen summarizing categories. They were asked to sort the items into the categories they saw fit — this process gave me a glimpse of their “mental model” of how the information should be organized. It helped me redefine the category names to make them as robust as possible — you can see the updated set in the screenshots below.
After I renamed the categories, I created a set of sub-categories for each — effectively writing the master blueprint for the site redesign. I tested these through a process called tree testing. I came up with 10 hypothetical tasks for five separate users to try to accomplish purely in reference to the blueprint — I asked them to tell me where they thought different pieces of information belonged, basically.
Materializing the Redesign
Now that I had laid the research-based groundwork for the redesign, it was time to start mocking it up. My main priority during was not aesthetic sophistication — you will probably not be shocked to learn this — but ease of use. The Wave’s current website is a bit disorganized and unwieldy, and if you don’t already know that A) you need a permit to visit, and B) you’ll probably have a hard time getting a permit, the site will likely leave you confused.
In addition to simplifying the lottery application process, I also wanted to make it possible for users to check in on their application to see if they have successfully acquired a permit.
By usability testing my first prototype with five participants, I got some valuable insights into how my design could be improved. While users were almost always able to accomplish what they wanted to accomplish, the flow and content organization they had to navigate were both a little unintuitive at points. Certain pieces of information were hard to find, and it wasn’t always clear what certain buttons did. My site was also way too text-heavy.
Prototype Round 2
With the insights I gleaned from the first round of usability testing, I went back to the drawing board.
This redesign of the redesign amounted to a fine-tuning of the basic underlying skeleton of the site. Clearly I was not yet thinking about how The Wave’s new site should really look visually — at this point, I was still trying to get it to work the way it should work.
During the second round of usability testing, I learned that I still had a couple sections in weird places, that I should rename the blog “Alerts / Updates,” and that my site could look more… contemporary. In other words: my functionality was in a pretty good place, but the visual character of my prototype recalled GeoSites.
Unlike a lot of students in my course, I don’t come from a design background of any kind. I studied English and Art History in college, and have primarily done cultural criticism for the past four years. My previous experience thinking about the aesthetics of slime, olfactory art, and AI-driven composition is only so helpful when I open up Sketch and try to put together an artboard. It has been fascinating trying out design for the first time, and it has also been frustrating. I know that I have a lot to learn.
Nonetheless, I gave the third and final prototype my best shot, and came up with something that could be called an improvement. You can see it here.
My instructors did not expect us to get our wireframes up to high-fidelity for P3, so this prototype is where I left off for the time being. That being said, if I was going to continue with this project, I would first need get the wireframes to the highest fidelity possible. Next I would have to usability test the updated prototype, and fill in the entire site (not all of the links work as it is, it features very little more than the necessary basic information, and there are no images.) If this hypothetical updated prototype tested well and met my success metrics, it would be good to go as an MVP (minimum viable product.)
Now that I’ve finished P3, I am halfway done with the UX design intensive. The program is ten weeks total, so I’ve got five weeks left. So far, this whole thing has been a whirlwind experience, as I’ve talked about in previous posts. I have learned a lot, and can do certain parts of UX work somewhat comfortably.
Apparently the hardest part of the program is over. It’s time for me to start seriously looking for jobs. P3 was consistently referred to as “the mountain,” because it marks the first time that we are tasked with doing the whole UX process, from start to finish, on our own. As is natural, I still regularly feel unsure of myself while I’m doing UX work, but I’m starting to get more of a grip on it, and that feels good. I have never learned something by doing a ten-week intensive before, and it’s quite a unique experience. This is a very visceral form of learning, much less about casual contemplation and much more about speed, iteration, and hands-on experience. I’m looking forward to seeing what comes next.