EventChain Access: QR code scanner app — UI Case Study
What makes Event Chain, an online ticketing company for a wide range of events ranging from business, tech, to music — different from its main competitors?
Well, sorry scalpers, but blockchain is the not-so-secret technology behind the company’s “Smart Tickets” slogan and it is a safe and effective way to combat fraudulent tickets, amongst other security benefits regarding a user’s private information.
So what is the client’s main objective overall?
The Core:
Event Chain makes creating, managing, and promoting your events easy, while also providing customers with reliable tickets. This creates a better experience for attendees
And where do my team and I come in?
The Opportunity:
Create an affiliated app with EventChain that would be targeted towards gatekeepers at events. The main functionality would be to scan attendee’s tickets upon entry. This has to be made with an easy-to-understand interface.
Who are we?
Timeline: 3 week sprint
Tools: Sketch, Illustrator & Invision
__________________________________________________________________
Interview & Gut Test
Event Chain has existing branding already, but they are open to redesigns, especially since the internal app will be created from the ground up. In order to learn where and how we could update the current branding, we first had to do a gut test where the clients respond and rate images they see within 20 seconds per slide.
The gut test was done with 3 members of Event Chain — Dino, Ashtyn & Charlie. Naturally, due to there being more than one perspective present, there were mixed responses across the board. However, we did notice some overarching trends. Variants of blue and cool tones proved to be the most favourable, while dominant palettes containing yellow or too many warm colours proved to be the least.
All clients preferred sans serif over serif fonts as well as roundness over sharp edges, a common response especially for app product design. More importantly than colour, the clients responded well to clarity of information, good CTA, cleanliness, and thoughtful visual hierarchy.
We also interviewed them about their current branding and learned that despite being very satisfied with their current 2020 logo, they were open in seeing a revision, however big or small.
Style Directions
Based on the results of the gut test and their current branding, we knew that both directions we presented would include blue in some form. Blue is fitting for this app as it is a colour that relays trust, reliability and safety, which is on brand for Event Chain as a secure ticketing company. However, we wanted to make sure that because each direction would contain blue, they would still have very different moods and shades from one another.
Both directions would be centered around the same ‘why’, which is, at its core, to make life easier for working gatekeepers.
Direction A
Mood
The mood of this first direction is very cool, both literally with the entirely cool-toned palette, and figuratively with the futuristic, digital, sleek and modern sort of aesthetic. It is professional, but in a ‘Matrix’ sort of way and safe, in a ‘bodyguard’ way. Very “Echo Dot” home AI vibe.
Alexa, tell me about the movie “Ex Machina”.
Colours
The cool-toned palette would have a light gradient in order to create some depth. The colours here are Tron Teal, Silver Sheet, Faded Trinity Black and Echo Dot Blue.. named as such, because.. why not.
Shape
Rounded, smooth, neumorphic — meaning using shadows to create a sense of realistic 3D buttons, and a light glow around very slim and wiry iconography to imitate real electronics.
Voice
Trust, transparency, boldness, elegance, cool guy.
Direction B
Mood
Safe and secure, but also playful and relaxed. Highlighting the “event” in Event Chain, whereas Direction A is perhaps more tech-y, with an emphasis on the “chain” part.
Colours
Corporate navy would contain splashes of raspberry pop which not only livens the blue, but helps with accessibility as it creates more contrast. The use of a light sky-blue also helps to create a more joyous and expansive touch.
Shape
Oversized & obvious.
Voice
Reliable and efficient. Maybe even fun.
__________________________________________________________________
Time for send off
We were able to create two very different “blue” directions, but now ultimately it’s up to the client to decide which elements they’d like to explore.
Upon hearing back from Dino, the main point of contact, they have chosen the colour palette and mood of Direction B, with the slim iconography style of Direction A.
Logo Design
Event Chain has a current logo design they mentioned they were very happy with, but gave the green light to tweak. Because this is more of an internal app, it felt necessary to shift the focus more on typeface and wordmark, while also perhaps modernizing the current logo a bit. So the iterations sent to the client had more of an emphasis on text.
The bottom two logos F and G showcase their current typeface, which not only doesn’t fit with the playful branding mood of Direction B, but is very block-y and represents a stylistic vision that the clients had expressed they wish to steer away from. While they are a blockchain-utilizing company, they don’t necessarily want it to be a part of their stylistic branding. It is very easy when branding for blockchain to default to crypto-related aesthetics.
As for their existing logo, we shortened the longer arms, and rounded the edges, to match the vision of an overall smoother redesign.
Here is the final logo design after consulting with the client, seen against the navy background we chose for the main body of the app:
Iconography
Once we started to see some prototypes from our UX team, we got an idea of what icons will be needed on the app. We are also made aware that there will be onboarding to guide the users in how the app works, and what the icons mean. This gives us some freedom to explore our iconography a bit, while also making sure our intent is to make it as visually and logically sound to its purpose as possible. The navigation will need an icon for dashboard/analytics, guest list, QR scan, events calendar, and flashlight.
Keeping in mind that the client highlighted the wiry and perhaps even glow-mimicking iconography in Direction A, the first iterations of the icons was wiry, but also busy, since the icons in Direction A also had a double-layered effect.
Round one:
Half of these icons were downloaded from the Noun Project and edited, while the other half were made new.
The double-layer effect of the icons just seemed a little too busy, thickening, and unclear when shrinking it down to mobile screen size, which is counter to the fast & functional purpose that the app needs to serve, so a second pass of editing and refinement would be necessary. However, we were happy with the decision of making the icons a raspberry colour.
After the second wave of refinements here are the final icons:
Overall they became simplified and more clean. We opted for a navigation bar style where unselected icons are greyed out, or in this case, more charcoal for better visibility, and selected icons turn raspberry. There can only be one selected icon at a time, however, the scan button would always be raspberry. This is because the Scan function is going to be most used, and it’s important for it to be calling to action at all times so gatekeepers can do their job efficiently. We also enlarged it, and it sits conveniently right in the middle of the nav bar, framed by the other icons.
Typography
The final typeface we chose for both body and header was various weights of Avenir Next. It is a clean and clear sans serif but that also has an elegant appearance, which will be a nice touch to lightly jazz up the simplistic layout of this app. We chose to keep it consistent and not implement another font because we simply just didn’t feel that the app needed it, especially since we were already playing around with different weights of the font.
The final typeface for the logo was Red Hat Text, because of its character spacing and relatively balanced structure. This is also the preferred typeface the client chose.
Style Guide
Alerts & Colour Finessing
Another important colour finalization we had to make was for the alerts. While seemingly simple, this actually took a bit of testing to nail the exact shade of red, green and orange that worked nicely with both our navy background as well as the white on the cards. Adding a very light gradient also helped to give the colour some eye-catching dimension.
We discovered that for our graphs and charts it was necessary to actually implement an even brighter shade of the raspberry, as shown in the above style guide, as it made for a nicer pop for our analytics page.
Wireframes & Testing
We receive our wireframes from our UX team. After testing out some flows with them and becoming more familiar with how the users move through the app, it’s time to start skinning them.
Hi-Fi Mockups
Onboarding
Alongside defining each icon on our navigation bar, which is essentially connected to the core features of the app, we also decide to use phone mock-ups to illustrate what the page looks like. It didn’t seem necessary to include illustrations on an internal worker’s app, not only because the client didn’t seem to respond well to them, but also because as far as visual guidance and clarity goes, the real screen mock-ups seemed more practical. For the onboarding screens only, we also tweaked our navigation bar so the unselected icons would be smaller and an even lighter grey and reduced opacity, while the selected icon would be larger and of course, the selected magenta colour. We wanted to make sure that it was very clear which icon we were emphasizing particularly during this initial process.
Main feature screens:
See our main flows in action (excluding Settings etc) in this short 30 second video:
Invision Link:
https://greysonpeck685945.invisionapp.com/public/share/CN10OLLR9R#screens/476249194
Future Considerations
One of the reasons the client chose to go with the name EventChain Access rather than EventChain Scanner for this app is because while the main function of the app for this MVP is to be a scanner, there are bigger plans for it in the future. Therefore the term ‘Access’ keeps it broader and will avoid the need to rebrand the name later. Eventually this could be an app for event organizers as well, not just gatekeepers. They could implement their own third party branding, maybe even sell tickets through it, configure to a printer, and communicate with their teammates, to name a few possibilities.
Conclusion
Initially when we were presented with this project, I was equally excited and disappointed by the fact there was existing branding already. However, I think we were able to innovate the current branding where it needed to quite a bit, and also kept what was working with only minor tweaks (ex. the logo) because it’s important to recall an important fact sometimes as designers: if it ain’t broke, don’t fix it. Really, this is only half-true because we did fix up the logo a bit, but the meat of it was already there which we happened to think was working quite well with the branding. Designers often to strive to come up with the most groundbreaking and innovating new concepts, but seeing how happy the clients already were with the existing logo and then focusing on editing it with careful thought placed towards the refinement and typeface instead, felt like the right course of action.
Spending lots of time dedicating to onboarding, iconography, and colour hierarchy instead as a focus turned out to be beneficial for both our creativity, the client’s vision, and the app functionality.
Technically speaking, I feel like there are always ways to improve when collaborating with others through Sketch, both individually and collectively, and learning how to do so in the most efficient way.
