What is Collaborative Notes?
Collaborative Notes is a desktop application built with Draft.js and React and deployed as a desktop application with Electron. My classmate and I built out the front and back-end together as a pair-programming project.
Context
After a few months in San Francisco at Horizons School of Technology's coding bootcamp and tech entrepreneurship accelerator spent learning how to use various modern web frameworks and tools like React, MongoDB, Express and Webpack, this project was our first completely un-guided assignment.
We were provided with a detailed specification including several project milestones, a general timeline for their completion, and were then paired up with a classmate to build this application. The details of the implementation and design were left up to us, so long as we fulfilled the specification's requirements.
My Role
Collaborators
Organization
Technology Used
JS(ES6), React, Draft.js, ExpressJS, MongoDB, Passport, Webpack, Socket.io
Timeframe
October - November 2017
Tech Stack
Collaborative Notes is a desktop application built with Draft.js, and deployed as a desktop application with Electron. We used webpack to bundle our Javascript the front-end as a single-paged React application, rendered with React-Router. To enable real-time collaboration, we used Socket.io to ping our JSON API back end with updates as clients make changes. Data is stored using MongoDB, authentication is handled with Passport.js, and the server is set up with Express.js.
Mockups
Armed with data and copy, I developed a series of mockups. The one here is the final version that we tried to build, and was the second major redesign/iteration. It took a few tries to get something together that made use of the brand's assets and design guidelines without being too bright and in-your-face, but that still retained the boldness and modern quality we were hoping to achieve.
Outcome
Unfortunately, this page never was developed or released.
The design and development of this page was one of my first tasks at PIH. And my work at PIH was the first time I had ever worked on a design project professionally, or on the front-end side of Drupal 8's CMS ecosystem. I spent a significant amount of time working directly with the Lead Back-End Developer and Operations Manager planning the work timeline, addressing feasibility concerns, and building out a template for micro-sites. We worked hard to make this page a reality, but the timeline ultimately wasn't feasible for a team of two.
There was also some internal politics surrounding the page that I at that point in my career had no clue how to navigate. In particular, there was some strong pushback during the development phase about whether this page's design truly matched the PIH brand. This feedback would have been very welcome during the prototyping process, but I unfortunately didn't receive it until after we had already started developing it. We did our best to try to address some of the criticisms, but in the end, it simply wasn't enough.
Anyway, in the end, the page was contracted out to an agency, and they did a fantastic job.
You might be thinking… why would you put such a tremendous failure on your portfolio site, Bianca? And the answer is: because I learned a tremendous amount in the process.
Retrospective and Takeaways
One of the biggest things I learned in the process of putting together my very first full-page professional design project was that the process by which iteration takes place matters. I found that because I created full-color mock-ups with real images from the very start, I received very little feedback on layout and information architecture and far more on the specifics of which color was used where, or what image would be best. In the end, the layout feedback didn't come until far later into the design phase. So, in essence: wire-framing matters. Do it.
The second major takeaway I learned in this process was regarding the use of color. This is actually a lesson I learned fully many years later, as a part of my design coursework at the Extension School, but the seed was planted here. In particular, while trying to use the brand's colors according to the guidelines I was provided, I kept running into the problem of feeling terribly restricted by the fact that we had around 5-6 brand colors. The way the infographics were presented, for instance, never really pleased me because I couldn't create color combinations that felt true-to-the-brand, but also readable, and distinguishable.
This is an problem that in the years since this project, I've seen many young designers and developers struggle with. And the answer is to simply expand the palette (duh), but as an inexperienced designer trying to color within the lines, it didn't feel like a real option. Realistically, though, as a designer, especially for digital formats that have such a high degree of complexity, 5 colors is not always enough. Take the primary color and develop hues and tints in increments (10% darker, 10% lighter, etc.), and use those in the design, as well. If the brand color is a super bright orange, everything does not have to be that exact color. I wish I could have told my younger self that when I was making this.
And the last takeaway I want to highlight here is the importance of adhering to design heuristics. If we had actually gone ahead and built this page, I can already imagine looking at the analytics data several months later and wondering why no one seemed to discover the carousel (nevermind, the fact that there is a carousel to begin with). The reason, of course, would be that the carousel doesn't really look like a carousel, and the tabs are not easily distinguishable as being clickable. So despite trying to draw attention to its existence with a giant button, it likely would have gone unused. I tried to re-invent the wheel here, when instead I could have adhered to and re-used a variety of well-known and well-used design patterns for creating tabbed content. That also would have had a side-benefit of likely making development easier, as we could have found and used a pre-built package or library for accomplishing this task.
Anyway, there are so many other things I have learned since designing this that I could also go into, pertaining to fonts, use of imagery, and other common design patterns. However, overall, I am quite impressed with and proud of this project as an early product from a very young and very inexperienced designer. I hope you are, too!