Linear LED

Creating an automated

quote builder.

September 2019 – August 2020
Linear LED Web Application on Macbook Pro
My Role

Swiss Army Knife

Product Design, Visual Design, Development, WordPress


Contagious Solutions

Worked for this company as a designer & developer.

I created an automated quote generator, product management system, and order management system. Linear LED is a company that specializes in custom LED installations. They create and install custom led fixtures for their clients. This makes having a good quotation and order system very vital. They already had a system; however, it was very limiting, and their business had outgrown it. In addition to that, it was plagued with several design shortcomings that made for a poor user experience.

LED lights in a modern hotel lobby

Linear LED does some really awesome work! Check out their portfolio.

LED lights underneath stairs
The Problem

Their quote system lacked flexibility, and was too complex for clients, and too simple for contractors.

The quote system that they had was very limiting and hindered the growth of their business. It prevented them from being able to change or update products & components. This was a huge issue for them as certain components would be discontinued or updated to newer models, or prices would change. The more time that passed, the larger of an issue this became.

From my usability testing and research on the old system, I found it to be too confusing for clients who were unfamiliar with the company’s components while simultaneously being too simple for more seasoned users. By trying to appeal to everyone, it appealed to no one.

Screenshot of original website before project started

Give users a choice. Instead of a one size fits all approach, create different flows for novice and pro users.

Create an admin interface that allows them to add, remove and update components; also allowing them to manage orders and clients.

Reduce the cognitive load on the user by making the system simpler and more intuitive.

My Approach

Enhancing the functionality while also affording additional flexibility.

I decided to focus on modularity. Making things modular from both a design perspective and from an engineering perspective would enable both the functionality and flexibility that was being sought after. On the design front I used a more consistent styling for components so that they could be re-used throughout the design.

My Approach

In order to effectively design a system with so many moving parts, identifying the user groups and their pain points was vital.

Cartoon Avatar Of Woman Wearing Glasses Smiling Cartoon Avatar Of Man In Suit Cartoon Avatar Of Man With Beard Smiling

Company Management

Members of company management are focused on running the company. Management will have to complete a larger variety of tasks including managing products, orders, clients and also making the occasional quote.

Workshop Workers

Members on the team working in their workshops are going to be fulfilling the orders. Tasks they need to complete will include viewing orders, printing forms (invoices, packaging slips, and order slips), and updating order statuses for clients.

Contractors & Seasoned Clients

This group of people will have a more limited scope of tasks. They will be looking to create projects and check in on the status as the project proceeds. Because they will be familiar with the process, they would need more complexity than the average user.

Novice Clients

Most of these individuals will be looking to create quotes, and also gain some insight into the process. A priority for these users will be having an understandable and easily navigable interface to reduce the learning curve.

Flow Map Of Features

This is the first version of the product. I ended up changing the project direction later on but it started here.

LED lights underneath stairs
LED lights underneath stairs
Screenshot of original website before project started
Project Pivot Point

After getting feedback, I made the decision to change the direction.

After getting the first demo into the hands of the clients, feedback was positive, however they requested several feature additions and changes that were not small or easy fixes. Rather than stretching the design to accommodate these new features, I decided it was time to go in a new direction with a fresh design that completely broke away from their old system.

Screenshot of original website before project started

I needed to make the system even more flexible than the initial demo allowed for it to be while also preventing the additional functionality from overwhelming users. It needed balance.

The Solution

By creating modules and components I was able to accomplish all of the goals originally defined while also leaving room for growth.

Linear LED Web Application on Macbook Pro

A more streamlined and focused interface improved usability.

Screenshot of original website before project started
Mockup of mobile interface

Fully featured mobile support for the quote wizard

Mockup of order management system

The new system has a custom built order management system

Mockup of product editor interfac3e

Product management system specifically designed for their parts.

Screenshot of quick quote interface

“Quick Quote” mode for more experienced users. It mimics the paper quote forms used by the company.

Screenshot of original website before project started
Conclusion & Reflection

Creating this product was a good challenge and incredibly fulfilling experience.

Taking on this project was a very exciting, but also scary undertaking. I was very excited to work on this project because I had a lot of good ideas on how to improve the product from a design perspective, however from an engineering perspective it was daunting. I had never attempted to code anything of this complexity up so there was a rather steep learning curve on that end. Though it was stressful and challenging, I was able to learn all of the skills that I needed in order to translate my designs into code.

In hindsight, there are definitely a number of things that I could have done differently, but it was all worth it for the learning experience. Completing this project has me looking forward to the next challenge that I can take on. Thanks for reading!

I would have liked to spend more time on the design phase and planning. Since this was primarily a development role, I spent the majority of time working on technical challenges, and I found myself having to do some design on the fly.

Because the project was approached from an engineering perspective, there wasn’t much initial design planning.

Communication with the clients wasn’t the best at the start which hurt the initial experience of the first demo.

The project continued to grow over time and the had I spent more time on the foundation up front it would have saved time down the road.

I wish I would have conducted user interviews at an earlier time as it would have saved time and prevented the pivot.

Like what you see? Let’s work together. Shoot me an email and we can connect.
Linear LED Web Application on Macbook Pro

Next Case




View Case