OpenStage
Take control of your Artistic Endeavour
Hello everyone. The last project I worked on was pretty heavy in content. It definitely awakened some past memories that were painful to say the least. Thankfully though, any unpleasant feelings were channeled into creating a portal for those who require their voices to be heard at their respective companies. Project Three was met with great success and currently the website is in development by RED’s very own Web Dev students.
After a weekend of decompressing and refreshing, Monday morning arrived. The Project Three teammates bade each other farewell as we were all reshuffled to form new groups to tackle Project Four. Some may argue that it’s never good idea to break up a group dynamic, especially when everyone is working so well together. While in theory it sounds like solid idea, in practice though, especially the nature of UX/UI, solutions to problems may require different set of people to be placed together. I could go to lengths to explain the benefits but I will simply summarize and say that if you desired to place yourself in the path of Project Management, obtaining the skill set of working with a variety of personalities is an asset to have.
Squad of 4
After the whirlwind of the team reshuffling, I settled in with my new squad. This time we were only a squad of four. Jimmy Fould hails from Vancouver and is very much familiar with RED Academy and its philosophy of teaching. He took UI at REDs Vancouver campus, after which he took a pilot program, here in Toronto, that pairs UX and Project Management together. Paul Doan is another UX designer and like Jimmi, has taken up the pilot program of UX/PM. Both men are diligent and extremely hard working. They came up with robust mid-fi’s which left me very much impressed. Francesco Mazzini is my fellow UI team mate this time round. An easy going Italian gentlemen, his thought process is pragmatic, never biting off more than he can chew and like Laura Castaño, he had previously done UX. I felt fortunate to have been able to work with two of the UX vets as any insight is knowledge gained for me.
Open Stage
Project Four pivoted towards Mobile/Web Application. Our community partner assigned to our squad was a fellow by the name of Sathish Bala, an entrepreneur with a lot of zest and drive. His venture, Open Stage is a series of live music events that gives opportunities for South Asian musicians to show off their skills.
To further his venture, Sathish envisions a mobile app that allows local talent to use his Open Stage service as means to help generate income through fan interests. In an age where we spend currency through simple swipes and taps, not a lot of us carry change. We walk down street and see buskers performing. Some pedestrians have change to spare, majority don’t. Even during events like Open Stage, artists may have swag that they would like to sell but the logistics to carry merchandise especially for a one man band may not be so viable.
As such Sathish decided to have his app as a type of ‘mobile’ studio. Artists would be able to have their profiles posted plus be able to list their performance venues.The key feature item for utilizing the Open Stage app is the QR code generator.
CODE QR
There are two aspects of the QR code generator. One is the artist usage, and the other is the concert goer. On the artist front, whenever he/she/they would be performing at a venue, they would use the QR code generator. Once the artist inputs the date, time and their preforming location, a signature QR code is created. Within the timeframe of their performance, fans are able to connect to the artists profile via the mobile app. This is the other aspect of this maze like code.
In a hypothetical scenario, when an artist generates an event, QR codes also need to be created. These QR codes are printed onto tickets to which fans utilize when attending to the said event. Once a QR code has been scanned, the users are taken to the artist profile, and given a three choice option for a monetary contribution, configured by the artist.*The max monetary amount is $10 which acts as a fraud deterrent. It’s also a very nice way to avoid an inebriated fan from shelling out $1000 as their thumb simply tapped two zeroes too much.
*To clarify just a wee bit, the QR users do not have to download the app. The app is used by the artists only. You are simply taken to a user profile on the front end**
UI In the House
Now that I had one prior client project under my belt, taking on this project was pretty seamless. Francesco and I frequently communicated with one another in the style and approach. As the drill goes, we collaborated on design inception sheet for a language that would help shape the app.
Duotone Vibes represented an upbeat electric feel, similar to that of Spotify and their campaign. Bossa Nova was a more after hours nightclub vibe. Artists Mantra is that of quoted thoughts on music and life. Lastly Simple and Clean was represented by singular elements that channel music.
After a discussion with Sathish, Francesco and I decided to incorporate two aspects of our mood boards. Both of us noticed the common use of the duotone element so we took that as one base point. The second base point was because the QR code was an important feature on the app, so the simple and clean mood board was the next to be pegged down. Initially we laid out the colour palette as this
Eww!
However we soon ran into some colour hurdles. The palette that we chose was not lending itself well to the mid fi’s that Jimmi and Paul passed along to us.
In fact it downright looked as if we were creating an app for banking purposes. Now artists are able to access their funds on this app but it’s rudimentary at best and not a full blown bank app. The app should invoke ‘hipness’, not blandness.
At first Francesco and I tried various looks but no matter how hard we tried, it was still looking like a banking app. Whenever we showed each other our working colour scheme this was our collective reaction (mostly mine).
After exhausting our colour sampling, we both came to the decision to return to Bala’s yellow, black and white colour scheme. It seemed that at last we settled on the new colour direction. We incorporated the duotone element and placed Helvetica Neue as our primary font because of ease of legibility. But we weren’t finished just yet.
Logo Exploration and Merger
Before I reveal the final look let me touch upon the Open Stage Logo exploration. Francesco and I laid out a couple of options for Sathish to take a look at. He took a liking to the one at the centre. The other he felt didn’t have enough weight to make his app have presence.
With Logo direction cemented, it came time to redesign it. We tweaked the sound wave component of the original logo and finessed the chosen logo. The combination of the two gave birth to the new logo we see today.
The Finale
Remember how I mentioned that we finally settled on a layout scheme? Well turns out we found that the white background still didn’t seem appropriate for the app. It was later that I suggested to Francesco to utilize a completely dark look. So I quickly tinkered with it one last time. Once done I got to work on our style guide and transferred all materials to a singular file for the post presentation hand off.
TA DAAAAA!
The dark mode layout better communicated the nature of the Open Stage app. The graphite grey lent itself better than the initial white backdrop that Francesco and I planned out. Also it was universally agreed upon that everything looked just plain cool.
The circular button, known as a FAB button, helps the artist to have a dual action of either creating events or a signature QR code. The monetary listing within the the artists profile indicates the amount of tips that the fans contributed during past events. Here is the link if any of you readers would like to test out the app. *Please note that you may have to start on page 3 for the app testing.*
Critical Thinking
This project definitely had the fun factor. Sathish and his colleague Johnny, both were ecstatic with the final look of the app. Johnny Rickles is Mr.Bala’s developer based in Brazil. While he wasn’t physically present, he was able to see our presentation through Google Hangouts. Johnny is also a musician so the vision and concept was something he and Sathish both shared. They appreciated the fact that within three weeks of the project timeline, we were able to give them a comprehensive development of the app that they envisioned. The team and I were extremely proud and accomplished, given the tight timeframe. It is one of the reasons why I am so fond of UX/UI design. Its not just the projects that I look forward to, but the people I get to work with. We live in a world where apps are now omni present, where vast swats of the population are using smartphones. Most don’t realize that their seamless browsing and preferences to certain apps is because there are people out there who work together tirelessly to ensure that those apps are in-fact developed for seamless, intuitive interactions.
Thank you all for making this far with Project Four. I’ll soon be finishing of my 5th and final project this week, to which a case study will definitely be posted up. In the mean time, (I’m just taking friendly swipe)should your friend show you a very badly done layout, just say
