Refract is a dynamic collaborative platform where talented students can creatively address organizations' and individuals' needs through civic media micro-projects.
The Columbia College Chicago IAM Team is a group of students with diverse skill sets ranging from product development to graphic design. They work together to create solutions for a client that address the stakeholder’s needs or target a specific initiative. In sixteen weeks, the team produced viable products that solve real world problems.
Needs analysis: We set out to understand how students would interact with Refract. A Needs Analysis helps us identify key problems that Refractmight be able to resolve in a student/organization's day-to-day life. Through this process, we discovered 3 key usability stages:
User stories: We used this tool to describe the type of user we hoped to gain, what they would want and why. From this we discovered that our target users would be Columbia students and Chicago nonprofits.
We used this technique to think through who our user would be and why they would be using Refract. We prepared personas for each of our perceived audiences including Columbia students, Faculty, and Chicago nonprofit organization representatives.
Each one of these personas included plausible assumptions we could make about our users including their likes, dislikes, willingness to work with others, and their goals.
We created two comprehensive surveys to start collecting user insights; one survey to capture Organization insights and one survey to capture Student insights. We took a three-step process to analyze the feedback we received
Developing a moodboard was essential to a well defined collective vision. As a team we needed to agree on how our visual identity will be expressed in the brand. Once developed, this moodboard served as a guide to the evolving product iterations.
The first storyboards emerged when our team needed know what information to store in our database. We created storyboards walking through the onboarding process. With this exercise, we gained a base from which to begin development as well as a headway into the creation of our prototypes.
Using proto.io, we built two prototypes in tandem to receive a larger scope of feedback from testers. The prototypes grew in two different directions; one more focused on the look and UI, the other more focused on capturing the complete functionality and flow of our project.
The feedback we received impelled us to make changes to our skills organization, content layout, onboarding process, and project viewing. After testing the prototypes, we moved forward with the feedback in mind.
The wireframes created informed the final look and feel of the project. Using the testing from the prototypes, we designed several wireframes to use in our final designs of our network. This was done through a series of rapid prototyping on paper then creating concise designs in a small team to enhance our designs.
With a name as bold as Refract, we had to make the look of the website bold as well. Several members of the team brought ideas to the table. During a grueling five hour meeting, we workshopped through the various ideas to finally end with this palette
.
The result was a vibrant color palette that users can't help but notice, married with a bold typeface that was as loud as the palette.
The voice and copy of Refract was done only after careful consideration of various factors; our users, the goal of our website, and what we want our users to achieve. Once we had these objectives defined, we discovered our voice.
This distinct voice helped guide us through creating the overall tone and copy content for Refract. The copy had to embody experience, intelligence, passion, professionalism, and inspiration. A thorough script of every word that
populates our system was then created. By the end, the professional yet inspiring voice works with the clean and bright style to attract users.
At the start of the project, we researched multiple development platforms. We tossed around a couple ideas like Node.js, MongoDB, HTML, mySQL, and PHP. We started with Sails.js to run our front-end, followed with Node.js and MongoDB to build out our server and database logic. We spent sometime with this platform however it was not all encompasing .
From our research, we found Meteor (a full-stack MVC framework) to be our best platform in order to create our application. This platform allowed up to control everything in one place; the database, server-scripting, and also the client. We also confirmed that this development environment was sustainable once we completed the project at the end of the semester.
As we wrapped our minds around Meteor, we decided we needed to create structure to our database in which would allow us to work with the client and contain the information we needed.
We decided that there should be different collections (i.e. tables) for each category of our information. Projects, Users, and Skills were the basis of the entire project, so we built from that data structure.
We needed to create our MVP (Minimal Viable Product) to show to our client. Our team started to outline what was nesseciary in order to get our idea across to the client. So from this notion, we got to work. We began to template the core functionalities while pointing and accessing the correct databases to really structure this application.
We deployed the application to a local server (centOS Linux Server) in the IAM department. The application is currently hosted at refract.colum.edu. The current setup in local IAM server is a temporary one while we find a more permenent home for our application.
