UXDE dot Net Wordpress Themes

My experiences with LabStormz

The problem and scenario:

I have recently been working on a project where users would be given the incentive to come up with new ideas/ concepts, vote for other ideas and then write comments anonymously to enhance ideas further. We called it LabStormz.

The problem was that there was no way of capturing general ideas in The Lab and Ben Emson and I believed that LabStormz would be a good way of allowing users to come up with innovative concepts. Ben and I also felt that it should be implemented in a positive way. This is because we want to give users the incentive to come up with more ideas. This was done by having no down-vote system (up-vote only), users cannot see/ tell if an idea has received the most votes (all votes are shown in descending order) and all ideas remain anonymous (so nobody knows who created the idea).

How it was designed and implemented

The first thing I did was to map out what functionality I need to allow the above ideas for LabStormz to work. This was to be built in Ruby on Rails so it was important to undertake research on which Libraries to choose. This is because we want the users to have the best experiences possible, as Albert Einstein once suggested, “Any darn fool can make something complex; it takes a genius to make something simple”.

Below are the following techniques and libraries chosen and implemented (in order):

  • Created a logo on Photoshop CS6 and used Foundation to make it responsive on all devices.
  • I then added in the markup and the CSS. I like to do this in a particular order so that it is easier to find each bit of code – not just for me, but for other people who will come across it. I tend to order my CSS from top left to bottom right with the following rules:

- Contents – basic information to discuss the title, author, and what content will be in the style sheet.

- CSS Reset – We need a consistent base to reduce browser inconsistencies.

- Core Styles – main tags to be styled such as body; h1-h6; p; ol; ul; td; li; pre; a; em.

- Scaffolding – tags to set out the overall Skeleton of the page such as header, main bits of content and footer.

- Sections – Anything else relevant that you would need to use such as your navigation bar; search bar; logo; images; pagination bar; buttons etc.

  • Create an ideas scaffold – “rails generate scaffold Idea title:string description:text user_id:integer admin:boolean”. This scaffold would then create the forms using the CRUD (Create, Read, Update, Delete) method.
  • Devise – Authentication needs to be used so that users can access the website. They would need to confirm their account when they have signed up. They can then sign in, change their details and sign out. We do not want unauthorized users accessing the website because they could come up with irresponsible ideas. We only want those who care to sign up.
  • RSpec tests – Downloaded a Gem called “rspec-rails” to test the functionality of the code to determine whether my logic in the Model, Controller and even Views  (MVC) work or not.  Rails uses an MVC Framework, so it is essential to test all of the code and ensure that it passes. RSpec tests were written after every section.
  • Active Record Reputation System – This is a great Gem where users can vote up or down for an idea. I built it so that users can only vote up.
  • Comments from anonymous users – create another scaffold for comments so that anyone can add comments anonymously. There will be no link to the user_id in this scaffold. The reason why is because I do not want anyone to belittle anyone else, e.g. a Senior Developer ignoring a Junior Developers point of view.
  • Kaminari – A gem for pagination for a certain amount of ideas.  After every 10 ideas, a new page is displayed. This will make the website look cleaner.
  • CanCan – A gem for authorization. It is important to allow general users to only create, read, update and delete their own ideas, create and read their own comments (anonymously) and for an admin to manage all ideas and comments. The admin can create, read, update, delete all ideas and comments.
  • A search bar – This was made using the Kaminari gem again so that a user can find the specific idea. Below is the syntax created for it in my idea.rb model file:

1
2
def self.search(search)
3
  if search
4
    find(:all, :conditions => ['LOWER(title) LIKE ?', "%#{search.downcase}%"])
5
  else
6
    find(:all)
7
  end 
8
end
9

What this code does is search for the most relevant idea title. So if I had a title such as “FaceMe” or “BigTime” and type the letter f without a capital, it would find the idea FaceMe and display it. However, it would not display BigTime because it does not have the letter f in.

From the above, this is what LabStormz looked like for an admin (a user cannot see how many times users have voted):

before

Feedback

Once this was completed, I asked for feedback from everyone in The Lab to test the product, find bugs and explain their experiences with it and their opinions on the design. Most of the feedback was positive, and users were saying that they liked the simplicity of LabStormz, how easy it is to see all ideas and search for specific ideas etc. However, some criticisms rightly took place:

  • Change the logo – looks out of place. This is a good piece of criticism because it does not look right on the website. It doesn’t have the clean, simple look that I am looking for. Therefore, I decided to use The Lab colour scheme to make a simple yet effective logo. Lab part of LabStormz logo being The Lab style blue and having a clean, IT look font-type, and for Stormz to have a bold font to reference the “eureka!” moment. This gives a meaning to the logo and makes it look relevant to the website.
  • Make all button colours consistent – green for submit and orange for edit. Delete became a small link without the red colour as it made users tempted to delete everything.
  • Change the vote arrow – add in a thumbs-up icon. Therefore, I downloaded the font-awesome-rails gem and added in thumbs up icon, which improved the design of the page.
  • Add in first to comment if there are no comments on an idea. This was a simple if statement:

1
2
<% if @comments.empty? %>
3
<p class="no-comments">No enhancements yet, be the first to make one for <%= @idea.title %>?</p>
4
<% else %>
5
<h6 class="other-comments">Suggested improvements:</h6>
6
<% end %>
7

Once the feedback was completed, this is what it now looked like (for an admin):

after

As you can see, it looks much cleaner. Simplicity is key with websites and by making it look simple and clean, more users are likely to use it in the near future.

How it will be promoted within The Lab

This is currently taking place. I am going to promote LabStormz in the next team meeting and to try and get everyone to use it for when they come up with ideas. I will be explaining the benefits of using it and I will demonstrate the functionality to the team. If this proves to be successful within The Lab, it will hopefully be marketed towards the rest of the organization in the future and will be used on a regular basis from staff members outside of The Lab.

callumleinster1

Comments are closed.