Website Redesign: Arts for All

Click to see the prototypes with Adobe XD preview.

16_Button1   16_Button2


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.

00_TeamShark

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.

02_userGroup

Study Method

The team has developed three research paths based on three user research methods: Interview, observation, questionnaire.

03_studyMethod

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.

06_Persona and Findings Alt.png

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.

01_ProblemClearUp.png


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.

07_cardSortingSimilarityMatrix

Card Sorting: Similarity Matrix

07_cardSortingBestMergeMethod

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.

08_treeTest.png

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.

08_treeTestPietreeAnalysis.png

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.

01_ProblemClearUp2.png

Sitemap

With the data collected from former researches, we have decided to

  1. Merge the Programs section and Events section from the orignial site, for the users are always confuse with the difference between them;
  2. 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”;
  3. We added Press and Reviews Section, because in the interview of the other user groups, participants suggested that testimonials will influence their decisions.

09_siteMapV1

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).

10_siteMapV2


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.

11_competitiveAnalysisMatrix.png

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:

11_competitiveAnalysisEg3.png11_competitiveAnalysisEg211_competitiveAnalysisEg1

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.

01_ProblemClearUp3.png


Low Fidelity Prototype

Drafting the Prototype

12_lowfiPrototype_HomePage.png

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.

12_lowfiPrototype_PaperDraft.png

12_lowfiPrototype.pngI 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.

01_ProblemClearUp4


High Fidelity Prototype

The Evolution of Details

14_DetailEvolution1.png

14_DetailEvolution2.png14_DetailEvolution3.png

Work Flow

Task 1. You want to donate 20 dollars to Arts for all. How would you donate?   

15_Workflow5

download sample video >

15_Workflow6

download sample video >

Task 2. Imagine you want to volunteer for AFA and become a part of the programming committee. How would you apply?

15_Workflow1

download sample video >

15_Workflow2

download sample video >

15_Workflow3

download sample video >

15_Workflow4

download sample video >

Final Prototype

Click to see the prototypes with Adobe XD preview.

16_Button1   16_Button2


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.

17_Donation Complete.png

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!

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s