-4- INFORMATION ARCHITECTURE
The key foundation for Swift Tix to be successful was determined to be a mix of these three qualities: immersive, secure, and smooth. These were the three criteria that all design decisions had to meet.
Note: Accessibility is a requirement for all 21st century design projects. That is - it's an implicit guide that must be satisfied in each step of the process.
Feel free to click any of the images below to view at full size.
ORANGE indicates a link to a new page. PURPLE indicates a link to a new page that is also the child of another page.
Yup, this isn't an exaggeration or anything, selling is this simple on Swift Tix. Mainly because you can only sell tickets you've bought on the site, which adds an innate layer of security and confidence to all transactions since the primary market is always thoroughly vetted and legitimate!
It also saves you time with listing details - just enter the price you want to sell at and you're good to go!
If you’ve used one of the prototypes or skipped down to the final mockups, you might be scratching your head at how different these look. Truth be told, my first design ideas were pretty barebones and didn’t become more creative until I picked apart the websites of my competitors.
%20-%20DESKTOP.png)
HOME PAGE
My initial design included a static navigation bar and was more influenced by shopping sites like Grailed rather than Live Nation. Compact squares that showed the location, artist image, artist name, and price range of available tickets seemed like a quick, efficient way for the user to get a good summary of relevant information.
PRE-SALE
One of the items on the navigation bar was a COMING UP section that made browsing & joining upcoming ticket pre-sales a simple one click process. I organized these events under one tab and provided each with a PRE-SAVE button. I realized a showy design could only work by minimizing the actions to get from A to B.
This is the original concept for browsing listings on mobile. Similar to the above, very bare bones and ultimately felt too much like a mundane reconstruction of the designs of my competitors. This concept felt forced - it wasn't friendly and crammed the screen.
Stubs was the part of the user's account that held purchased tickets. It seemed obvious on mobile devices to make the ticket take up the length of the screen. Playing with size this way was one good step in the right direction that actually helped me later on.
My dissatisfaction with the low fidelity wireframes made me go back to the drawing board completely. I thought about the audience described in the user persona - this was a site for music lovers. And being a music lover myself, I started to think about how the information architecture could speak to fans the same way good music does.
I began by retooling the home page with useful, focused sections that were expanded to full pages if necessary. This helped me form a much more practical site map than I had originally designed, while still allowing me to be creative. Click to enlarge the images.
- The RECOMMENDED FOR YOU section shows musicians you might like based on your concert history in a playful bubble layout, with additional details available upon hover like rating, genre, number of shows & tickets, and even a blurb for some of the bigger artists.
- The ALL GENRES section shows artists performing near you based on the genre icon that you click. You can then directly go to any of the artist’s landing pages via clicking on them.
- The PRE-SALE section is a preview of the PRE-SALE page. It’s a slideshow that shows some of the popular pre-sale events available for signup. Clicking the “Sign Up” button (not functional in this prototype) would let you begin the sign up user flow on the spot, or you can click the image itself to visit that event’s section on the PRE-SALE page.
- The FESTIVALS section is a preview of the FESTIVALS page. It shows the 4 biggest festivals happening near you, and hovering over one of the panels reveals some standouts among the setlist to pique your interest.
The original “home” page was refactored into an appropriate SEARCH page because I decided that each artist should have their own personally designed landing page. This ARTIST page provides all the musician related information and actions a user would need in a sleek, accessible fashion:
- the artist’s bio summary
- immediate access to the show in your city or the next 2 closest ones
- reviews
- highlight videos
- similar artists you might like
- options to turn on ticket notifications, join their email list, or hide the artist site wide.
.webp)
This section near the top is what I like to call the MARQUEE SECTION. It’s another slideshow type component but it’s reserved for artists that partner and promote directly through the site. In addition to being the first thing visitors see, they get a blurb summarizing their event along with a button that users can click to browse tickets for that event. Also, either in place of or addition to their usual landing page, they get a custom designed spread as seen in this example here with Jorja Smith.
Similarly, Swift Tix would ideally partner with players in the festival circuit as well. Most of these festivals don’t have much of a say in how their tickets are sold on third party vendors, so working with them directly to create custom landing pages that reflect their brand would help them cater more to their demographics. The top half will always be a information section that doesn’t really vary much, so the bottom half is where the collaboration really begins.
If this site became a reality, there will need to be a core part of the team that focuses solely on the aesthetics. Other ticket sales websites are unabashedly ecommerce apparatuses, but Swift Tix was created with the understanding that music fans are already looking to make a purchase, so if you focus more on the environment you provide them rather than their pockets, they’ll be more eager to provide you with business again and again.
The first guiding principle mentioned above was immersion because the platforms of Swift Tix's competitors echoed none of the passion or excitement that is associated with live events, especially concerts. To stand out among the crowd of ticket sales platforms, the user interface was designed to feel warmer, friendlier, and more reflective of its overall purpose: to help the user form another amazing memory from attending a music event they find on the site.
Shapes and Icons: Soft shapes like circles and rounded rectangles were used for buttons, image borders, controls, and interactive components. Quickly identifiable and rounded icons were preferred for the menus, genres, and recurring elements like reviews and artist page controls.
Note that these icons aren't all of the same set or style - from an initial glance, they seem vastly different but through careful distribution they all succeed in establishing the tone of their associated website area:
GENRE
Playful and colorful
MENU
Flat and straight edge, direct
SITE POLICIES
Scratchy & evocative
REVIEWS
Simple, denotes certain action
Fonts: Multiple fonts of various styles - playful, sans serif, monospaced, etc. - signal different categories of information and calls to action. For example, "Titan One" is only used on buttons, while "Vast Shadow" is used to emphasize important contextual information and switches within a page or overlay. You can see all the fonts used along with their semantic meanings below:
Colors: In general different shades of French Vanilla, gold, and brown were used to create comfort, be easy on the eyes, and disappear when serving as the backdrop to more vibrant colorful elements, images, or controls. Conversely to achieve this end, harsh colors like black and white, along with typical marketplace colors like green and blue were avoided. Black is only used to denote that the user has "stepped out" of the main site, like with overlays as well as all account related settings and information.
All ARTIST pages are given a distinct light background color to symbolize how each artist is unique - their artist images are chosen to carefully complement these colors as well. The following colors were chosen for the 12 available sample artist pages:
- RED - Kanye West (power, bold, daring, Akira)
- BLUE - The Weeknd (longing, melancholy, moody, atmosphere)
- YELLOW - SZA (exciting, artistic spark, live sensation, electric vocals)
- PURPLE - Beyoncé (royal, queen, powerhouse, dazzling)
- ORANGE - Rex Orange County (summer, indie, his name, warmth)
- SEAFOAM - Lil Uzi Vert (alien, space, not of this earth, extraterrestrial)
- PINK - SoFaygo (his brand colors, his hair, glitzy music, bubblegum)
- BLOOD ORANGE - Ed Sheeran (his hair, acoustic, fall, vocal ballads)
- MINT - Jesse McCartney (energetic, young, poppy rock, boy band)
- INDIGO - Elton John (savant, artsy, icon, heavyweight)
- TURQUOISE - Freddie Gibbs (introspective, smooth, soulful, lyrical)
- LIME - Tyler, the Creator (eccentric, artsy, stand out, wild)
The 4 ticket types all have different colors as well:
- STANDARD - regular tickets part of general public onsale
- RESALE - tickets available on the secondary market sold by other fans
- PLATINUM - standard or resale tickets that include other benefits like parking passes, early entry, special merch or discounts, etc. (NOT RELATED TO TICKETMASTER PLATINUM TICKETS)
- VIP - tickets that come with VIP event benefits and packages
And finally, the last major use of color was for the ratings that accompany every ticket:
- PRICEY - you can probably find a better deal. Avoid this.
- OKAY - not the best or the worst, pretty mediocre deal. Keep looking.
- GOOD - nice and fair, should fit your bare minimum expectations.
- GREAT - a stand out deal. Great bang for your buck, might be the one.
- STEAL - among the best deals for this event. You should buy this now.
Interactivity: The various components throughout the site are what give it life and make it feel alive. To appeal to the sentiments of music fans, a design team would create different themes and types of stylized interactive controls that are capable and unobtrusive. This doesn't mean they need to be subtle, only that they fit within the design language, do not distract the user, and do not impede their core function.
Here are a few cool examples:
MARQUEE component - highlights different artists with a brand image, blurb, and button to their special artist page
ALL GENRES component - uses bubbly icons for each genre that refresh the section below with available artists near the user, if there are any
FESTIVALS component - jumbotron that highlights the biggest festival partners with explorative previews of performing artists
ABOUT US page - really play up the musical inspiration and use nice, vivid instrument art for user to discover the points of difference for the platform
Mobile Design: The mobile interface was designed to make the most of the limited screen size of a mobile device. The main approach here was trying to logically condense as much core information for each part of the website as possible into a single screen, allowing the user to easily traverse from one area of the site to another by simply swiping around.
Additionally, the creative spark was carried through as faithfully as possible. Smooth, bouncy animations clearly indicate the contextual shift per swipe, and content has been rearranged and resized to responsively adapt to the proportions of a mobile screen. However, this doesn't mean all components look and behave as shown above - especially because the mobile prototype created only has enough functionality to complete the buyer flow.
The framerate is a little wonky because these are GIFs but you should get the basic idea. Feel free to play around with the actual prototype to see for yourself.
General Navigation (Mobile)
Buyer Flow (Mobile)
Handy number based navigation system on all pages. 1 always takes you to the top, 0 always takes you to the bottom, and any page sections in between are distributed as needed from 2-9.
Fixed position back button on all pages except the home page so users can always retrace their steps no sweat.
Unobtrusive back-to-top is available on all pages so that if a user moves their cursor or finger and holds it near the very top of their device’s screen, they will be smoothly taken back to the start of the page.
Responsively expanding to fill space means regardless of the device users browse on, Swift Tix has been designed so that fonts, images, seating charts, buttons, and other controls all scale properly to the available device dimensions so that everything stays easy to read and discern and the immersive environment never falters.
Swipe based mobile navigation to limit scrolling and clearly signify the semantic weight and meaning per screen. The mobile websites of Ticketmaster and Stubhub suffered from trying to downscale and cram their desktop design into a tiny cellphone, especially with the seat selection screen. Here pages have been resized accordingly, pop-ups have been strictly avoided, and the need to zoom has been minimized.
You can see all the assets and controls I used to create this mockup below. All venue schematics, artist images, and festival/tour brand images were pulled from Google:
.webp)
.webp)
.webp)
.webp)
.svg)
.svg)
(1).svg)
.webp)
.svg)
%20HIGHLIGHTED%20(1).webp)
.webp)
.webp)
