MoodyBoard
An online, interactive mood board that allows design teams to collaborate and brainstorm ideas remotely in real-time with each other.
The Task:
Our team was tasked with coming up with an idea for an app, designing its user interface, and then finally coding the front end of its functionality. We were to use Javascript and HTML (CSS included) to accomplish this.
The Plan:
As a team of two, the task itself was daunting, but we put considerable time into planning out a concise working schedule and keeping ourselves on time to meet the deadlines that had been set.
The Goal:
We eventually wanted a working prototype of Moodybaord, that users could interact with and add their own images, text, and notations to help facilitate an active designing experience.
Development Plan
This project was very work-heavy, so we needed a way to plan out the features and ideas we wanted to implement. We created a development plan that split up the timeline we had and made sure we had deliverables ready to go before each deadline. This streamlined our operation and always kept us on task.
Low-Fidelity Prototype
Simple, yet functional.
Since this was primarily a programming-focused project, we created a simple, yet functional, low-fi prototype to give us some direction when it came to implementation.
We included the major features required on each page, along with some secondary features that could be added if there was extra time/manpower left before the deadline. This stage also helped me realize which parts of the project were the most important, so they were prioritized when we created the timeline for the final project development.
Programming
This project was primarily focused on front-end development, so this was the longest part of the process. We used HTML, CSS, Java, and jQuery to implement all of our ideas and turn them into reality for the high fidelity prototype.
We mainly used Javascript in combination with jQuery to get the actual canvas functionality working. It streamlined development of our tools and chat features.
Additionally, we chose to stick with HTML and Handlebars when developing the rest of the front-end user face. This allowed us to save tons of resources both in load times and condense our workload as a team.
High Fidelity Prototype
This was the final result of all our coding efforts. It was to the point and effective, and we got all the core features working.
Home Screen
Since this is the first screen users see, we prioritized showing them the most pertinent information upfront. We included a list of their projects, along with access to their account settings, and a list of online friends.
Make it stand out
“Simple is best” was our idea for this page. We wanted to offer the user the most possible login methods available, but also avoid any unnecessary information that might distract the user. the end result is a very minimalistic but enjoyable experience, which is light on the user as it is on processing power.
User Canvas
This is where the brainstorming operations take place. We give users all the tools they need to express the ideas they generate - from using their words with the text tool, to something more personal with the paintbrush or the shape tool.