Cameron Washington
UX designer

Reflect At Home

An Online Art Event

Introduction

Context:

  • Reflect At Home is a web app that serves as an Art Showcase. I started the project as a solution for not being able to host showcases in person during quarantine. Users would be able to filter through different art categories, and each artist would have their own page. I presented the idea to the District Productions team in December 2020. The app was deployed for three days, February 12-14. It has since been redeployed for display and portfolio purposes, with most the art removed. You can view the project here.

Target Audiences:

  • There were two target audiences. The first were the guests who had already attended a District show in-person before the pandemic. They were reached via Instagram posts and stories, as they were already following the account. The second audience was the extended network of the artists involved. The artists were encouraged to post about, so that people that otherwise had never heard of district would be aware of the event.

Project Details:

  • I handled the aspects of UX and UI Design, Web Development, Version Control and Deployment. The Marketing Lead gave the event exposure with Instagram posts and stories. The Company Founder handled artist outreach and gathered the materials that were put on display. The Graphic Designer made the logo and banner seen on the website and on Instagram. All 4 of us participated in testing the website for bugs, errors, and responsiveness.

 Reflect At Home

Sitemap:

This is the sitemap for this project. The navbar has a few external and internal links. It is possible to get to the Homepage, FAQ page, and About Us page at any time via the navbar. In order to get to Artist Rooms, the User must scroll down the Homepage. The user must go back to the Homepage in order to visit another room. There were 12 Artist Rooms in total, each containing text, images, and/or video. the combination of components used depended on the medium and style of art submitted by each individual artist. 


 Reflect At Home

Essential Components:

  1. I tested out several different responsive navbars for this site. 2 of them were sidebars, but they didn’t feel or look natural to me. I implemented a hamburger menu that opens vertically on mobile, with the links stacked vertically as well. 

  2. The banner actually doubles as a home button. I went through a few designs with the Graphic Designer. We settled on this one, as it felt the most symmetrical. It gives the “house” theme to this project. 

  3. I was taking an online JavaScript course at the time, and I learned how to implement filtering like this. A lighter shade of gold would have been more visible, and more WCAG friendly.

  4. Each artist has a picture, name, and hometown, and set of artwork associated with them. They are all JavaScript constants with a similar structure. Reusable components make coding easier, and keep the design cohesive. The “enter room” buttons support the “house” theme. 

The Gallery
Lessons Learned

With button styles, a little goes a long way.

I kept a fairly generic button style throughout the project. There are buttons in the artist room pages that look out of date, as if I made them 10 years ago. Just changing the border radius properties would've made a huge difference and given to a more modern feel.

Test multiple iterations.

I didn't have the team test out the project until a couple days before the event. They found bugs that could have been caught and fixed at least a week beforehand. I was using version control during development, so It wouldn't have been too much effort to deploy demos that the team could interact with along the way.

Keep Accessibility in mind.

The shade of gold that I chose for the filter buttons are dark in comparison to the red background. I didn't think anything of it during development. The colors were appealing and buttons highlight on hover, so it seemed acceptable. Later on, I learned about Web Content Accessibility Guidelines. Upon testing, The colors failed the WCAG test for User Interface Components, and for Text. Now I know that I have to run these tests when selecting colors.

Closing Thoughts:

Overall, this was a great project to develop and take on. I felt the pressure of playing multiple roles and completing the project in time for event date, but the time constraints pushed me to make the most of reusable components. I had a great team with me, and they helped out with the bugs, details, and marketing until the end. Failing the WCAG test was the most important lesson I learned from this. I have to be more diligent in making sure that everyone can enjoy my work in the future.