Skip to main content

Qwiz Notes

Qwiz Notes sample photo

Qwiz Notes is an open source social network for students to study. Users can sign up to add notes, automatically generate quizzes and share them with their peers. I created this site because I felt that most social networks are too distracting. People tend to lose focus for long periods of time while trying to accomplish simple tasks. I wanted to create a network that was focused, but also useful.

When a user saves a note in this app, the note is separated into term and defintion pairs. This allows the app to present the user with a nicely formatted review table. After the user reviews the note, they can take an automatically generated quiz. The automated quiz generator was designed to save students time and help them get the grades they deserve.

I originally wrote this app using the Laravel PHP web framework. I decided to rewrite it using the Ruby on Rails framework for the following reasons:

  1. To learn from my mistakes and develop a better workflow/process
  2. I learned the Ruby on Rails framework and I enjoy working with it
  3. I wanted an opportunity to use the Materialize CSS framework

  4. Last updated: June 14, 2017


Skills used:
UX design
Cucumber BDD
Purpose The purpose of this site is to facilitate focused group study so students can do well on tests and exams.
  1. Gain 10 new users/week
  1. Promote the site in my social network
  2. Promote the site at secondary and post-secondary schools

User Personas

NOTE: The following User Personas are based on interviews that were done in an informal matter. To protect the identity of the individuals, stock images were used to represent them.

Image of Harry the High School Student I split note taking with my friends so I can do less work
Harry the High School Student

I use apps that:
  • My friends use
  • Work on my phone and laptop
  • Save me time
Image of Britney the Business Student All I care about is being productive and focused
Britney the Business Student

I'm completely focused on:
  • Productivity
  • Efficiency
  • A+ grades
Image of Gwen the General Arts Student I just need something that is easy to use
Gwen the General Arts Student

I need to be able to:
  • Work with my friends
  • Test my knowledge
  • Track my progress
  1. Google Docs — Document editing with sharing capabilities
  2. Evernote — Simple note taking app with sharing capabilities
  3. iStudiez Pro — An app that combines tracking schedule, homework, and grades
  4. Quizlet — Flash card sets that can be shared online
Main User Stories
  1. I want to see a list of all the notes so I can see if someone else already created the notes I require
  2. I want to study other user notes so that I can save time by not writing my own note
  3. I want to take a quiz from a user’s note so I can practice for my upcoming test
  4. I want to sign up and log in using my social accounts so I can save time and avoid a complicated registration process
  5. I want to create a note so that I can generate my own quizzes
  6. I want to search for notes so I can find the one I’m looking for
  7. I want to filter notes based on criteria so I can find specific notes
I like to build each feature as if it was going to be the last. This way, at any point during the development process, I can put the code on a live server with sample data and get user feedback (also known as Continuous Delivery). The following list should be developed in order of importance:
  1.   Legal pages
    1.   Terms of Services
    2.   Privacy Policy
  2.   Notes
    1.   Users can view, review, and quiz all public notes
    2.   A logged in user can create notes
      1.   User sign up
      2.   User login
      3.   User password reset
    3.   A logged in user can edit/delete notes they created
  3.   Help page has a contact form
  4.   Home page
    1.   Hero image
    2.   Sections showing screenshots of the app
    3.   Brief descriptions for each screenshot
    4.   Call-to-Action (Free Sign up)
  5.   A live demo of the Qwiz Notes process
  6.   Autocomplete search (explained in Changes Made section)
  7.   All users can be viewed by guests and logged in users
  8.   Commenting
    1.   A logged in user can comment on a note
    2.   A logged in user can edit/delete comments they created
    3.   A logged in user can delete comments on a note they created
    4.   Users can view comments on public notes
  9.   Add social login for Facebook and Google (removed to meet deadline)
Behavior Driven Development Behavior Driven Development (BDD) is the act of writing feature specifications as a test, then writing code to make the test pass. Click here for a brief intro to BDD. I often prefer to type some of the key feature specifications in advance using Cucumber's user story style. I write them in a separate file just to help keep me focused on the most important features for the users. An example of a user story would be:

As a user
I need to create a note
So I can use the note features of the site

Click here to view all the feature specs for this project.

Timeline From February to April 2017 (3 months). At this point, version 1 will be released and ready for public testing.


Skills used:
UI sketching
Mobile design
Responsive design
Materialize CSS
Information Architecture
Database Architecture
Database Architecture
Content Creation
  • Home page
    • Screenshots (separate set for smaller devices)
      • Note editor
      • Terms/Definition pairs
      • Note review
      • Quiz results
      • Sharing with community
      • A mobile view (on desktop only)
    • A description for each screenshot


Skills used:
Ruby on Rails
Cucumber BDD

Behavior Driven Development (BDD)

I worked by following the scope outlined above. This way the most important features were developed and tested first. I continuously ran automated tests using Guard, Cucumber-Rails, and RSpec Rails. This helps shorten the feedback loop between writing the test and writing the code to pass the test. Take a look at the Gemfile for the list of project Gems.

I use GitHub Flow for the following reasons:

  1. It's simple
  2. I'm a one man team (at the moment)
  3. I added a "staging" branch to test the apps in an environment similar to production


The Review process involves the following steps:

  1.   Spell-checking
  2.   Browser/device testing
  3.   Push to staging server
  4.   Link testing
  5.   Form testing
  6.   User feedback

Changes Made

You can always change your plan, but only if you have one.
— Randy Pausch

It is great to have a plan, but it doesn't always go according to plan. Here are some of the change I made throughout the process:

  1. Added the ability to filter notes and users by certain attributes.
  2. I had trouble with Elastic Search requiring more RAM on the production server. Users can substitute with the note filtering panel until searching on the site becomes more in demand.
  3. Added the ability to favorite notes. I want users to feel some sense of reward for sharing high-quality notes.
  4. Added a list of recently viewed notes to make it easier for users and developers to go back to the previous note.

Lessons Learned

Ultimately there is no such thing as failure. There are lessons learned in different ways.
— Twyla Tharp

  1. The importance of planning
  2. Keep it simple first, iterate second
  3. Find feature alternatives when one feature might take too long to implement
  4. Cut scope if you are unable to reach the deadline