UX and UI Case Study: POCA
Introduction
As many art students can attest to, oftentimes the arts are deemed unimportant compared to other disciplines like math and science. Unless you’re going to an arts-focused high school, the public school classes can feel stifling and unengaging.
Purple Orca Creative Arts is an art studio local to Vancouver that strives to engage students who don’t feel like they’re getting the creative freedom they need to pursue art as a passion, or career. The classes are open to students at all levels, and the owner goes by the mantra that “art should be lead, not framed.”
Kickoff Meeting
At the kickoff meeting, we were able to garner more information about the culture of POCA, as well as the values and business goals, to help drive our design process. Our client explained to us the relaxed and casual atmosphere at the studio and her goal of creating a space where everyone feels welcomed and creatively empowered.
“In the long term, the goal is to grow [the studio] as one solution for people. A lot of clients are Asian and…are thinking [of applying to] design school. That’s a long-term goal, I want to lead them into it. In the short term…right now my main focus is to get more people and get more well known.”
From this meeting, we deduced two business goals:
- Establish POCA as an art studio where students can go to work on portfolios to pursue art as a career
- Increase public awareness of the studio.
Research
Contextual Inquiry
To begin our research, we first went to the art studio. We wanted to gain a sense of the general atmosphere and vibe, so we could accurately capture POCA’s personality on the website.
One of the most prized aspects of the studio was the feeling of community and support; students would put up their latest artworks on the walls of the studio gallery-style, and everyone could go around the room putting up sticky notes with words of encouragement around the artwork.
It was a really important aspect of the studio that our client really cherished, and it was an element that the students looked forward to as well.
When brainstorming feature ideas, my team and I knew that we wanted to do our best to bring that in-studio experience and showcase the students' artwork as best we could.
Once we had our business goals and project goals, we moved on to the rest of the research phase to attain our users’ goals.
Comparative/Competitive Analysis
Our team took a look at several different art studios’ websites and noted what features were present, what we didn’t like, and what features we wanted to incorporate into our own responsive website.
The website “Luminous Elephant” was one that we gathered a lot of our inspiration from — we liked the widespread hero image on the homepage, as well as the information hierarchy on the pages. Because our client mentioned that the majority of her users were Chinese with English as their second language, when brainstorming feature ideas we knew that everything we implemented had to be simple, clean, and easy to understand.
Interviews & Surveys
We were able to conduct 8 interviews, both in person and over the phone, and after deploying our survey we received 44 responses. We were able to contact our clients’ current clients (the mothers of her students), and we also aimed our survey at anyone who had previously enrolled in art classes.
Our main goal was to get an idea of what features and functions people found important for an online art studio.
When asked what platform people used to view images, the majority of people said Instagram, and when asked what colour background they prefer viewing images on, a white background was voted as most popular. This gave us an idea of how we wanted our website to look, as well as how we wanted to integrate the studio’s instagram into the site.
When asked how important it was to read a description of an art piece, most people rated it as moderately important, and an art gallery and teacher portfolio page were the highest ranked pages that people would like to see.
This gave us a better idea of our user goals, and how we could design the site to suit their needs. They wanted to view the student’s work easily, gain a good understanding of the studio and teachers, and be able to easily register online.
Now that we had this information about the user’s preferences, we were able to move onto the planning stage…
Planning
Affinity Diagram
Once we had our qualitative information, we were able to move onto the Affinity Diagram. We took all of our qualitative data from both our interviews and surveys, and were able to categorize some space pain points, gallery viewing preferences, and general website preferences. Again, we were able to see how people preferred websites to look, what features they wanted, as well as some pain points people had with physical art galleries (which we used to help drive our UI decisions for the website).
Personas
From our user research, we came up with two different personas: Remi Lee, a loving mother of 2 young daughters, and Corrina Park, a teenager looking to build a portfolio to enrol in Emily Carr University.
We wanted to make sure the site was easy to use from both of these perspectives, and because our client’s current demographic was largely mothers enrolling their children, it made sense to have that as our primary persona. However, because many of our users were also high school students wanting to begin a career in art, we wanted to include that perspective when designing the experience.
Even though our personas were different ages, with different goals, they shared similar pain points. Namely, the inadequacy of the public school system’s art programs and the lack of creative freedom.
Storyboards
Now that we have our personas, we were able to move onto storyboards. Storyboards are simple illustrations that help us build empathy with our personas. We outlined the struggles of both Remi and Corrina, and showing how the website enables them to learn more about POCA and register for classes, ultimately helping them reach their goals.
Feature Prioritization
Since we had a limited amount of content from our client, our website was simple with just a few features that we wanted to really focus on:
We wanted to have the main feature of the website being the gallery, where the students’ artworks can be properly displayed for the public to see. We made it integrated with the instagram page, so our client can add photos to POCA’s instagram page and have it automatically uploaded to the website. We were also able to include the registration form feature into our website.
Another feature we wanted to include was having all the screens available in Mandarin as well as English, to account for our client’s current demographic.
Unfortunately, during this project our client was in Taiwan and we were unable to arrange meetings with her due to the time difference. Because of this, we had to move the “policies” feature from Must Haves (where it originally sat) simply because we did not have the content in time for our very fast-paced project. We also were unable to include the teacher’s portfolio for this project, however we would include that for future considerations.
Eventually, through some design studio and brainstorming, we decided to keep the student gallery as a continuous scroll on the bottom half of the page so the user can always view it no matter the screen they’re on. We also decided to keep the “register” icon as a floating tab, so that it could be accessible at all times.
User flow
The user flow was a great way to illustrate our vision of how our users would ideally move through our website.
We wanted to keep the flow as simple as possible since our website was very straightforward. Remi or Corrina would enter the page, read about POCA and the teachers, view the gallery, location, program information, then have the option to register for classes. Once they register they exit the website.
Design & Testing
UI Style Tile
Through initial testing with our client, we found that she preferred simple, colourful designs with lots of illustration. She wanted the colour scheme to centre around the turquoise colour in her logo.
She also gravitated towards a bright yellow colour, and the walls in her studio were painted with a gradient of white and blue. We used these elements to stylize our final screens.
We wanted to make sure that any colouring on the main page would fade out to a white colour so that the pictures could be more easily viewed, accounting for people’s preferences from our survey results.
Prototypes
Desktop
Starting with paper prototypes, we did some rough sketches of what we envisioned our screens to look like and started testing as soon as possible so that we could quickly screen out what doesn’t work for users.
During testing for the desktop version, users wanted to click on the teacher’s photos instead of the “read more” button situated underneath them. Revisiting our information architecture — how we organize and situate the content of the site — we decided to move the teacher’s photos into the expanded page and change the wording of the CTA to “About Us” so that the user knew what to expect after they clicked.
Originally, we had the landing page be the “About Us” section of the nav bar, with it highlighted to the user where they were on the site. However, this proved to be confusing to people as much of the feedback was that it “didn’t look like a homepage.”
To correct this, we changed the nav to show the POCA logo instead of “About Us”, since people intuitively knew to click on that to return to the landing screen.
We also included a welcome message indicating that it was the landing page, as indicated below:
Mobile
Since we were designing for responsive web, we also needed to make a mobile screen (tablets and other screens being out of scope for our timeline). The challenge for this was to try and translate the desktop experience to a mobile platform.
The main difference was that we had our main screen as one long scroll, with buttons placed underneath a small blurb of the page so the user can be redirected to more information. Through our testing, we discovered that people were having a difficult time seeing the “Read More” button. We decided to make them larger and more congruent with iOS interface elements. Adding the colour from the UI team also helped our user, improving testing results and mitigating the confusion.
We decided to keep the gallery as a fixed footer at the bottom of the page, for the user to easily click on it and expand to the full gallery. This way the user could always have access to the gallery, as they would with the desktop version while saving them from having to do a continuous scroll.
Future Considerations
If we had more time with this project, there are a few things we would like to add:
- Event calendar
Because POCA is a new art studio, having opened in October 2018, they didn’t have any public events so we deemed this feature unnecessary at this time.
2. Hiring page and volunteer sign up form
Our client mentioned that she wanted to grow her business at the kickoff meeting, so we would have liked to include a page on the website where people can easily apply to join the POCA team.
3. Policies page.
As mentioned previously, our client was, unfortunately, unable to gather this information for us, so it remains as a future consideration.
4. Comment section.
Ideally, we would like to include this feature so the public could comment directly on the students’ work in the gallery and offer words of encouragement. This would imitate the practice in the physical gallery, and bring to life the feeling of community in the studio!
5. Teacher portfolios.
From our research, 30 respondents said they would like to see the teacher’s work so they can see their abilities before registering, however we were unable to receive this content in time. While we added the teacher’s pictures to make the user feel more at ease prior to registration, in the future we would like to add more to show their qualifications and past work.
Conclusion
Even though we were not able to include all the features we wanted for this project, we hope that with this website we were successfully able to bridge the gap between the business goals, project goals, and user goals. With our duo-lingo option, gallery page, registration function, and teacher information we created a user-friendly and delightful website for all.
