Skip to content

BCIT Practicum; Custom Sign Order Page for HiNeon

Interactive LED Neon Sign Order Form for HiNeon

Pen, Paper, Adobe Photoshop, Adobe Illustrator, Adobe XD
HTML5, CSS3, JavaScript, jQuery, PHP

3 weeks of practicum at HiNeon with a fellow BCIT New Media and Web Development graduate Ramon Trigo.

OBJECTIVE

i. Creating an intuitive and fun interface that can initiate user engagement upon landing, within HiNeon branding
ii. Develop a working prototype.

VIEW LIVE DEMO

PROJECT OVERVIEW

ABOUT 3 WEEKS PRACTICUM

The New Media and Web Development program at BCIT requires a student to complete minimum 3 weeks of unpaid practicum at local businesses / agencies in order to successfully finish the program. Students are expected to find their own practicum job, and work strictly within our area of studies such as web/graphic design, web development, photo/video editing, social media coordination and other fun stuff.

HiNeon is a group of lighting geeks based in BC, specialized for custom hand-bent LED Neon Signs. During my practicum period, Ramon and I enjoyed the opportunity to join them in reinventing their custom LED sign order form.

Screen capture of the old custom sign order form powered by JotForm

PHASE 1: ARCHITECTURE

RE-EXAMINE THE USER FLOW

HiNeon specializes in custom LED neon signs. However most commonly asked questions were dealing with simple typographic (not involving logos or pictograms) designs, while the level of customizability could cause some confusion to the users reading the order form. HiNeon therefore proposed to come up with a new LED sign order form for ONLY the typographic orders, and keep a separate order page for larger scale orders and pictorial (i.e.logos) orders. Our mission was to find more intuitive and simplified solution with engaging visual keys for this new typographic sign order form. We started with reviewing the current order form ourselves and re-grouping the custom input fields into different sections (steps).

Sorting the input fields

INITIATING USER ENGAGEMENT

Once the process is defined into multiple steps, how can we make it more interesting for the users so that they can stick to the form and move on to the final step? Form has to be engaging, interactive and informative at the same time - possible solution to suggest?

  • WYSIWYG. By choosing and/or updating their options, customers get to see the result right away in front of their eyes.

Reinvented User Flow based on "Step by Step" approach

TECHNICAL REQUIREMENTS - HTML5 / CSS3 / jQuery / PHP

We were requested to stay on vanilla Javascript or jQuery at maximum while at frond-end development, for a seamless implementation into a WordPress / Shopify site.

PHASE 2: INTERFACE DESIGN / PROTOTYPING

INITIAL IDEAS

  • Vertical tabs
  • All-in-one-screen
  • Horizontal tabs
  • Horizontal, toggle-able tabs

FINAL LAYOUT

We decided to build a very minimal layout with icons and tabs, so that the user can focus on what their type design looks like on the centre of the page. Kept everything clean with white and off-black for the same purposes, however the buttons were accentuated in vivid purple (#4a00a3) and pink (#ff0068) with slight corner-radius to match the HiNeon branding.

PHASE 3: LIVE DEVELOPMENT

GATHERING IMAGES AND OTHER ASSETS

Once the aesthetics were decided, it was time to move on to the development side. I started gathering stocks for three major elements - fonts, background images, and, last but not least; plugins.

Deciding on which 10 fonts to offer took a lot of reviews and meetings - the most important condition for the typeface choices was that it must be mono-weight in order to be re-created using LED tubes. I've selected about 30 different fonts that could be implemented, but the final decision has not been made yet. Therefore the fonts presented in the current demo are arbitrary.

Finding the right background images was also another big thing. I had to think of different settings and occasions that a user would consider installing an LED neon light, and the sample background images must reflect that. The images also had to have the right ambience, taken in the right light settings, has to be large enough to fill in the page... et cetera. Stock photos were just a beginning point for most of the images; I had to either retouch, or even collage a few on the Photoshop to create the right look.

FUNCTIONS

In the beginning, we did list many awesome ideas to improve customer engagement and user flow. However, Ramon and I had to keep it realistic so that we could solve them at our skill levels. At the end of the day, I was still a student who was almost an year into the web development studies.

We did manage to apply most of them to our demo! Few other points were left behind as a homework for us to solve.

  • Upon submitting the form, a copy of the form should be mailed to both the customer and to the company. 
    • This action was tied to "GET QUOTE" button, so that the HiNeon team can collect data on which options are popular amongst visitors even if they do not necessarily place an order.
    • "PURCHASE" button was actually left blank in terms of its function on purpose - the team was still deciding on where the next action should take the users to.
  • Customer should be able to send an email to themselves with whatever product configuration that they see on the screen as a screenshot image. Users should also be able to share this screenshot on their social media. 
    • I took a look into a javaScript plugin called html2canvas (https://html2canvas.hertzen.com/) and tried implementing it - it generates every html/css code happening in your browser screen into a separate <canvas> element. However we still had to figure out how to save the generated canvas into an image, and bring it along to social media posts. We eventually had to take a pause at an experimenting level as the practicum came to an end.
  • When user decides to get a quote for whatever product configuration they see on the screen, a price, or at least an estimate, should be dynamically generated depending on the number of characters in textarea + Few other variables… 
  • Again when getting a quote, estimate delivery date should be generated depending on the user selected shipping area.
  • Because the signs are hand-bent using LED tubes, the minimum length for a single stroke is 3cm. Meaning, it cannot have a period(.). All periods should automatically translate into comma(,) as the user types one in. 
  • The order form is meant to be used to take simple & quick orders - a line break limit was suggested (6 lines max for small / medium, 4 lines for large) 

Testing the PHP form action

FINAL THOUGHTS

Building an entire editor from the scratch, even just a demo, was a whole different challenge than what I used to create for school assignments. I, personally, loved that. I must shout out how I enjoyed EVERY moment of this practicum. User flow and the interaction has always been my area of interest, but it was really an entire world to catch up out there on an actual working level. Learning new things every day! It was also a great opportunity to really explore what it takes to be a "WEB DESIGNER" - I figured that a web designer should always keep the development side on mind as well as to be ready to wear a different hat if required. I found myself so submerged into the scripting that the last few days of practicum just flew by a blink of an eye. 

At the end of the practicum, comes the graduation from BCIT New Media. This practicum project is my last project from school, and I really put everything that I ever learned during my past year at BCIT. Although there was a bit of homework left behind, I am glad with what Ramon and I could accomplish in 144 hours. We tried our best to abide the guidelines and restrictions, while pushing ourselves as far as we could with multiple different meetings and revisions. And, of course, it would not have been happening if it wasn't our supervisors, Joline and Lok from the HiNeon team. It has been a great pleasure to end my school year with such fun practicum.

 

Thanks to BCIT & HiNeon for the opportunity,

And my team member Ramon Trigo.