Web Design Project #7: Spot


What:  SPOT – Collaborative learning done right

Date:  4 May 2014

Learning Outcome Statement (LOS):

  • Ideation with the potential to take off
  • Design a conceptual site based on above
  • Sharpen design skills (simplicity, colours)



Spot cover

Spot log on

Spot about

Spot collaborative

Description: “Let me SPOT you in the coding gym

The idea is simple: it’s a site where students are paired up together for collaborative learning. Students can focus on 3 main front-end languages (HTML, CSS and JavaScript). Student A might want to handle structure and presentation (HTML and CSS) on one project while Student B focus on behaviour (JS). Students can flip it around on the next project where the Student A now focuses on behaviour while Student B concentrates on structure and presentation. 

The main objective here is to provide FOCUS and COLLABORATION – 2 key skills required in the real world.

Here’s a kicker if you think this is a good idea: use your database to pair-up students e.g.

  • Student A – Currently on HTML and CSS for < 6 months
  • Student B – Currently on JS and JQuery for < 6 months

BAM! Use that database and SQL query those parameters to match these guys together. You might even show their profiles on a page where they can converse in a forum to pair-up and SPOT each other in a future project.

As an added feature, once Student A and B click on the bottom right hand of the screen (icon with red number 3), ‘The Crowd’ icon launches – which is basically a bunch of other student followers who are interested in the project:

Spot the Crowd

[the other person icon on bottom left is for ‘The Teacher’ or project co-ordinator – if one is made available]

Students can opt in to either Select a Project or opt for a Random Project. Selecting a project provides the students with ability to select a working site which they then have to create:

Spot project

A random project (random site above) provides the students with the option to select an area of focus, e.g. “CSS” will match the student to a project that requires a CSS developer, “JQuery” will match another to a project that requires that resource and so on.

I did not bother describing PRO Mode as CodePen.io covers it.

Optional extra: You can even make this project creative. Give a couple of resources to the students free (image assets, bootstrap, whatever) and let staff and The Crowd vote on which team is the most creative! That will get everyone’s competitive juices flowing!

Listened to this while creating this: I was on Spotify Jazz radio and 3 great songs came on back-to-back: Cantaloupe Island by Herbie Hancock, On Green Dolphin Street by Miles Davis and John Coltrane and My Baby Just Cares About Me by Nina Simone. Believe it or this got me off my backside and finish this project (I started it 2 weeks ago). Music energizes me!

What did I do immediately before creating this: I thought about how I can partner with another student with the same drive to learn. I’ve used Codepen.io and I noticed TeamTreeHouse Workspace. These tools are great but they focus on single individuals. 

And although Codepen has collaboration, it’s main target audience are professionals or those with an advanced grasp – just look at the dashboard. There’s a world of hungry students out here in the world! That’s right, there’s a market for untapped revenue guys.

Credits:  The core idea came to me one day when I was looking for a coding partner who has same experience base. How do I find these people? Sod it – Treehouse / Codepen / Other can find it for me. They have the database and expertise to make it happen!

Codepen can do it IF they ask their users to complete a survey (and identify user age group, skill level etc.)

Comment: If this idea does take off, do I get a free membership to your site?

LOS check

  1. Thought – yes, I believe this idea can take off
  2. Design for these mockups are fairly basic. It serves its purpose.
  3. Colours – I quite like it what I did (but it takes a backseat to point 1)

About this project:  Initial blog located here and here’s how implemented the first month’s winning design.

I am still in the process of implementing last month’s winner (2nd iteration in Codepen, now using Flexbox as framework).

This is project is a series of designs – 3x a month, beginning March and ending in May. If I have my maths right, that’s 9 designs between March and May with the 3 best designs to be coded here.

And I’ll be storing my collections here.

Spot final

Until the next design, may your day be filled with great ideas!


One thought on “Web Design Project #7: Spot

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s