top of page
Orchestra

Live broadcasts

OrchLive Case Study

​

Project Overview and Goals

Overview
Home Theater System

Stream from Home

Mock Orchestra want to diversify their musical offerings to keep up to date with new technologies. While they don't plan to stop concerts live from the beautiful stage, creating options for people beyond those doors will help increase business flow.

​

The goal was to create a website that would allow users to stream concerts live from their home and listen to their favorite past performances/albums all from their own home. I wanted a way to achieve the concert going experience without having to step outside the house.

​​

My role for this project was the sole designer, creative, and researcher.

Image by Denise Jans

Buy Albums

The Problem and Users

The Problem and our Users

While attending an orchestra in person is
lovely, it often is not the most achievable event for people with busy lives, children, working multiple jobs, and whatever else life throws our way short notice. Sometimes we can’t make our scheduled events, and sometimes life prevents us from having the resources to take the night off to see our favorite orchestra.

​

Our target audience for this application includes current and past orchestra patrons, families with children, and people with disabilities who need accessibility information. These were the groups that I polled for my research survey.

 

It was concluded from the survey that 78% of users surveyed discussed the problem of time involved to attend an orchestra concert in person. Another 65% said that the costs of attendance were another main pain point.

​

Orchestra Site User Journey Map .jpg

The Process

I began with paper sketches of various home page layouts. I brainstormed the website scaffolding (information architecture) and created a sitemap. I turned those all into digital wireframes. The main design focus was to create strong IA that gave users the most options to enjoy the orchestra.  This wound up creating too much due to scope creep and had to spend some time restructuring to simplify the flows and navigation. From there I finished the wireframes and created a prototype to test.

The Process
Paper Wireframes Part 1

Sketches on paper of various screen layouts for the music steaming application.

More Paper Wireframes

Sketches on paper of various screen layouts for the music steaming application.

Steam Music Home Page

Digital wireframes in Figma

Lowfi prototype screenshot

Wireframes all connected together to create the user flows for my first ever prototype.

I conducted a usability study to determine the effectiveness of the user flow.  During the user testing 80% users found the navigation bar very cluttered and unnecessary. Every users was unable to complete the requested user flow due to a missing album information page in the flow to add items into the cart. I removed the extra side navigation filters as they just cluttered up the page and did not add to the intended flow. I added the missing information page and also added the remove from basket button to increase usability.

Usability Study

Shopping Cart

This layout shows the cluttered navigation bar with the large back button that users experienced during the usability study.

Shopping Basket – 1

The mockup shows the changes I made to create a back button icon and place it opposite the navigation menu in the header. This also displays the intended content warnings of age restrictions and any potential flashing light or accessibility issues with the games.

Item Description Page

This is the missing page from the user flow that I added to complete the entire check out process.

iPhone Home Page

I created extra page sizes to my mockup to allow for responsiveness throughout the whole design.

What I learned and moving forward

The final designs came out looking clean with good usability for the checkout process. I struggled significantly working in Adobe XD at the beginning. I was unsure exactly how to create the proper setup to allow for responsiveness in the different parts. This definitely set me behind schedule which is why so much placeholder text is still present in the final prototype.

 

However I believe that I missed the mark a bit on this project in terms of trying to solve the user problems. I think the website is workable as a shop but I could have focused more on the live concerts more to stay true to the users. I leaned into the prompt over the original design idea of my own. Those conflicts were very apparent during the whole process.

​

The next steps for this project would be adjusting the flows to more align with my solutions for the users problems. I would build out the profile section into more detail with the options for QR code scanning on already purchased tickets. The design I wanted to created wasn't achievable with the skills I had while working on the project. I would like to try and work in a different program to accomplish what I had originally in my head.

bottom of page