Background

Create a website for Not Mister Purple, a rock band based at the University of Pennsylvania. This website’s main purpose is to display our bio, the band members, upcoming shows, photos and videos of shows, and promote our social media presence.
Roles
UX Designer, Web Developer
Tools
HTML, CSS, Javascript, Bootstrap, Figma
Duration
1 week

Research

My research centered on understanding how other bands displayed their personalities while successfully promoting their shows and brands. I analyzed websites from rock and punk bands like Paramore, Knocked Loose, Turnstile, and Pinkshift in order to see how bands with edgier personalities could create clean websites.
Findings
  1. Compared to websites of corporations, band websites have more freedom to create unique layouts, add odd color schemes, and add unconventional fonts. While these choices may diminish a corporate website’s credibility, for a band website it only enhances their artistic persona.
  2. Oftentimes, the website is drastically changed to match the aesthetics of the band’s new album.
  3. Many features such as tour dates and merch may be displayed on the website but their functionality is handled by 3rd party services.

Mockup

Due to the band’s name, the color scheme revolves around purple with yellow as a compliment. Additionally, to exhibit our personality we used the decorative font Gesture as a header and logo font and Type Machine as our paragraph font.

Next Steps

Potential Improvements
  1. Add a ticketing function to allow users to buy tickets to NMP’s shows directly from our website. This will reduce the number of clicks needed to purchase tickets and increase revenue.
  2. Create a page to sell merch in order to increase revenue and branding.
  3. Incorporate a database through an API that will allow non-coding members of the band to easily upload photos, show dates, and bios to the website. This allows the website to be easily maintained.
  4. Combine the pages into one seamless page in order for users to see all the information without needing to click to different tabs.
Lessons Learned
  1. Visual language and organization of band websites.
  2. How to balance creative visual design and clean web design.
  3. Basic HTML, CSS, Bootstrap and Javascript animations.