Project Detail for Linked by YANY UX project by Xian Gu

An easy online portfolio and critique experience for art students and their teachers

Check out the prototypes!

Mobile: Desktop:

Overview

The project was commissioned by Young Audiences New York, a 66-year old nonprofit education organization that gives children and youth from under-resourced schools and neighborhoods a chance to experience and create art. Within their portfolio of programs, we designed for the LinkNYC program, which connects high school students to real world experiences in the fields of digital media, music production, and visual arts by giving them access to classes with practicing teaching artists and professional mentors.

Our goal was to create an app or mobile site that would allow LinkNYC students to upload their projects to be reviewed and critiqued by other students, Teaching Artists, and Mentors. Teaching Artists and Mentors should also be able to submit their own work examples.

In the past, YANY had tried other avenues to connect their students’ work online (Facebook, Instagram), but had not had success because students might not be allowed to access those particular sites while at school, or they may not be as active on those platforms.

Our measure of success would be consistent use of the app by at least 30% of the intended user group.

Methods

Team

Me, Helen Pan, Kristen Williams, and Lucy Zhao

My Main Roles

UX Researcher

UX Writer

Timeframe

3 weeks

Limitations & Parameters

Given our client’s needs, the end goal was clearly defined, however, intermediate steps were up to us to determine, as was the platform and look of the final product. We spent a great deal of effort coordinating user research and usability testing with them because we were designing for a very select audience. Their availability was limited, so we did our best to work with the subjects we could procure, and to fill in with additional research and testers when necessary.

Resources & Materials

We began our low-fidelity sketches on paper, then used Sketch to create our mid- and high-fidelity wireframes, linking them with InVision. We used Asana for project management.

Research

Going from our client prompt, we created a basic initial problem statement:

The growth in digital media has allowed students access to many different channels to express themselves through their art. Students currently don’t have a way to showcase their work online, making it difficult for teachers to give them feedback throughout their creative process. This limits their growth and doesn’t provide them with the necessary platform for creating their portfolios.How might we create a place where students can submit their work, showcase it portfolio-style, and collect feedback from teachers, mentors, and peers to document their progress?

For our research goals, we set out to learn the following:

Learn about different needs of students and teachers (plus mentors ifpossible)
Learn about art/media uploading practices and pain points
Learn about art/media critiquing practices and pain points
Gather top-level data on LinkNYC participants
Understand the competitive landscape for portfolio sharing and critiquing sites
Compare and contrast specific competitors and understand their strengths and weaknesses

With our problem and goals in mind, we began our 3-stage research with an online survey for as many Link participants as we could reach—students, teachers, and mentors. We asked 8 simple multiple choice questions with the goal of gathering top-level statistics to inform our design choices. For example, we asked about artwork medium types:

Though we didn’t get as many responses as we’d hoped, we still came away with helpful insights:

Critiques happen regularly and often, so a platform has to accommodate the activity level
Link students create artwork in a variety of media so the platform must have flexibility in ability to upload file types
The majority of users need or would benefit from mobile access
The majority of users are desktop and mobile-fluent, and would benefit from a dual-function platform
The volume of work created in Link varies, but the platform would have to accommodate at least a moderate volume of work

Concurrently, we conducted detailed user interviews as our second stage. We began with Link participants, but also added several other individuals in similar positions as art teachers or students to ensure we had enough material. We developed a detailed script covering the themes of showcasing & portfolio, feedback & critiquing, which we asked of all participants, and additional questions for students only and teachers only. See some of our questions below:

We got some great quotes from the process.

Here’s one from a student: “We only have an hour in class, and it would be nice if we can work from home and get feedback throughout our process.”

And one from a teacher: “The idea of having a fresh eye to look at your work is great. As long as they know the format and the rules of the creative community it could be a great benefit.”

Pulling our collected research into a report, we found the following key takeaways:

Students generally welcome critiques on their work
Students have trouble remembering face to face feedback
Students want to see their progress over time
Students are interested in seeing the work their teachers do
Students don’t know always how art works so with examples they can actually see it
Teachers want their students to be able to present and talk about their work
Teachers want to encourage students to keep them informed

For our third stage of research, we conducted a competitive analysis. Though we started with the concept of a traditional analysis comparing similar arts nonprofits with portfolio needs, we found that it was too small a niche to conduct research on. Though arts nonprofits abound, few of them had a similar portfolio agenda as our client. Instead, we decided it was more helpful to consider uploading and portfolio sites as “competitors,” so we could keep their designs in mind when developing our platform.

To that end, we identified a list of companies, then mapped them on a grid with general vs. art-specific on one axis and best for display vs. best for interaction on the other. Our goal was to tease out which companies do what best, to know what to emulate and what to avoid.

We also conducted a feature analysis in list format. This gave us a sense of the scope of each company as compared with our own intended scope:

Last, we conducted a visual feature analysis of key competitors to get an idea of what artist community platforms and uploading looks like and what features are most important. We researched Google Classroom because it has the capability of sharing feedback between teacher and student, and Dribbble and Behance, among others, to see art platforms. The YANY critique platform we are creating would be a combination of both:

In all, we found that the most easy to use uploading services didn’t often coincide with the best commenting functions, and that the divide between general and art-specific sites was large. For our purposes, we drew inspiration from the visual look of Behance or Dribbble while maintaining the ease of use of Dropbox or Google Classroom.

Synthesis

Once we had our research, we began our synthesis process with an affinity mapping of our interview likes, dislikes, behaviors, and quotes:

We found the following insights from the process:

Students need a platform they can easily access
They need to show it to future employer/school
Students need a way to showcase their work and receive feedback
Critiquing provides a way for students to develop personally and professionally
Teachers need a way to give feedback throughout the creative process
Students forget oral feedback
Interest in portfolio offering everything in one place
Tension between being geared towards YANY vs. publicly accessible portfolio
Difference between submission (private) vs. showcase (public)
Importance of conducting critiques in a timely and direct manner
Teachers want to connect to the students

Looking over our research as a whole with our affinity map, we were able to distill out a primary and secondary persona. Our primary user is a student, and the secondary a teacher:

We also revised our problem statement in light of our research:

Digital media growth has allowed students many different channels to express themselves artistically, but those from underprivileged schools are at a disadvantage when showcasing their talent due to the lack of tools and resources. Students don’t currently have a way to showcase their work online, making it difficult for teachers to give them feedback throughout their creative process, thereby limiting their growth.

Giselle, an aspiring photographer, is a digital media arts student at a NYC public school and needs a way to prepare for her future.

How might we set Giselle up for success and prepare for her potential future in digital media with the proper resources and tools to get her there?

Using Giselle, our primary persona, we mapped out her user journey to assess the current situation, paying special attention to her pitfalls and corresponding opportunities:

We also mapped out task flows for desktop and mobile for a student uploading work and reading a teacher comment:

We created user flows for posting a comment to another student’s work (mobile):

And exploring other peoples’ artwork via search or browse (desktop):

Finally, we mapped out site maps for the student side and teacher side, being sure to focus on simplicity, for maximum usability.

Ideation & Design

Following our synthesis process we were ready to move into ideation. We kicked this off with two rounds of design studio, a collaborative process of quick design ideation, pitching, critiquing, and converging.

Design studio was effective for both large-scale ideation and finer screen detail, and the process ensures everyone’s ideas are heard and iterated on. We used many of our hand sketches to begin the process of piecing together screen flows.

We also ideated on features, coming up with a list.

We then prioritized them via the MoSCoW method, separating must have, should have, could have, and won’t have features. For our MVP we would be focusing on must and should have features:

We determined at this stage that we needed three main functions:

At this point, we were ready to select our platform. We chose responsive web as our platform for the following reasons:

Research indicated most students use both web and mobile, with a slight preference for mobile
A web-based site allows them to ensure they can access it regardless of their device
Responsive web doesn’t require any downloads
A website run by YANY and greenlit by the school partner will function in school settings instead of being blocked
A website is more cost-efficient than a native app
Responsive web is agnostic to different operating systems (iOS vs. Android)

Our prototype was jointly created and iterated at each step with a desktop and a mobile version in mind.

For branding purposes, we also chose a name. After considering a few options, we went with Linked, a simple moniker that reflects the Link program and the theme of bringing people together through our art platform.

To close out our initial ideation process, we sketched out the key features of our platform on paper:

Testing & Iteration

With our paper wireframes, we were ready to begin testing. In all, we tested 21 users over 3 rounds of testing (low-fidelity, mid-fidelity, high-fidelity) in 2 formats: desktop and mobile.

We measured three KPIs:

Task Success (measured as a yes or no on whether user completed task)
Error Rate (measured as the number of mistaken clicks during each task)
Ease of Use (given by the user after prompting from interviewer, scale of 1-5, 1 being hardest, 5 being easiest)

Our test script covered 3 tasks each for student and teacher:

In our first round, we were pleased to have 100% task success across both the student and teacher tasks, though we had some errors and a moderate ease of use score:

It was helpful to discover some issues with our prototype, which we noted so we could address them later:

Search function is missing
Additional functions like privacy settings, disable comments, and edit/delete project aren't accessible from the account pages
Some language is unclear (“WIP” isn’t spelled out) or could be more intuitive (“ok” button could read “upload”)
In teacher view, there's no way to leave a general comment that isn’t tied to a specific part of the artwork
It would be helpful to prompt students to fill out blanks like description fields and comments where they otherwise might not

Following our first usability test round, we made a spreadsheet listing all our screens and noted where specific issues and questions arose. From this list, we decided what changes to make for our second prototype, drawn in Sketch. The following is an example of an iteration we made about annotations:

With our second digital prototype, we conducted another round of testing:

Though our success rate didn’t change, we had a little more difficulty with our errors and ease of use this round. We made sure to comb through our notes extra carefully for the following insights:

Users had trouble understanding the function to leave a comment on a specific part of the image vs. leaving a general comment, so that should be highlighted and clarified
Numbered comments need to be differentiated from numbered notifications
"See all" isn’t used consistently to indicate hidden content
Users wanted to see artwork by school, so an additional page would add to their experience
Text on the comment page should be broken up so it isn’t overwhelming

Once again, we set out to iterate on any confusing or missing features. One such iteration was notifications:

By our third test, we presented a much more polished, high-fidelity prototype. Happily, we got improved results:

Just a couple of small things were revealed in our last testing round:

There was still some confusion around the primary navigation bar of our desktop model, so relabeling was recommended
Proportion of primary to secondary navigation size in the desktop was too high
The name of the feature wasn’t included in the design but should be
Teacher view of student work didn’t include the status (WIP or final)

Before presenting our final prototype, we addressed those issues. Below is our iteration on global navigation:

Overall, our average metrics were as follows:

From round 2 (mid-fidelity) to round 3 (high-fidelity) testing, we improved on two of our three KPIs, with the third remaining constant:

Task success remained at 100%.

The error rate marginally increased in desktop testing and marginally declined in mobile (the objective is to have as small an error rate as possible).

The ease of use increased in both desktop and mobile (the objective it to have as high an ease as possible).

To wrap up our design process, we determined that a few additional wireframes were needed to complete the Linked experience, even though they weren’t used in our testing scenarios.

The first of these is a portfolio presentation link, a way for students to send a version of their portfolio to schools and employers that highlights their work and looks professional:

Similar to our photo critique function that allows teachers to leave comments on specific parts of an image, our video critique allows them to pause videos and leave comments on parts of a video. We also envisioned a similar function for audio files:

Finally, we added a login and sign-up process.

Now we could compare Giselle’s post-Linked user journey with her pre-Linked journey:

In our storyboard, Giselle goes out with her friends and takes pictures. She wants to upload them for her Link class, but finds that Facebook is blocked at school. She talks to her teacher, who introduces her to the new Linked platform for mobile and desktop. He explains that it would be the perfect place for her to upload her artwork. Giselle creates an account and gets started. She’s delighted she can show off her work to her teacher and other students!

During our client pitch meeting, YANY executives and stakeholders were very pleased with the easy to use platform we’d designed, and the comprehensiveness of our dual prototypes for desktop and mobile. They expressed particular interest in the rigorous UX process we followed from research to synthesis, ideation to testing. Given the budget constraints of a nonprofit, they let us know that they’d very much like to pursue development, but aren’t sure of the timeline. We promised to keep in touch in case of any questions or further requests.

Next Steps

In terms of next steps, we envisioned doing more testing, a heuristic evaluation against competitors, and marketing our product:

We also considered longer-term opportunities such as tailoring for mentors and lower-priority features from our prioritization exercise, and a blog:

Thinking back on our client target KPI of 30% consistent use, we set up a list of metrics that could be measured post-launch to hit that benchmark:

Percentage of students who create account
Percentage of students who log in at least once
Percentage of students who upload at least one art piece
Percentage of students who leave at least one comment
Percentage of students who view at least one artwork created by someone else
Percentage of students who send out portfolio link at least once
Percentage of teachers who leave at least one critique on student work
Percentage of teachers who upload at least one art piece
Percentage of teachers who view at least one artwork created by someone outside their class
Percentage of students who log in at least 4 times throughout the year and upload 2 pieces
Percentage of teachers who log in at least 8 times throughout the year and critique 4 pieces

Reflection

It was immensely gratifying to work with our client on this project. Their mission strongly aligned with my values and interest in the non-profit world, education, and the arts. Though we experienced minor challenges throughout the process in reaching them quickly and scheduling interviews/usability tests, we were able to pull together a compelling portfolio of quantitative and qualitative data, and to iron out usability issues through testing. We sought to get as much feedback from YANY as possible mid-design, so by our final presentation they knew what to expect. Overall, it was a smooth and enjoyable working process with my three teammates and the client.