Click to see the prototypes with Adobe XD preview.
Brief
This is a hypothetic project as part of my study at Pratt Insititute, which targetted at redesign the official website of a non-profit organization called Arts for All (AFA). It was the major assignment for Dr.Craig MacDonald’s Information Architecture and Interaction Design course.
The project was done by Team Shark, a group of four graduate students, including Shradha Shree, Hye Rim Huang, Alan Yiren Wang, and Kerry Ran Yu.
Team Shark
We adopted the methodology of UCD (User-Centered Design). We began with conducting qualitative and quantitative user studies (interview, observation, and questionnaire), card sorting and tree testing, and competitive analysis to generate a draft site map, and created a low fidelity website accordingly. We then ran some usability test with the low-fi draft and adjusted the site map, and finally produced our final high fidelity prototype.
Understand the User
In order to focus on actual users of the Arts for All website, we did a quick research and found that AFA has categorized their users into five groups: Students, Artists, Parents, Teachers, and Youth Organization Staffs. Our team considers that teachers and youth organization staffs are somehow overlapped as they are both educators, so we chose to research the former four user groups. I focused specifically on the user group of artists.
Study Method
The team has developed three research paths based on three user research methods: Interview, observation, questionnaire.
Findings
Each of us has picked one user group to study. I was focused on artists. After three interviews and three observations, in addition of a few questionnaire replies*, I have a series of key findings, and create a persona accordingly.
*Due to some recruiting hardness, we didn’t use this data set, but the replies I got still provide some valuable insights.
Findings Clear Up 1
Combining other team members’ findings and mine, we has addresed the following problems as the key problems. We found more problems in the later process (see Structuring Contents, Competitive Analysis and Evaluate Prototype) , and they all provide valuable instructions to our design.
Structuring Content
Card Sorting
After walk through the original AFA website, team shark categorized the contents into 39 cards. Using Optimal Workshop, we ran a card sorting test with 8 participants.
Card Sorting: Similarity Matrix
Card Sorting: Dendrograms – Best Merge Method
Tree Test
Based on the result of card sorting, we then drafted a rough site map based, mostly using the s Similarity Matrix and the Best Merge Method provid by optimal workshop, and we started the Tree Testing. Since the team had some disagreement on the card/section naming and sorting stratergy, we decided to run two tests with same tasks on both versions.
More specifically, take task 8 as an example,
Imagine you are the parent whose child is in one of AFA’s program, and you want to volunteer for AFA. How would you apply?
the Pietree analysis shows that more users finds the volunteer card much easier, and their with Tree B, most users have conduct a correct first click.
Base on the these results, we decided to adopt Tree B in the following works.
Findings Clear Up 2
After studied the analysis, we have come up with the following problems of our draft site map.
Sitemap
With the data collected from former researches, we have decided to
- Merge the Programs section and Events section from the orignial site, for the users are always confuse with the difference between them;
- We separate divided “Who We Are” to two sections: “About Us” and “Our Team”, for that in the user research, artists are reportedly care about “people information”;
- We added Press and Reviews Section, because in the interview of the other user groups, participants suggested that testimonials will influence their decisions.
Iterate
We have also iterated the site map several times later, based on the estimation on the competitive analysis, and usability tests of our low-fidelity and high fidelity prototypes. One worth mentioning change is that we have separate the “Bring AFA to you” from the “Get Involved” section, for the reason that they have different functions, one is what AFA provides, while the other is what AFA demands (see Prototype Evaluation below).
Competitive Analysis
Other than veritical researches, it is also important to run some horizontal research, we have been using the method “Competitive Analysis“. We have selected three direct and three indirect competitor websites of Arts for all, and analyzed them in six dimensions.
We have developed a rating matrix, and rate the websites accordingly. Then we have chose the most representational pros and cons and take them as our design references, or instance:
Findings Clear Up 3
Instead of direct problem shooting, the Competitive Analysis provide a different view point of our design. The team has all agreed with the following problems that are extracted from this research.
Low Fidelity Prototype
Drafting the Prototype
Base on the researches, we started developing our low fidelity draft. This is a process was base on ‘MVP (Minimal Viable Product)’. It means that we chose several most valuable task flows and design only these parts of the website, which can help us evaluate our design with minimum works. We first defined our two tasks:
Task 1: Programs&Events > Literacy Through the Arts
Imagine you are a parent, and you want to enroll your child into Arts For All(AFA)’s “Literacy Through the Arts” program in New York. How would you find some more information about the program on AFA?Task 2: Donate > Donate for AFA
You have heard Arts For All(AFA) is a great non-profit organization that helps children who face socio-economic problems, and you want to donate $10 to it. Find where to make the donation.
Then each team member has contributed their own sketches, and then discuss and combined valuable ideas in our final paper draft.
I then used Sketch to create a interactive prototype for usability testing.
Evaluate the Prototype
Using this prototype, we conducted usability tests with two user group “Parents” and “Students” on both desktop and mobile screens and developed a Prototype Evaluation report, which provided findings that help us to continue optimize our design. For instance, we have adopted the first recommendation below to split the ‘Get involve’ section (see site map above).
Findings Clear Up 4
With study on our own design, it is much easier to gain direct ready-to-use recommendations.
High Fidelity Prototype
The Evolution of Details
Work Flow
Task 1. You want to donate 20 dollars to Arts for all. How would you donate?
Task 2. Imagine you want to volunteer for AFA and become a part of the programming committee. How would you apply?
Final Prototype
Click to see the prototypes with Adobe XD preview.
Project Review
Our project has been finally reviewed by our instructor Proffessor Craig MacDonald PhD, and has been critiqued by Shawn, who is an experienced UX designer. They have gave us constructive advice and possitive comments.
There are surely some flaws that needed to be fixed. For instance, because all of our four team members are from Asia, we have ignored some user behavior that are specifically addressed in the western culture background.
In the earlier version we have used the red-like-orange backgrounded check mark on the donation complete page, in order to fit our color theme. However, red-like colors are always hinting ‘warning’ in the western context. We later changed it to a green check without background, and it works fine.
This project helped me build up a basic understanding of information architecture and interface design, and how usually people would conduct this process. Admittedly, this was a hypothetic project and we have done it with an ideal, structured process, just as Dr.MacDonald has stated in our final class that design process in real life are usually messy. I kind of get it, because even with this ideal process, we still had a lot of back and forth and arguements included.
Lastly, I would like to say thank you to my three collegues. I really enjoyed working with you guys and this was like my best team work experience.
Go Team Shark!
Yiren Wang 