Reflect At Home
An Online Art Event
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.
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.
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.
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.
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.
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.
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.
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.