I want to start by saying that this project was an amazing experience that I was fortunate to take part in.

Over the course of eight months myself and a group of five others analyzed a business' system for managing jobs and designed a more robust system to replace it.

What is LaserTasks?

LaserTasks is Task Management software that was developed by six Computer Information Technology (CIT) students at the Lethbridge Polytechnic as a capstone project. This system was designed and built for The Engravers, a Lethbridge based business that offers Engraving services with very friendly staff. The Engravers uses lasers to engrave awards, trophies, signatures, badges, promotional products, and giftware. Special lasers are used during engravement depending on the materials that are used.

You can check out all they have to offer here.

The software features the ability to store customer information such as their Name, Email, Phone Number, and business association, so that it can easily retrieved by The Engravers if they need more information about a job or to let the customer know that their items are ready for pickup.

Along with that they needed to store information about the jobs themselves. 

Such items include:

• The customer 
• Machines needed
• Stage of the process (Needs quote, needs proof, in construction, ready for invoicing)
• Description of the job
• Links to related email threads
• Priority levels
• Date of arrival
• Date it is due by

Why was there a need for The Engravers to switch?

Before LaserTasks, The Engravers were using the Google Tasks which was initially an extension of The Google Calendar & Gmail before becoming a standalone product. Primarily they used the Google Calendar to view and update these tasks.

Google Tasks let's you assign a title, short description, and a date. This is similar to how Reminder's apps work on many smart phones.

For The Engravers this meant that they would need to cram as much information as possible into a string of text that they set to the title. It could look something like this when it's said and done. Also attached is a list of 

****P/Q/O/AW/L/UV/E/John Doe @ Default Inc. 2 name tags, 3 trophies

The description would have things such "Proof sent August 14th" and "See Email for more details."

While having the option for the date sounds nice since it made it show up on the Google Calendar, in practice the way that it got displayed there was only in the top portion of the screen when you were looking at something like the week view. It could also only be set for a single date, jobs that they were working on for multiple days would need to be duplicated and placed on each day that they planned on working on it.

Being able to attach email threads to the tasks due to the Gmail integration worked great as it meant that The Engravers would be able to quickly reference information from the emails, until a customer sends a new email instead of replying to the thread. Google Tasks only allows one email thread to be attached to it.

This system managed while they had only a handful of jobs per week, but when demand grew The Engravers also out-grew their system.

Why did we name the system LaserTasks?

During development it was under the name "Project Laser Tag." Since a lot of what The Engravers do involves lasers and they would add "tags" to the jobs in the titles on Google Tasks as well as pair them to the tags in Gmail that they also used to help keep things organized there.

When it came to releasing it we knew that we needed a more permanent name for it. "LaserTasks" was similar to that of Google Tasks and we were trying to find a way to shove Laser into the name.

With that being said we also internally named the User Interface "LaserUI" and our database "LaserMineDB."

Though The Engravers never see these names on a day to day basis it was something fun for us.

What technologies did we utilize

For this project we decided to utilize Django (a Python Framework) to serve our web pages and connect to our database. 

We deployed the Web Application to Amazon Web Services (AWS) on Elastic Beanstalk. 

For building user interface we used a mix of HTML, CSS, & JavaScript. To aid in creating the pages needed we included Bootstrap as they have excellent documentation with pre-built components and a simple icon library that we could add to links & buttons alongside text to help with clarity.

We also used GitHub for our version control.

What was my role in this project?

I was given the title of User Interface/ User Experience (UI/UX) Lead, meaning I was in charge of designing the User Interface and giving the template off to others to be able to build components to that standard.

The tools I specifically used were Figma for creating mockup images of what pages like the Dashboard and Order interface would look like.

I also found it was a good opportunity to brush up on Steve Krug's Don't Make Me Think Revisited which you can find here. The book details approaches to Web and Mobile usability. It's a bit of an older book now but the principals have not changed and is very much worth the purchase price.

What would I have done differently in this project?

Simply put, I would have liked to plan more.

While our use of GitHub was not bad, we could have made a slight adjustment. We did make our own branches for when we were modifying the system. Once done we would merge the main repository into our own branch and then pull our branch into main afterwards. This was great and reduces the risk of overwriting things especially if two of us were working on the same component. However, one extra step we could have taken was create a branch off main called "dev" or "development" and then we make our own personal branches off the development branch. This one extra step would mean we could test all components together before pushing it into the main branch. Giving us an extra level of redundancy.

For the user interface, if I had the time I would have created my own CSS for this instead of using Bootstrap. The one problem I find with Bootstrap is that it kind of undoes what CSS set out to initially fix with styling HTML pages. Bootstrap uses classes to apply styling to HTML elements and when you need to use several classes to set them up to use the components properly. Its a good tool for being able to quickly setup pages in a single file and to prototype but it eventually spirals into making the HTML look messy.

I also wish that we better utilized Django's capabilities. Django has a way to easily draw forms to pages. We can create the form in a Python file and have it draw the form elements to the page when it is called. This would have meant that we could have used the same HTML file for the views containing the Statuses, Equipment, & Customer data and just call the appropriate forms for it. This would have reduced complexity and if we needed to make changes to the general layout of the page we would have been able to edit one file instead of three. This stemmed from being a little bit unfamiliar with some of the features because we didn't read into the documentation well enough during planning. By the time we had built these pages, it became easier for us to just keep it the way we had set it up. 

Would I like to revisit this project?

Given the opportunity, absolutely. I really enjoyed the hands-on, real world experience that I gained from the project. The Engravers still use LaserTasks to this day, I would consider that an accomplishment that I am very proud of for all parties involved. 

Maybe I revisit it on my own as a personal project and see if I can rebuild it to better utilize Django's capabilities or use a different framework entirely. 

For now that is all. I plan to add more details to this article including photos and examples in the future. Feel free to check back at any time.