Dress For Success

Introduction

Key Project Data

Timeline: 12 weeks

Role: Information Architect, UI Designer

Tools: heurio.app, Optimal Workshop, FigJam, Figma, otter.ai

Project Objective

This project was a live client project as part of my UX capstone class. I conducted it in a team  

This was a live client project for my UX capstone class. I worked in a two person team for the Austin chapter of Dress for Success.

The client needed us to "uplevel" the design of their current website, streamline the website architecture, and make people more aware of what the organization has to offer. The focus of the architecture redesign was to provide easy access to:

• The donation flow
• Volunteer information
• Information about the organization's programs and services

Process

Phase 1: Conducting Design Research

Phase 2: Creating the Redesign

Phase 3: Testing new designs

Phase 4: Final Design

Phase 5: Lessons Learned

Conducting Design Research

Discovery  

We started out with a discovery phase containing building a sitemap, creating our project schedule, and doing a content audit. We also did a heuristic analysis at the same time to get a well-rounded picture of where the website was at at the moment.

Sitemap

To better visualize the overall structure, one of my teammates was tasked to create a sitemap of the current architecture. Having this document gave us a good visualization of how convoluted the website really was. 

‍

Schedule

Thanks to completing both audits and meeting with our client, we were able to decide on a direction for the entire project. We wanted to focus the first third of the project testing the current website, the second on creating designs, and the final third on testing our new designs. I was tasked to create an initial version of the schedule we would be following.

Content Audit

To start the discovery phase, my other teammate was tasked to do a content audit. The purpose of a content audit was for us to understand what content we were working on in order to restructure the architecture.

‍

Heuristic Analysis

Since we wanted to work efficiently, we used "heriuo.app" to conduct a heuristic analysis while we ran a content audit. Each of us was tasked to analyze the website separately in order to ensure we covered everything. This way we got the lay of the land while also picking up violations we could tackle quickly and easily. We came together at the end of the week to go through our results together and discuss the best course of action.

‍

Open Card Sorts  

After understanding how the content was laid out and the purpose each piece served, we proceeded to create a card sort test. Before making any massive changes we needed to see how our users would naturally categorize content, focusing on any key similarities that existed as this would be the foundation of how we would group things. Thanks to the data we sourced, we were able to determine the ideal amount of categories and had a good overview of what our users were expecting to see in them.

‍

Tree Testing

Once we knew how people were interpreting the navigation items, we created a tree test. Understanding how people grouped items together was critical, now we needed to verify how to lay things out so people could easily get to them. The tree test helped us to figure out how people naturally explored the options provided and gave us some insight into how to structure certain elements that we were unsure about. We were able to place content like testimonials, certain services or social media this way.

Creating the Redesign

Sitemap

With the information we got from the previous tests, we were able to create an updated sitemap. This basic version of a sitemap illustrates how we opted for a clean and simple approach, prioritizing streamlining the website over adding fluff.

The key differences are:

• Smaller quantity of main navigation options
• Merged pages as needed
• A clear and concise direction for each branch of the DFS website

Mockups

After completing the main architecture rework, we reached the visual portion of the project. I was tasked with creating the primary navigation, the "donate" section, and part of the "get involved" section.

Due to a lack of development funds from the organization's side, we decided to create our designs based on the tools Dress for Success were already using. To make our designs implementable by our client herself we based everything off of the options Squarespace has to offer without any custom coding necessary.

Since DFS already had an established visual identity and we didn't have the option of customizing our designs, we decided to create our mockups in grayscale (medium fidelity). This made our project deliverables clearer and would keep the client focused on the important aspects while our work is implemented. The visual design was minimal, the information architecture is what really made a difference.  

Testing new Designs  

Unmoderated First Click Test

Once we had our designs ready, we had to test them with users. For this purpose, we decided to create unmoderated first click tests. Our goal was to see if our design simplifications helped users get to the sections that we wanted them to get to quicker than the original website analytics show.

‍

Moderated First Click Test

After iterating based on the results of our First Click Test, we decided to verify our iterations by repeating the test, but doing a moderated version this time. This gave us the opportunity to have directly comparable results while also gaining additional insights based on the small scale interviewing that happened after each task. Additionally, we were able to reallocate time to create a more thorough handoff for our client by going this route and not doing a typical usability test with a design prototype.

Final Design

Lessons Learned

Takeaways

• I learned that Card Sort tests should be moderated
• The best way to solve a problem is to test out different designs
• Most importantly, I learned that it is my job as a UX designer to find the root cause of what a problem client is describing and determine the best course of action

Details

One of the first realizations we made was that our first test, a card sort test was giving us improper results. After further analyzing it, we realized that our participants were experiencing two main problems. We noticed that some participants had trouble understanding the prompt but since the test was unmoderated, they didn't have anyone to ask clarifying questions. Another problem participants had was with the lack of context of what Dress for Success does. We decided to pivot and ended up moderating most of the card sort tests in the end.

Working in a team, we naturally sometimes had different opinions on certain topics. Those topics included anything between where to put a certain section on the website to how to use typographic elements. My team and I quickly discovered that the most efficient way to reach a decision was to test it out if possible. We were able to save a lot of time on potential discussions and arguments by simply taking the scientific route.

My final takeaway was to take the clients requests for deliverables with a grain of salt. In the initial meeting our client shared a long list of symptoms with us. By asking the right questions, we quickly realized that in order to have a productive outcome and tackle those symptoms down the line, we had to concentrate our work on the information architecture and user interface.

‍