Student Art Club Website

Click here to view the Figma Prototype

This is a project I am currently working on for a web design class. My client for this class is a student art organization at UCSD with both social and artistic elements. My team is currently in the middle of the hi-fi development stage, so some of the elements still have filler text or filler images. We are also in the process of tweaking things across the site for consistency and clarity. 

‍

User Interviews, Analysis, Summary

After interviewing several artists of various involvement in the org, my team and I found 3 general categories of artists: ‍

1. casual artists seeking companionship,

2. more experienced artists interested in business and passionate about ideals of identity,

3. particularly busy, more artistically professional students.

While all artists tended to value connection with other artists, more casual artists tended to cite enjoying drawing in the presence of others and "parallel play", while more professional artists talked specifically about seeking critique and specialized artistic knowledge from their peers. Casual artists seemed to particularly seek chill and/or playful vibes at events while professional artists, short on time, prioritized convenience.

‍

See the User Interview Summaries here: Summarized Personalities

‍

Competitive Analysis

My team and I did a competitive analysis of other sites, page by page, for the 5 pages we decided were appropriate for the art org website: Homepage, About Us, Events, Gallery, Contact Us. This was in addition to holistic evaluations of 5 other sites– which had been two of other student orgs, one of another art collective, an art gallery site, and Artstation. I decided to focus on the page by page analysis as I felt that it ultimately had a greater influence on our layout.

Overall, we found many benefits in seeing how other websites balanced the image and text content on each page. I found it particularly useful to see how some pages were very efficient with their space in order to present many images in a manner that didn't feel cluttered. I also took note of the concise, tonally appropriate copy, and the hierarchy of information. Gating information behind certain buttons and interactions helped visitors be selective with what they wanted to focus on even when a page stored a lot of content.

After evaluating some sites, I summarized the team's findings in bullets below each section.

‍

‍

In terms of workflow, I also found that summarizing the findings for each page was very useful when screenshot and pasted for reference on the lo-fi and hi-fi workspace. 

See our analysis in more detail here: Figjam Competitive Analysis 

‍

Lo-Fi: Figma link 

My team and I applied our competitive analysis to the rough layout of our lo-fi. We organized generally where we wanted text and image content, and made sure a hamburger menu was functional on the mobile version. 

‍

Some notable features we wanted to start indicating at this point was an "Add to Calendar" functionality for the featured events and a carousel to make it easy to browse multiple events, as well as the library of past art projects from the org (inspired by an event carousel from another student org site). We also wanted to start thinking about giving the first visible part of the homepage a strong visual element, and making sure that the homepage's copy would immediately convey the welcoming and inclusive nature of the org. 

‍

User Testing

The overall flow of the lo-fi prototype seemed intuitive with the user testing. The hamburger menu was unsurprisingly familiar to the user, and the navigation titles of the different pages were appropriate to the resources they held– at no point did the user click on the wrong page to find a piece of information for any of the test tasks they were given. 

‍

The user did have some confusion on the homepage. The background image used on the homepage landing area was large enough to span the entire length of the phone prototype. As a result, the user didn't realize until halfway through testing that they could scroll down the homepage, and as a result nearly missed key info. 

‍

There were also a few issues regarding a lot of the event-related content. In our lo-fi, we didn't have enough content implemented to guide the user on how exactly they would get involved with the org or attend the event. Though the date, time, and location was clearly provided, the information was too bare bones to make the user feel confident in knowing what the event was about. The user also pointed out at one point that they had no idea that the text, "@ LGBTRC", was a location. In the future, it is important that we designate an area for a short blurb describing each event and make sure that locations are written in natural human language, and not cryptic symbols and abbreviations (e.g. at the LGBT Resource Center).

‍

Hi-Fi: Student Art Org Desktop and Mobile Website

My team and I are still working on our hi-fi prototype. So far we are exploring ways of conveying the diverse and artistic nature of the org while making sure everything is still readable and functional. Some particularly helpful feedback we received from another team was to avoid using drop shadow on certain elements unless we wanted them to look clickable. For the magazine projects featured on the site, the other team also suggested that we display two pages together instead of one– one page for the cover, and another page to show the content inside. 

‍