Case Study

Desktop Website Designer

Gnarly Music Festival has been pitched to financial backers and… they would love to invest! But, the festival is nothing but a pitch deck at the moment, and the creators are going to need much more if they plan to launch by next year!

So, the creators of GMF must actually market the festival and incorporate technology to share relevant information (the origin & purpose of GMF, performers, a map of the park, etc) by building a desktop website, mobile website, and mobile app. This way, festival goers can access GMF from any device. Gnarly, right?!

We started working on the mobile website first as the baseline for the mobile app and the desktop website since it is the perfect marriage of the two. Once that was built, I designed the desktop site.

First, I started with the homepage. This would be our audience’s introduction to the brand, so it had to encompass the culture and evoke the intended emotion necessary to drive ticket sales.

I placed our logos and tagline first so it would be the very first thing users see, and hopefully, become familiar with eventually. Then, I added the dates and location of the festival. Next, I placed a navigation bar so users can easily toggle between pages on the website. I named the pages “About,” “Merch,” “Vendors,” “Buy Tickets,” “Line-up,” and “About Us.” I also added a copyright-free image of an audience with flashing lights to convey a party-esque concert, which is what GMF is. I placed three boxes on the homepage to show our most popular pages — presumably of course — the line-up and our merchandise as well as a recap video (actually a copyright-free image with a play button to emulate a video).

Lastly, I built the footer complete with a newsletter subscription bar, social media icons, and pertinent brand documents (Privacy Policy and Terms of Use). This footer was copied to each page by simply dragging over each element, pressing Command + C, navigating to each page, pressing Command + V, and locking the elements so they would not be moved/altered while editing the pages.

Next, I shifted focus to the “Line-Up” page. I resized the frame to fit all of the performers before adding 50 rectangle elements shaped as squares. I added another six boxes at the bottom for the DJs and hosts. I saved images of each artist/band and placed them in the squares one-by-one.

For copyright purposes, I added a disclaimer above the footer to show that we did not own those images, but we were authorized to use them. Like other festivals, the artists would be required to send us promotional materials for marketing purposes.

Then, I moved on to the “About” page. All of the copy was already typed, so I simply copied the text box and placed it on the page. After brainstorming a design, I decided to use the triangles from our logo and site background to increase our brand awareness. Then, I resized the copy and placed it in the triangles. The last finishing touches were adding the two circular images by placing two ellipses then placing images in them.

Afterwards, I built the “Vendors” page. I added a similar heading to the top for continuity, then typed out the “Shop” and “Food” subheadings to differentiate between the vendors. I added six rectangles to the top and five rectangles to the bottom before typing out names for each business. Though this took a lot of editing as I had to resize the images to fit on one or two lines, center-align the business names, and places photos into the squares. Lastly, I transferred the copy from the mobile website for a short descriptor of each vendor type.

Next, I built a “Buy Tickets” page complete with a clickable button that would take users to AXS. Then, I placed for rectangles, colored them blue, and added copy in them to describe the various ticket levels we offer.

Then, I designed the “Contact Us” page with non-active buttons to emulate ones users could press to automatically input our phone number to easily make a call or automatically input our email address to easily send us an email. I also copied over text from the mobile site encouraging communication from users. I placed a photo inside of the rectangle I placed on the bottom-half of the page that was relevant to the site because it shows a phone, which could be used to contact us, and a concert. To finish this page, I added our social media information and mailing address.

Lastly, I designed our store. This would only serve as a preview of the merchandise we would offer at the festival because we wanted all of our merchandise to be exclusive so users would have to actually attend the festival!

I used Canva to create mock-ups of two t-shirts, a hoodie, and a water bottle. The logos on the merchandise are advertised as the work of local artists to incentivize supporting local businesses. However, they were actually created by one of my group members. The back of the shirts and hoodie features a list of the performers to commemorate the legendary line-up.

Through designing this desktop website, I discovered how largely user-experience impacts the way brands design their technology. A website is built entirely with the user in mind so that it is easily functional, understandable, and intriguing to the intended audience for the purpose of selling products, advertising events, marketing a company, etc.

Also, I learned how to use Figma software to create a fully-functioning website including how to create & re-size frames for content, place images, change fonts & colors, and building click-able buttons. There was no domain for the site, so it does not live on the net, but we completely built it, frame-by-frame, and wired it to run as a prototype.