Tips from Ticketfly’s Product Designers
And a shout out to our favorite design tools!
You may have heard that Ticketfly is joining Eventbrite to make the platform for live events even better than before. As Ticketfly becomes part of the Eventbrite team, this is a fitting time for us to reflect on our most successful accomplishments as a design team as well as the valuable lessons we learned. During our time since Ticketfly’s rebrand in early 2016, our product design team has developed some tips and tricks to keep in mind while creating products.
At the core of all those experiences are these UX principles:
Human
Genuine & friendly.Innovative
Disruptive & game-changing.Legit
Authentic & intelligent.Driven
Curious & responsible.
We like to consider these principles every time we design our products (inside and outside of the interface). These principles are derived from our main brand pillars. This is our way of bringing the Ticketfly brand into our products and, at the same time, this acts as a checklist to make sure we are delivering consistent and inclusive solutions.
Tips for Designing Systems
Written by Jake
I’ve been really close to the design and communication efforts at Ticketfly to build and enforce a design system. The opening product video is a testament to the type of power a pattern library can provide for an organization. With the Ticketfly rebrand in early 2016, it was a great opportunity to reflect on the consistencies, or inconsistencies rather, of our previous products because we were going to need to work hard to update them for the rebrand launch. I’ll talk a little bit about the tips, tricks, and tools I used to make our lives easier in this effort.
1. Start messy & refine
Be scrappy.
While the rebrand was in progress, we used elements from basic bootstrap libraries as a foundation to start. We styled these elements after the rebrand and company pillars were finalized. Rather than making all the rules beforehand for product interfaces and interactions we didn’t know, we incorporated the new styling into current products we were working on at a product by product level.
We used Wake to collaborate as a design team. Rather than meeting in a traditional art critique setting (at a certain time in a single conference room), designers can give feedback on their own time. We were able to share how each designer used different elements (i.e. modals) and we can find common patterns and standardize the most important ones.
2. Build your library
Have one source of truth. Create documentation as soon as you have the bare bones elements styled. Keep it in one location so every designer can have ONE standard that they design against. First, we kept documentation in Sketch.
We dumped every instance of elements we were designing into individual artboards to organize & consolidate at a later time. This helped us find commonalities faster. It was the best we could do, at the time, to ensure we were all using the same design elements across products.
Secondly, we used Craft by Invision. Craft streamlined our workflow so well! We could share a curated library of elements with collaborators. From there, anyone could drag and drop pre-built elements from that library onto a screen without switching files. It was documentation inside the very product we use to design our applications. You have a consistency test right next to the artboards where you create your designs.
At this point, it’s more about assembling the parts in a correct way rather than debating how you design the items.
Trust me, you don’t want to get stuck debating rounded corners.
3. Document & implement
Even if our designs were 100% consistent, we wanted to be better. We aren’t just settling for consistency in Sketch because the real goal is consistency across our products. We wanted to document and standardize resources as close to the real product as we could…in code. We wanted a pattern library in development for engineers to pick and pull elements that lived up to our consistency standards. Thread this into an entire department’s workflow is a huge effort. We’ve been continuing to grow this development library one element at a time, but it’s something we have less control over.
Instead of trying to influence engineering processes, we focused more on things in our control as a design organization: illustrations, icons, personas, and UX principles (mentioned at the beginning) just to name a few. We could share illustration guidelines with our designers and we could share personas with departments working with those same individuals.
For documentation, we chose Google Sites. It was very easy to create content and safe to share within an organization. We could document and share product design decisions with engineers and product managers as we came to conclusions on decision making. This makes things smoother, and this means less time for releasing new products and features. Process gets in the way sometimes, so the more you make that easier, the better it is for your organization.
Tips on Design Habits
Written by Yrving Doveralba
There are three main things I want to share with you about our process to complete and ship products:
1. Prototype
As designers we mainly work with assumptions. We tend to think about pixel perfect ideas instead of fully functional software. With prototypes, you can quickly validate the user experience and iterate. Only low fidelity designs will allow you to iterate quickly. Design at the lowest fidelity, but not any lower. Then, use a prototype, not only to validate your own flows and ideas, but also to collect feedback very early in the process.
It’s cheaper to update a prototype than than to ship it and realize it’s confusing and hard to use.
At Ticketfly we use multiple prototyping tools. This is an area we are always open to experiment with. We use Principle and Proto.io to easily prototype for web and mobile. Dragging and dropping prebuilt components with Proto.io saves time and allows for making interactions easily.
2. Write things down
If I can tell anything to myself from 10 years ago, I’d probably say “Write things down,” especially goals, hypotheses, and priorities. It’ll help you remember important points during discovery and implementation. I usually use my notes as actionable items or follow up questions. If you are in a meeting with a big group or a presentation, write down your questions. This will allow you to properly articulate and ask them at the right time.
I use Evernote to keep track of my notes. It helps me remember things, record product decisions, and keep track of feedback. Write down feedback!
3. Seek perspective
There’s more value in learning the truth than being right.
One of the things I learned very quickly in Design School is to detach myself from my designs. Teachers would be so critical of your work and I’d hate showing my work in class but they do it for a reason. They do it to teach you perspective through criticism and to speak about solutions instead of a pretty color I picked. I’m using design to solve problems but that doesn’t mean the design belongs to me.
There’s more value in learning the truth than being right.
I’ve seen many designers isolate themselves and avoid feedback at all costs. They didn’t get the best results because they only saw the solution from their perspective. I’m not saying that we should desperately look for feedback from just anyone, but it’s important to carefully frame the feedback you are looking for when you need it.
Here at Ticketfly, we use Wake for feedback.
It could be just a rough wireframe, a work-in-progress video of a prototype, or a final design. The intention for sharing is to keep the rest of the designers in the loop and get feedback — if you request it. We use their Slack integration so our teams get notified every time a designer uploads their work. You can comment or annotate in a single or a set of images or videos.
Tips from Entry Management
Written by Mai Oseto
Whether you enter a show using a digital ticket, or print your tickets on paper, you have experienced entry management of some kind. Our goal is to get fans inside venues and festivals as fast and efficiently as possible. A focus has been a ticket scanning iOS app.
We’re using patent pending technology to make it easier for clients and fans to scan tickets and get people to the show. It’s currently in beta. You might’ve seen it at a local Ticketfly show.
I’ll share with you a few tips I’ve learned in design along the way.
1. Design for your environment
It’s easy to forget about the outside world when you’re designing on a computer in an office or cafe.
When designing for this product we had to consider people using it at small, dark venues or at festivals in the bright sunlight. So I worked on day-time and night-time modes.
Be mindful of where people will be using your product when you’re designing.
2. Test
Testing is necessary because it’s another technique to improving your design. It’s a way of knowing that what you’ve designed does what it’s supposed to do. Seeing how one person uses your product is good but we’re all different! What’s better? Seeing how 10 other people might use your product in a way that you’ve never thought about.
For this product, testing it in the real world was necessary because someone might be scanning thousands of tickets during a shift. So we wanted to see how it worked while someone was doing the same action over and over. In this case, it was good to get feedback from real people who have been using this product for 8 hours straight. We’ve done 7 real world tests and gotten a lot of good feedback early on.
Sound and visual feedback are important when making a great product experience.
Recap:
- Start messy and refine, build your library, and document & implement.
- Prototype, write things down, and seek perspective.
- Design for your environment and test.
From starting messy to testing your product in the real world, these tools and tricks will help you be a quick and productive designer. We hope you gained some insight from our product design team at Ticketfly. We are looking forward to taking our learnings to Eventbrite and combining these platforms into the best live events experience on the market!
— Jake, Yrving Doveralba, and Mai Oseto
