Profile helper is a content generator tool to help with creating graduate student profile pages. It was
developed with JavaScript jQuery. It contains save and
download functions, and a text editor to test out the webpage content. As a result it boosted work
productivity
with graduate student profiles.
As a Design and Marketing Associate for Simon Fraser University Graduate and Postdoctoral Studies
one of my responsibilities was to design profile pages using Adobe Experience Manager (AEM).
I was also responsible for updating the various web pages found in the GPS site such as
the job page, event page, awards page, and had coded the template for the GPS news bulletin.
Last minute profile submissions have piled up since winter break of 2020.
Perhaps Graduate students had more time to submit it over the break.
With over 60 profiles to be completed within a short time frame, the volume is overwhelming.
My solution for this problem was to create a program to aid with the formatting.
This generates a premade template for the profile pages.
As a result of my innovation I was able to complete the profile pages at a faster rate with more consistency.
Figure x: The profile per day began to increase around Feb. 11, the day when I made this helper.
Process
My supervisor was proud of my innovations in accomplishing this task and required the
Profile Helper to continue with operations within the department especially when there were
large volumes of profiles requested. Unfortunately, there was a problem with my prototype Profile Helper.
This version was built with the scripting programming language: Hypertext Preprocessor,
which deals with web server functionalities and was not accessible to the department.
Figure 0: A screenshot of the old Profile Helper written in PHP.
I decided to migrate towards
jQuery as an alternative language to devlop the Profile Helper.
jQuery is a JavaScript library that can be used to create dynamic webpages.
While using jQuery, I could generate profile templates just like before and accessible for my supervisor.
This function was perfect for my Profile Helper as it allowed me to change string values by
user input without the need of a server environment.
$(selector).val() allowed me to return what the user had inputted.
$(selector).val(value)
Placing (value) allows the user to to set the value and can be set through the html tag
<input>
This snippet of html code above results with an input form. When I make id=”LinkedIn", whatever
the user inputs in the field, the string will be stored in the “LinkedIn” id.
After setting the value I can return the value by:
$(‘#LinkedIn’).val(),
<input> with $(selector).val(). I can form a concatenation of string values
to form a sentence or a body of text.
Figure 1: Snippet of jQuery concatenation of string values along with the HTML input code. This
outputs a heading and a user-created paragraph.
The possibilities are great with input concatenation as it also allows the user to input url links, email
addresses and hyperlink them into text.
Figure 2: Snippet of jQuery concatenation allowing users to insert their LinkedIn link in a body of
text. This outputs a clickable link to their LinkedIn page.
I had also improved the user experience within the Profile Helper. This user-friendly version contains
color-coded buttons, tabs to separate content, save and download functions, and a text editor to test out the
generated html.
Final Product
Figure 3: A screenshot of my Profile Helper. Users can input their details here. Figure 4: A screenshot of my Profile Helper. Users can test their HTML code in this page and view
how it would look on the profile page.
Reflection
As a result of my innovation - a tool to aid with profile creations, my supervisor shared my work with the GPS
staff and all was grateful for my innovation. Minor tweaks were made based on her feedback.
Looking back, I realized that if it weren’t for the numerous profile requests, this project would not have
existed. The deadlines and the profile requests unexpectedly taught me the fundamentals of Hypertext
Preprocessor and jQuery.
I compared my project to the assembly system of McDonald's from the way it seamlessly automates and generates
burgers. One might say that this method of automation diminishes the quality of McDonald's food (No offense to
McDonalds). However, this method does not diminish the quality of a profile as one may believe, rather it
assists users with the process of creating quality content by allowing them to begin with a template.
My story about Profile helper was featured in the Simon Fraser University OLC Blog.
Read about it here!
