Front End Engineer
Visual Design
Interaction Design
UX Research
Figma
Adobe Photoshop
Visual Studio Code
May
—
July
2023
The team thought that SCTickets would not only be a good name because we were comprised of USC students and wanted to start by targeting the USC population, but also thought that it would expand well into Southern California.
With the pandemic coming to an end, popular activities such as going to movie theaters and concerts resumed again. Naturally, there was a need to sell the tickets for these events and Ticketmaster is the most popular website for concert tickets. However, with the recent increases in student debt, inflation, and cost of living, concert-goers started becoming upset with Ticketmaster. Ticketmaster usually charges extremely high fees in order for tickets to be made and in some cases, doubling the cost of the ticket. This has caused an increase in popularity of other ticket selling websites, including resellers.
The current goal of SCTickets is to gain traction within the student community as a simple and convenient ticket reseller, with aims of gaining traction within the American market.
Since our initial target audience were students, I wanted to find out current student opinions on the state of the market. I created a Google Form and posted it on my social media as well as asked a few of my friends and classmates about their thoughts on Ticketmaster, Stubhub etc., and their thoughts on a new Web3 ticket reselling platform. Most of the opinions I received were along the same few thoughts:
We knew that it would be a tough task to try and overtake the industry giant, especially since the top brass of concert venue owning companies were affiliated with Ticketmaster. However, we thought that there was a good market and there was no better time to try it while Web3 and blockchains were a hot phenomenon.
When I joined the team, the engineers had already thought of the backend and were already implemented it. I joined the team to lead other members in creating a design for the website and overall theme/design system. We started off by brainstorming different ideas of what ideas and feelings we wanted the website to convey. The team did some research on ticket selling websites and NFT websites too. The website, we felt, should convey a simple and clean design, something that signifies the start of a new era since we would be one of the first to be selling tickets on the blockchain.
After the research was done, we started creating mockups to get a feel for what kind of website we wanted. We each created a few and brought them together to decide which ones had ideas we liked and should keep. The process then moved to wireframing so that we could focus on the individual elements of the website and not get distracted by the colors and themes of the website. Below are some of the mockups and wireframes we came up with during this phase.
Our team also worked with the business team and leadership to identify core values they wanted to reflect in the website and what kind of content they wanted to include in the pages like the about page etc. We then started creating prototypes for the website and proceeded to start coding them in Visual Studio Code.
When we started coding, we decided to split the pages among the team so that we could each have our own freedom creating the pages. After creating them we would then critique each others to see what kind of preferences each of us had. My role was to create the homepage and work with the other team members on the rest of the pages to ensure everything was going smoothly. I also came up with a list of features that needed to be included on the website such as mobile responsiveness, accessibility features, and user interaction features like cookies to enhance experiences. My team ran did well in this phase and ran into minimal issues with the occasional debugging session.
I initially made my wireframes on Figma and while that was enough in terms of flushing the UI out and the general layout of each page, I did not use the prototype function in Figma as much as I could have. Figma has a very extensive prototyping function and I only used it to minimally connect my pages. My pages had some issues with the overall flow of the website and since I was leading the web team, I thought that I could have done a better job planning things out from the beginning like with better wireframes and prototypes.