Creative Technologist (BCT) @bctims - Tumblr Blog

Easy Stems CTEC708+CTEC709 Post Index

Note: Sample pictures used in my designs are not my own and I do not claim their ownership. These are used in transformative purposes for a conceptual design)

Documentation:

CTEC708

Studio V - Idea and brief making

https://bctims.tumblr.com/post/183260099212/studio-v-idea-and-brief-making

Planning out the next few weeks https://bctims.tumblr.com/post/183376662577/planning-out-the-next-few-weeks

Collaboration in Music Survey (not by us) https://bctims.tumblr.com/post/183593977077/collaboration-in-music-survey-not-by-us

Easy Stems - The Designer https://bctims.tumblr.com/post/184708727752/easy-stems-the-designer

Easy Stems - Moodboard/Inspiration https://bctims.tumblr.com/post/185606745567/easy-stems-moodboardinspiration

(Design Research) From Oscar and Simon’s Blogs https://bctims.tumblr.com/post/185069313177/refining-features-functions-and-uihttps://bctims.tumblr.com/post/185069317777/visual-aesthetic-color https://bctims.tumblr.com/post/185262801847/refining-features-functions-and-ui

Fonts - How Does Subconscious Influence Work?https://bctims.tumblr.com/post/185077302112/fonts-how-does-subconscious-influence-work

Website Design for Easy Stems https://bctims.tumblr.com/post/185173006457/website-design-for-easy-stems

Easy Stems - Style Guide https://bctims.tumblr.com/post/185583546397/easy-stems-style-guide

Future Directions for Easy Stems https://bctims.tumblr.com/post/185604686417/easy-stems-future-directions

Reflective Statement https://bctims.tumblr.com/post/185601102927/studio-v-reflective-statement

CTEC709

https://bctims.tumblr.com/post/186487688347/easy-stems-2-age-of-ultron

https://bctims.tumblr.com/post/186528574107/easy-stems-2-team-roles

https://bctims.tumblr.com/post/186668080492/next-steps

https://bctims.tumblr.com/post/186760461902/ui-overhaul-so-what-are-my-next-things-to-do

https://bctims.tumblr.com/post/186976162617/user-testing

https://bctims.tumblr.com/post/186993833032/design-design-design

https://bctims.tumblr.com/post/187340814252/theme-and-model (From Oscar’s Blog for design context)

https://bctims.tumblr.com/post/187341433217/our-design-philosophy

https://bctims.tumblr.com/post/187342040377/post-ui-design-directions

https://bctims.tumblr.com/post/188041101532/website-design-for-easy-stems

https://bctims.tumblr.com/post/188073766337/qualitative-research (From Oscar’s Blog for design context)

https://bctims.tumblr.com/post/188076134017/polishing-up-the-website

https://bctims.tumblr.com/post/188076655222/so-kickstarter

https://bctims.tumblr.com/post/188377061282/survey-two

https://bctims.tumblr.com/post/188482153242/easy-stems-kickstarter-video

https://bctims.tumblr.com/post/188551468372/kickstarter-video-update

https://bctims.tumblr.com/post/188647375797/easy-stems-my-reflection

#ctec708 #ctec709 #Easy Stems

Easy Stems - My Reflection

After almost a whole year of working with Oscar and Simon, the dawn of Easy Stems is coming to an end (for now). As this is my last ever BCT project, I feel that a lot of weight was held upon this paper, and I’m really happy with what my team has accomplished thus far.

Over the last two semesters, I happily worked as the lead designer. This included designing the UI and UX for the Easy Stems plugin and website, as well as research, development and testing. As I have never worked on any UI/UX stuff before, Easy Stems has taught me a lot about whats involved. This semester was overall heavily UI focused, which meant there was a lot more pressure on me to get things done quickly. Oscar helped out a lot with the UX, and Simon used XD to actually make an interactive prototype for testing and showing off. These were huge helps and I could not have done all the design work myself.

I really enjoyed the idea of building upon a previous project that we worked on in semester one. I think this gave us a lot more time to sort out what we needed to, and allowed us to do most of our research and development of our ideas first, then building upon it and getting down all the details next.

Overall, I feel that the three of us work very comfortably as a team, and we were generally quite focused on what we needed to do using clear goals through each sprint. We worked fluidly throughout the semester and didn’t requite much cramming time, which is something I’m really proud of too. We didn’t have many arguments or disagreements, which I think was due to the fact we had a clear roles with a clear leader, and I think overall we synergise very well, and I would love to continue working on Easy Stems in the future if we ever want to proceed further.

All done!

Here’s our set up for the Crit, and I’m very proud of what we’ve done throughout this semester. For Open Studio, the three of us plan to fancy it up a bit more, and have a couple more laptops to display Easy Stems. We created a slideshow, showing off our Kickstarter video as well as some of the UI stuff I designed too. I’m really happy with how it looks, and I hope on the night people would be impressed.

#ctec709 #Easy Stems

Easy Stems Extended - INDEX

https://bctims.tumblr.com/post/186487688347/easy-stems-2-age-of-ultron

https://bctims.tumblr.com/post/186528574107/easy-stems-2-team-roles

https://bctims.tumblr.com/post/186668080492/next-steps

https://bctims.tumblr.com/post/186760461902/ui-overhaul-so-what-are-my-next-things-to-do

https://bctims.tumblr.com/post/186976162617/user-testing

https://bctims.tumblr.com/post/186993833032/design-design-design

https://bctims.tumblr.com/post/187340814252/theme-and-model (From Oscar’s Blog for design context)

https://bctims.tumblr.com/post/187341433217/our-design-philosophy

https://bctims.tumblr.com/post/187342040377/post-ui-design-directions

https://bctims.tumblr.com/post/188041101532/website-design-for-easy-stems

https://bctims.tumblr.com/post/188073766337/qualitative-research (From Oscar’s Blog for design context)

https://bctims.tumblr.com/post/188076134017/polishing-up-the-website

https://bctims.tumblr.com/post/188076655222/so-kickstarter

https://bctims.tumblr.com/post/188377061282/survey-two

https://bctims.tumblr.com/post/188482153242/easy-stems-kickstarter-video

https://bctims.tumblr.com/post/188551468372/kickstarter-video-update

https://bctims.tumblr.com/post/188647375797/easy-stems-my-reflection

#ctec709 #Easy Stems

Kickstarter Video Update

We’ve decided to split up the work of the video, as we realised it would be way too much work for an individual. The video has three core parts: A fun, short demonstration of three producers making a project together with Easy Stems, some highlighted descriptions of what Easy Stems is and does, and a visual animation element of the program functioning.

I’ve volunteered try do the first part, which was the short demo. I haven’t exactly used Premiere for over a year and a half now, so to say I’m rusty would be putting it nicely. After a couple days of refreshing myself and a couple Youtube tutorials, I feel like I’ve been put back on track and am now at a point where I’m happy with how it looks. With the help of Matt the DJ (from BCT), and Joachim Pearson (BCT graduate) who are both producers, Oscar and I tried our best to take some footage of them to use for the video. We first started by using a DSLR camera, but figured we could more simply use my iPhone camera, which was a lot less admin to use, as neither of us are photographers and can’t really use a camera that well.

With the first part of the video done, I can focus on other parts of Studio, including this blog that you’re reading now.

I next need to compile all of my designs I’ve been working on throughout the semester into one document, as well as the rest of our hand-in stuff.

#ctec709 #Easy Stems

Easy Stems - Kickstarter Video

Now that both the UI and website are at a point we are happy with, our next project as described in my previous blog is the Kickstarter video. The last couple weeks have been pretty full on with my other elective papers, but now that those are done and out of the way, it’s time to focus on Studio properly again.

Trying to figure out a good idea we can follow for our Kickstarter video was quite the challenge, so we decided to look at previous successful Kickstarter campaign’s videos to gain some kind of idea of what needs to be shown and try find common concepts among them.

Simon came up with the idea that we should introduce Easy Stems on our Kickstarter video by the means of an informative music video. We will film multiple people using Easy Stems overlaid on FL Studios, Logic Pro, and Ableton Live in different settings in order to showcase the emphasis on multi-platform collaboration. Each user will be making music in real time of the video, and as each user is introduced, a new instrument will be played, as if they are making a song together in real time using Easy Stems.

We decided to take a candid and handheld look and feel for our video as we want to make it look as friendly and inviting as possible. The effect of the handheld look will subconsciously show viewers that we don’t aim to make Easy Stems for a strictly professional audience. In reality we prefer the opposite where we aim at bedroom producers who simply want to make a sick tune with a couple of the boys or girls.

#Ctec709 #Easy Stems

Survey Two

In regards to the target audience of Easy Stems, we earlier set up a survey aimed at bedroom producers. This would be carried out locally as opposed to online due to issues we could potentially run into regarding IP.

This survey was much more specific and aimed to gather feedback for specific UI functionality, after our user-informed designs were created. We would determine how easily our audience can navigate the plugin, how comfortable they would be using it in a work setting, as well as welcomed any general feedback or comments. This survey gathered invaluable feedback from individuals working in a game and tech startup. We gathered many suggestions of added features and small details we missed throughout the designs, along with the added bonus with several business considerations.

More information about the survey can be read here: https://oscar-randle-bct.tumblr.com/post/187810544538/furthering-our-rd

and here: https://oscar-randle-bct.tumblr.com/post/188072030833/qualitative-research

#ctec709 #Easy Stems

Space Image & Sound Links for Submission

https://bctims.tumblr.com/post/187188045037/space-image-and-sound

https://bctims.tumblr.com/post/187188045937/paper-prototyping

https://bctims.tumblr.com/post/187188046552/the-displays

https://bctims.tumblr.com/post/187188047097/the-audio

https://bctims.tumblr.com/post/187188048197/feasibility

https://bctims.tumblr.com/post/187188048732/sourcing-our-resources

https://bctims.tumblr.com/post/188072883452/space-image-sound-changes

https://bctims.tumblr.com/post/188227771652/switch-programming-in-the-sound-stuff

https://bctims.tumblr.com/post/188333407327/heres-the-tracks-that-simon-and-i-worked-on-for

https://bctims.tumblr.com/post/188333633347/space-image-sound-switch

https://bctims.tumblr.com/post/188333808017/switch-endgame

#ctec700 #Space Image & Sound

SWITCH - Endgame

Here’s a short video of SWITCH in action with the visuals combined with the sound. (Turn up your volume to watch!)

#ctec700 #Space Image & Sound

Space Image & Sound- SWITCH

Over the past few weeks there have been significant iterations of my Space Image & Sound project, including the name. We were originally calling our project ‘Obsolete Electronics’, however after some iteration and a bit of thinking, I came up with the name of SWITCH. We decided to choose this because it was kind of a double meaning in reference to the Nintendo Switch, as well as the switching signal outputs that our project revolves so heavily around.

Since Kale has been taking a lot of work under himself with the programming part of our project, Simon and I tried to help out. As stated in my previous blog, we ended up writing 298 lines of code to integrate the music we made into the rest of Kale’s program, which Simon describes here. Despite not being either of our area’s of expertise, we managed to find an efficient and working way to do it, which we are very proud of.

There are ironically a few glitches in our glitchy project, which is making some of the key functions misbehave, so I think if we want to submit it for open studio, they need to be fixed. Kale suggested that we might have to put some more money into the project in order to fix it, however I very much hope it doesn’t come to that again. We’ve already poured quite a bit of money into this project, including for transport and buying several expensive cables.

Everything is looking like it’s coming together and I’m really happy with how it has turned out so far.

#ctec700 #Space Image & Sound

Here’s the tracks that @simondriessen and I worked on for SWITCH

#ctec700 #Space Image & Sound

SWITCH - Programming in the Sound Stuff

In my last blog post I talked a little about how the sound aspect of the project has changed. We won’t be making our own original soundtrack for SWITCH, as we felt it would take away a huge aspect of our project; nostalgia. People get nostalgia from things that reminds them of the past, and we felt that if we made our own chiptunes music, it would take away from this. There has been a huge impulse of modern 8-bit and 16-bit stylized video games, and therefore if we were to create our own set of chiptunes, it would just feel like another repeat of those. We figured just using the original tracks with a little bit of mixing would be the best fit for our little nostalgic journey.

Simon and I have been working on the “transition period sounds” that will be played whenever two consoles are switched. I.e, we need a specific transition sound for PS1 to SNES, and another for PS1 to NES. We have five consoles, and each require a different transition track for each pair of consoles that go together. This means Simon and I collectively have made 20 tracks for this to happen. These will be coded into our display through processing, as we found this the easiest way to queue tracks.

Through processing, I managed to write roughly 300 lines of code that essentially queue each track that will be played. Each transition between any combination of consoles is labeled with a number between 1 and 20. I.e, NES to SNES is labeled “1″, and NES to N64 is labeled “2″. Each number input the arduino outputs and the code receives will play a unique combination of three tracks for each of the 20 inputs.

#ctec700 #Space Image & Sound

So... Kickstarter?

Over the last few days, we’ve begun changing our focus and started on our next step for Easy Stems; a potential Kickstarter campaign... We have been considering funding as it is a big deal for actually getting our idea out into the world, which I feel is what all of us want to see. As a result, we felt that making a video to pitch Easy Stems would look like a fun and super helpful route to take.

We’ve been currently working on an idea for our video in an attempt to intrigue any potential investors and see if it gains any kind of popularity too. Simon came up with a fun and creative idea to use, so we have been trying to write a bit of a script around it.

I’ve been working on a little bit of the storyboard, since I wanted to try and get my thoughts down on paper of the shots we would be taking. Oscar has some camera and recording gear we can use, which makes things a lot easier in terms of trying to source them for when we will use them. We plan to finish the script by the end of the week and attempt to start the filming in the next. A couple other classmates at BCT also offered to help us out with some of the filming, including as an actor for part of it. This makes things a lot easier for us, and hopefully we can get a nice product we can be happy with before Studio VI is due.

#ctec709 #Easy Stems

Polishing Up the Website

We are coming to the end of the semester, which means the time we have left to complete our project is running out. I’ve had some general feedback from the team, who positively reacted to it, so I feel that it is at a point where I’m happy with how it looks.

I discussed with Oscar about specific features we wanted to include on the website, and have taken a few pages out of my final design, including a “listen to this” tab on the community page, which we felt was something more to focus on if Easy Stems ever gets made and becomes more successful and has a big user base.

(Below are stock images I copied over from my samples screen, and didn’t bother to change to fit the tab since it would have been booted out of the web either way)

I also took out a “storage plans” tab on the home screen, after deciding how our plugin plans to be a freeware, thus rendering this page relatively useless. I was quite happy with how these were turning out, so I’l just post them here.

For open studio, we won’t have the website available to use, as it is solely designed and will not be put into XD due to time constraints. However, after Open Studio, if we continue working on Easy Stems, then it will be properly implemented.

#Easy Stems #ctec709

oscar-randle-bct

Qualitative research

As our final research of the semester, I have shared our UI wireframe and survey with a small number of practiced musicians, soundies and technologists. As I suspected, the survey was not an especially effective tool for gathering qualitative data but no matter, I got plenty of very valuable feedback in person.

On Monday last week, I went down to Project Limbus (a game and tech startup based on High Street) to visit an old sound partner, Ciaran and get his thoughts. Some others in the office pitched in and a group feedback session ensued where I got some really valuable feedback on the application as well as business considerations to make.

As we don’t have time, some of the more major pieces of feedback that we want to use won’t be added in our UI images and wireframe, but we wanted to note them down as being future plans.

A list of ideas and recommended additions to the user interface.

Make sure to add bitrate and sample rate to metadata

Leave out newsfeed during the early phase to avoid spam perception

A UI tutorial when the software is first used would be good

Some way to separate audio and MIDI files in the manager would be ideal

Always keep server list visible on the left-hand side (optimal functionality)

add the time of upload to metadata

comments/tags on uploads

Option to customize file color

virtual aux cord to users can hear one another’s work

Business considerations

When releasing beta version, consider making it closed and exclusive to a certain number of people. This way, there’s a minimal investment on data storage maintenance while testing occurs and investors are gained.

Leave out the home page and newsfeed during the early stage of release. It’s perceived as spam where pure functionality should exist

If we launch a Kickstarter, prepare unique marketing for each day.

Great things can happen when fresh minds fall on a new idea. We had made some small but silly errors like forgetting to add bitrate and sample rate to the file metadata that they alerted us of. The feedback session also revived a few old design considerations we decided not to follow such as always having the servers visible on the left and having a tagging system for uploads.

But I would say the advice, suggestions, and recommendations were the most useful part of the session. In particular, the business advice about the initial launch being a closed beta with no home page is very helpful. Thinking about, removing the home page on the plugin makes perfect sense, When I open a DAW plugin I am usually in the middle of a task - If I was to see ads, videos and nonfunctional content whenever I opened it, I would go insane. I think opening the plugin to the last left screen is the best all-round option for a closed beta and release.

However, I think my favorite suggestion is probably the introduction of a virtual aux cord so users can show others what they are working on audibly. This is huge and would cross yet another bridge in terms of easy collaboration. I think this would work best attached to the voice chat function and people would just route their system audio through the plugin to show partners sounds they are making or whatever they wish.

Alternatively, an idea I had was that users could attach exported main tracks to an easy stems blueprint page so audibly reflect the visualization.

#ctec709 #Easy Stems

Space Image & Sound Changes

Over the last few weeks we have been developing our original idea for the project significantly and has ended up being quite different to that of my first blog post.

What has stayed the same is the purpose of our project, “to take the user on a nostalgic walk through a short timeline of old to new video game consoles”. The set up has changed a bit, but we still want to keep the look and feel almost the same, as well as emphasising the interactive aspect of our project.

We’ve also chosen stuff for our display, where we will use some of the most iconic games we could think of that correspond to each console

The sound aspect has changed significantly, which affects me the most as. Instead of the original idea of creating our own tunes and music for the showcase, we have decided to take the original scores for each game, then mix them a little bit to add a glitchy transition effect between switchovers.

We’ve taken out the idea of using three CRT monitors and have decided to use just one, to avoid any power complications, as well as general output problems we could run into on the night of the show(side note: CRT monitors also give off that notorious high pitched sound until they are turned off, so having three of those in one room would guarantee everybody to have a ringing headache).

From a lot of testing using our monitors, I have figured out I can maybe stay in a room with one turned on for about 15 minutes before my head starts hurting, which does suck, but I think that means on the night I’ll have to duck in and out of the classroom so I don’t have to keep chugging down panadols.

#ctec700 #Space Image & Sound

Website Design for Easy Stems

After finishing off the final drafts for the UI design, I was posed with the task of developing the Easy Stems website design. So far I have designed the website landing page, community hub, support hub as well as the login screen. I think so far, from my short experience of web design, I’ve felt myself enjoying it a lot. Though I have a lot of interest in graphic design, I’ve mainly been sticking to poster, graphic and UI design (from Easy Stems too!)

The website design I chose for Easy Stems was heavily influenced by some of websites for the influences I took for the actual Easy Stems UI including the likes of Serato, Melodics and Kontakt (Not so much the Discord website, as I wasn’t as much of a fan).

Keeping to the theme of Easy Stems (simple yet intuitive), I did my best to take the same approach to the website, as this is the face of our brand, and the first thing that potential clients will see. Keeping the look minimal and informative, with the contrasting greys, whites and blacks as per our style guide and combined with the conservative use of colouring, I feel that the website design is something I can be proud of.

Easy Stems Website - Home Screen

Throughout my work, I’ve come to realise there is a lot more time and effort that needs to be put into even the simplest stuff, despite looking the easiest to do (to the untrained eye). I now feel that I have a much bigger appreciation to the minimalist style of websites.

#ctec709 #Easy Stems

Post UI Design Directions

This semester has significantly revolved around UI design, and we have finally been putting the designs I’ve been working on with Oscar into XD by Simon. XD is an easy to use application UI design program developed by Adobe, which we have adopted to bring Easy Stems (somewhat) to life.

For Open Studio, we want to be able to have the audience or users to come and try out the app itself. By getting some hands-on experience I feel that the user will respond more positively to the app. Combined with the fact that we don’t want to continually have to explain our entire application to every person that comes to see what we worked on. Having an interactive approach to Open Studio will also enhance user immersion into our product, as well as give us a bigger means for pitching Easy Stems to any potential companies.

What will we be doing once the UI is complete? and what will I be doing since that’s my entire role?

As the lead designer, my next step will be working on the website for Easy Stems. I have already been paper prototyping the layout with consideration of UX. I thought that since we took inspiration from Discord and Kontakt, I had a look into their website UI and UX and tried to find some inspiration from them. I also looked at Serato and Melodics and similar music production related websites. Compared to what I had designed last semester as a rough idea on what I wanted the website to look like back then, I feel that I want to go down a different route to make it more user friendly and look less like a default Squarespace website. (As seen above)

#ctec709 #Easy Stems

Trending Blogs

Recently Viewed Blogs

Creative Technologist (BCT)