top of page
A live concert right in your dorm room.
Tiny Dorm Concerts is a web platform to showcase local musicians in an intimate, dorm-filmed performance, inspired by NPR's Tiny Desk Concerts. View the live website here.
Role:
UX Designer / Developer
Date:
Aug 2019-Nov 2019
PART I - BACKGROUND
Redesigning Tiny Dorm and its brand identity
Meet the Arts Management students behind Tiny Dorm team, founders Eric, Natalie, Matt, and Claire.
Tiny Dorm Concerts started out as a funny idea while watching NPR's desk concerts in the Briscoe dorm rooms during freshman year. It then soon became a quick reality under the actionable development team of SPEA Arts Management students. With an expansive crew of production specialists and musical talent, TDC quickly blew up and overtook the heart of Bloomington's booming music scene. However, what blew up in its content did not reflect in its not-so-explosive web design. The UI design was inconsistent, the brand was not agreed upon, there was barely any interactive components to the website. There was much to be done, and expansive opportunity for growth.
Matt approached me in 2019 about redesigning a simple website for TDC. And what started out as a simple favor for a good friend suddenly became an entire re-vamp into their brand identity in order to be more user-friendly, aesthetically pleasing, and evoke a feeling of Tiny Dorm hype. Inspired by the thought of working with a good friend with an awesome mission, I went beyond my standard design process and catapulted into an all-out redesign and promotional campaign to strategically bring TDC more web traffic and marketing opportunities. In this project, I coded the entire website utilizing an animated and responsive website design layout with HTML, CSS, and Javascript through Adobe Dreamweaver.
This is one of my favorite projects I've been involved in. Not only did I gain experience and greater understanding in two industries I have a passion for---music and filmography---but I was also reminded of my core values: to help and support creatives that I believe in, and surround myself with passion-driven art students who do it for the greater good.
PART II - RESEARCH
Usability Testing & Design Considerations
We wanted to create an experience in which the user "really feels like they are in the dorm concert with them". The first thing I did was figure out what was wrong with the current website, other than what Matt repeatedly called a "distasteful aesthetic". My main questions were: what is TDC's core function? How can that be reflected on their new site?
I had 15 users test out their current website, and found the following takeaways:
1. Their website isn't difficult to navigate, but nobody wants to do it. To be more specific--nobody needs to. The most common pain point in feedback with user testing I received was, "What's the purpose?" That is, what would drive a user to go onto the Tiny Dorm webpage if the videos are all on Youtube, the application is on Google Forms, and the updates are on Facebook?
2. Lack of musical genre distinction. TDC brings in a variety of artists. Their genres range from jazz to electro-pop funk. When people go onto the site, they don't know the difference between which band is what, and as a result they happen to pick a performance they simply don't vibe with. Taking this consideration, I decided to add a genre differentiation into my final web design.
3. Unprofessional booking inquiries. The contact page is actually just a set of links of their contact information and application page. After talking with management, we realized that we could seize the opportunity to bring web traffic by bringing the application as a page on the site rather than an external window to Google Forms.
4. Lack of mission and introduction. The home page takes the user straight into the performances without any introduction nor any insight as to what TDC aims to accomplish. The current layout also prioritizes date posted for performances in ascending order for its list view organization.
How can TDC redesign its site to reflect its brand identity?
Web design rationale
In coding the website, I was mostly inspired by Spotify’s simplicity of their minimal but effective usage of the green circular logo. For instance, Spotify dots all their periods in the green circle. It’s a small thing, but it’s a powerful and effective implementation into their brand that makes the user remember and associate it with their brand. In the actual website, I threw the yellow circle around as a period as well as a pre-loader between loading through each page. I also used it as a page marker in the menu.
We tried to be minimal in using yellow as the accenting differentiation color because too much of it could evoke anxiety. We also didn’t want to clash the yellow with the artist covers in the concerts page.
PART III - IDEATION
Key Features
Wireframes
I took the very traditional pen-and-paper approach to wireframing before bringing my prototype into Sketch. This helped me communicate my ideas and vision with the management team before diving into the high-fidelity prototype and code.
During this stage of the process, there was a lot of debate about what the website should have. A few members of the team wanted a gallery of images. or a "behind-the-scenes" process for their resume. Others wanted to add a Q&A or FACS section over a contact page. Some people wanted to put their entire staff team of over 80 members (branding, videography team, music scouting, finance members, etc.) and other members just wanted to put the leadership team. There wasn't a way to appease to every single person's desires and demands otherwise the website would look overly cluttered, so we had to have several meetings to figure out what is most important to include.
In the end, and taking into consideration my findings from the initial usability tests, we decided to include the following changes besides design format:
1. Consolidate mission statement into the Intro/Home page. This creates a seamless transition into what TDC is before heading straight into featured performances.
2. Create a separate Concerts page with data filters to distinguish between genres. This will help the user find performances in the specific type of music that they like to listen to, rather than having to sort through a jumble of performances and hope for the best.
3. Create an Application page for artists to apply to. I programmed the site so that the applicants information would be stored in Google Sheets rather than Google Forms, to create easier management of the applicants.
4. Create a Contact form box to contact TDC. This way, users can send any concerns immediately into the website rather than having to click the separate email window and management can easily respond accordingly.
5. Add a share link to the artists' performance so that the concert can be shared on any social media, since, after all, the whole point of TDC is to bring more attention to indie and small Bloomington artists trying to make it as performers. I used the ShareThis extension for this.
6. Add time stamps to individual performance pages so that the user knows when each song is being played if they want to skip through.
7. Implement more interaction and animations. This was just for fun and I used code snippets from CodePen.io and CodyHouse to implement specific interactions that I wanted to see. After all, TDC is all about fun!
Essential features and changes
PART IV - DESIGN
Design Reveal
This CSS effect uses a 3D rotate class, with individually defined keyframes to be a smooth transitional flow between each of the words.
Animated headline
Hover text overlay
This overlay filter darkens the image when the user hovers over a performance.
Genre filter
This data filter distinguishes each genre so that the user can find a performance in an organized fashion.
The application form and contact form are directly in the website in order to bring more web traffic and maintain contact info in a consistent way.
Application form
PART V - REFLECTION
Key Takeaways
Learning how to integrate back-end development
into my front-end knowledge
This is first time I've had to integrate back-end framework into the web design (linking information and sending it to Tiny Dorm's e-mail or to Google Sheets). It was a mild introduction, but after this experience and watching the tutorials, I feel more comfortable and confident in myself as an overall developer.
I haven't dabbled too much into animation in web design, but I really wanted to go all-out on this project rather than your basic, responsive webpage that has information. I wanted it to be interactive, fun, and user-friendly. This was a huge learning curve for me. I read a bunch of articles, watched tutorials, and developed a better understanding of how to connect keyframes into the code to make it respond the way that I want to. Of course, it was INCREDIBLY frustrating for most of the time. It wasn't very happy-go-lucky communication with management either. But I put the work into implementing my vision as the sole designer and front-end developer, and made it work. I'm grateful for the overall experience, because this also made me more empathetic to developers I'll be working with in future product design projects.
Trying new things, getting frustrated, and trying again
Inspiration drives motivation, not the ego
Being involved with such an inspiring project with these passionate Arts Management students and seeing the benefit of artist performances start off like this was the ultimate satisfaction and reward for all those nights I spent polishing up every detail. I love being involved in the music scene in this way, and I loved helping my friend get more establishment in his organization. This project helped me realize that you don’t have to work with huge or well-known clients in order to feed your ego and prove something to the public. You can just have an awesome time with a friend and support a good cause instead.
bottom of page