Filene Bedrick

One of Many Web-Gurus; Hello, I'm Filene!

Throughout my life, I've spent much of it creating and sharing content on the internet. This website is just a shard of the boundless mark I've made on souls without ever meeting face to face. Thank you for visiting!

From artwork to animations, coding to conversations, and websites and written communication, I have found the internet as my ultimate creative outlet. No other resource allows us to distribute content widely, to diversify the voices that share content, and to provide gates to any type of desired content. It is a machine of great creation and destruction.

What a great chance to work my magic! Please, review what I have to share in my latest professional resume!

You'll find I've developed many skills. PHP, CSS, SASS and LESS, HTML5, Javascript, jQuery, MooTools, Java, Python, Photoshop, Illustrator, Documentative, Phone support, Networking, Command-line OS, Illustration, and more than I can list.

Transcending Boundaries Conference Pamphlet Redesign

Transcending Boundaries is a yearly conference that was held in central Massachusetts, reaching out to all folks under the LGBTQIA banner no matter their nationality, class, ability, age, or skin pigmentation.

Since Transcending Boundaries enabled me to go in 2015, I wanted to repay the favor and volunteered my time for meetings and other help. One of the first assignments I received was to remake their informative pamphlets.

Transcending Boundaries had a variety of tri-fold pamphlets that needed design unification, improvement, and cleanup. Spanning topics regarding sexual orientation, romantic orientation, and private part biodiversity, there was likely a pamphlet for every person who attended TCB.

I solved many design challenges during this process. First, pamphlets had to be folded by hand, and no machine would auto-fold them—also, those visiting the website for these pamphlets would need to fold by hand as well. Second, pamphlets like the Transgender pamphlet had too much text to fit in any sort of design with headers. Finally, the pamphlets needed a strong structure to represent topic individuality, quick synopses, and relation to other pamphlets within a topic.

Solving the folding concern was easy. Many designers put elements into their work that have strategic importance. If you check on the 'back' of each pamphlet, all pamphlets have small text at their innermost third fold. That means that it's easy for volunteers to know where to fold. Moreover, the text had a use: it explained how to print these pamphlets on printers that support duplex printing. This can often be a technical headache.

Solving the overpopulated content was a bigger problem. Some pamphlets, like the Transgender identity pamphlet, were split into multiple pamphlets with cross-referencing. Paragraphs about commonly used terms were turned into a definition list, with a separate pamphlet having the full list. Other paragraphs discussing common transgender identities were upgraded to their own sections on both pamphlets. This balancing of content between sections and pamphlet goals allowed either pamphlet to discuss a wide breadth of the topic, while still being differentiated from its peer in extent.

My most exciting challenge was to engineer the pamphlet designs. Transcending Boundaries is a conference that is ultimately about identities--who is allowed to do what, what defines a person's identity, and from where this understanding arises. The personal nature of identity made a unifying structure difficult, but accomplished: not just for the simple front page designs, but for the order and goals of sections. The previous version of the pamphlets did not break content into these sections, but often had similar arrangements prepared to unify in the same spirit.

As a result, each page strikingly divides the topic. The front page includes a skillful synopsis not often provided in the previous versions. The second page reveals the testimony of one who identifies as this label. Respecting their space is a section for boundaries that such folk expect or need. Historical boundaries discusses the history and present of those with such identities, and Being their Witness highlights the differences and nuances to this identity that explain the misinformation often heard about the topic.

Unfortunately, Transcending Boundaries has not held a conference since 2015, and has only gotten to use these new pamphlets once. I wish them all the best, they are a fantastic community.

Channel Fish Co Eversource Anti-Construction Campaign

Channel Fish Co is a large fishery in the harbor district of Boston. Located in Chelsea, they have been alongside other neighborhood homes for decades now. In 2016, Eversource threatened to build high tension wires underground, which would cause significant magnetic impact to Channel's facility.

Channel hired me to create illustrations, using data and photos they provide, to show this impact. The most challenging request was to build a bunch of high tension power lines above the ground, as an allegorical display of Channel's viewpoint up above East Eagle Street.

In need of graphic help ASAP, Channel Fish Co. contacted me for some ad-hoc work. Their first request was simple: take a vector drawing of magnetic fields and overlay them on a map. Their second request took much longer.

Since I have not worked in 3D for at least a decade, I did what I could use best at the time: vectors. Using paths in Photoshop, I created the various lines and figures that would form the high tension pole frames. After having the shapes in place, I tested various stroke colors, paths, and gradients to get the best look for the structures.

After that, it was only a matter of adding the shadows for the new eyesore, and sending it off. I was told they got a giant poster of this illustration, which I hope helped their cause.

Springpad Organizing Made Beautiful

There are two ways I can remember Springpad.

As much as I wish I could have given more, I fear I never could have given Springpad enough. They taught me many new things, like working in a JRE, working with Jenkins, Debugging Javascript and Java, MooTools and Event Frameworks, Data-binding Libraries, Grunt, SASS, and even fantastic design sensibilities.

Despite my efforts, I could not bring the company into the superstardom it was due for. I felt ashamed since I burdened myself with the company's difficulties. Though new, I felt I had to catch up to the dedicated team that kept the company's fire burning. I held on fast, and coded what I could, such as learning Velocity to help with their email notification redesign. I used my Wordpress skills to edit provided templates to match the excellent designs. I even debugged and added new features to the core product.

I wish I knew what could have saved the workplace at Springpad. There is no competitor that compared—the icon above of "Evernote" is an in-joke of that failed comparison. I have a greater sense of marketing now, but you just can't change the past.

My introduction wasn't too difficult. I was to change the CSS of the alert menu, and later change the dropdown menu to include a user profile. I had help from my teammates, since I was new to their system, its GWT templates, and how they bound data to elements. (How "Your Username" shows up in the Username box)

I was also introduced to Apache's Velocity Java library, which helped me create complex email templates using a templating language. I began creating my own library of reused functions and code, starting with the Notebook Share screen.

A Email stating a Shared Notebook, sent from one designer to another. Circa 2012.

Many of my projects consisted of Email Templates. As I grew in expertise, the requirements grew in complexity.

I had to guarantee the highest caliber of cross-device compatability, including the strict requirements of GMail and upgrading elegantly to the powers of the iPad and other Apple devices. My designer coworker had pixel-perfect vision, and was ready to push me to limitation-defying accuracy, such as super-complex tables to express the "Springpad Notebook" design.

One of the most complex emails was the Weekly Digest email. I would be receiving lists from Java code, or writing the Java functions to retrieve them. After that, I had to work out the design logic, which would add, remove, or alter sections based on the user's activity.

The Notebook Slider was a design interface that I met with a lot of difficulty. I found no library that provided the function we needed, and the 'drag' features of MooTools wouldn't work out of the box. The design was implemented with some simple CSS, supporting the 'pick up', 'drop', and resting states of the slider. I found my difficulty when it came to keeping the position calculations correct—math is normally a strong suit of mine.

The websites related to Springpad were a fantastic break. I've cut up HTML and CSS for every company I've been with, and it was the skill I honed as a hobby. The minisites were a chance for me to catch up on the latest trends in CSS3, responsive design, and perfecting design accuracy.

The last year, Springpad featured its new 'Notebook Templates' offering. These notebooks would allow brands and users to stylize how users accessed their content, such as a 'to do' list built into the side, tabs bringing the user to a smartly-sorted list of content, or even tabs for certain tags.

I began as the lead, and was later joined by the lead UI/UX architect to complete the project due to scheduling crunches. This project was difficult, since I was coding using new and proprietary code libraries I was just introduced to.

In 2014, we created a 'Marketplace', where users could select promoted notebooks, such as those from associated brands.

To grant customers access to these new notebook templates, we created a minisite where users could add and copy promoted notebooks to their account. These pages were also meant to be compatible with mobile devices, and deliver the notebook in the Springpad app. Another Wordpress website with a HTML and CSS template I provided.

We also wanted to upsell the Springpad app on these websites, so I created a widget that would only load in the right circumstances. IE: Whether or not the user has the app, whether or not they're on an Android, Apple Device, or Kindle.

I also worked on a redesign of the Springpad homepage. This included more responsive design, having items appear, disappear, align, or realign based on the user's browser size.

Attorneys.com and LawyerLocator.com: Commercialized Bar Referral

In the two years I worked for BuyerZone and LexisNexis, I implemented more than five separate designs for their flagship products. The Attorneys.com team sought me to implement new properties and new designs. I did more than that: I improved how they could analyze and track their conversions.

Attorneys.com

The final design, still in implementation today, features no design shortcuts. Text is screen-readable throughout the website, basic sprite sheets provide many icons, and sections are constructed to stretch as far as necessary.

To help them hone their conversions, I began collecting new statistics. Their lead acquisition flow didn't log how far users completed the form. Using Google Analytics and JQuery, I improved their lead acquisition forms, allowing designers to rapidly integrate new categories and questionnaires. The previous process didn't even include robust user-side validation. My improved form processor alerted Google Analytics of the users' progress, allowing LexisNexis to determine which forms converted users, or how far users engaged.

I created a robust, custom CMS, that allows them to control the website's content with minimal security openings. Content editors allowed creators to visit a third-party CMS, and I imported content through a local integration with this third-party CMS.

Throughout my time with the sister companies, I implemented two different designs for Attorneys.com. I was provided a CodeIgniter framework website which I extended and edited in the initial years.

As the company grew, so did their web properties. I helped improve organization between all their avenues of conversion: I created robust split-test configurable landing pages, documentation and support between third party lead providers, and integration support with the BuyerZone lead gen system and the LexisNexis properties.

Due to having so many landing pages and a variety of tracking codes, I created a managable integration and organization of the multiple layers of customization needed for each page.

LawyerLocator

LawyerLocator was a new brand for legal help that I launched alongside LexisNexis. The site, as it originally launched (below), features similar areas of practice to Attorneys.com. Improving upon my LawyerLocator.com minisite codebase, it might handle the same traffic as Attorneys.com.

LawyerLocator was a two-pronged project, requiring a new CMS. Various mini-sites were created, and I needed to code how they would display their content. To learn more, see the fifth image in my portfolio for "Boston" Lawyer Locator.

As usual, my expertise in PHP, HTML, and CSS were at the forefront. jQuery and Javascript coding became less of a priority for the websites.

My time with the two companies came to an end once I had completed one final integration. BuyerZone was improving their core lead gen system, and was ready to integrate LexisNexis' properties. I worked closely alongside BuyerZone to integrate their new platform.

At this point, the websites were self-sustaining and budgets were running tight. However, I was grateful for the camaraderie I shared with the quality people at both companies.

BZSuperDeals, a Groupon Competitor (when anyone cared)

When I first worked with BuyerZone, they had an ambition: with their repertoire of clients, wouldn't they want to shop between each other?

I just began working with them, so they asked me to help them create this.

BZSuperDeals.com

Bless the Internet Archive, for some vestige of this site still remains.

A site "like Groupon" was no simple task. So let's break down what my codebase provided: COMET-based [long-pulls] to poll the current deal's sales; an Ajax-based CMS; Live updates on a sale's end or "tipping point"; integration with their payment processor including refunding and canceling capabilities; safe, double-dynamic-salted hashing of user cards; and a second integration with a second payment processor.

I included an AJAX subscription to the newsletter as well. The site took approximately a month to complete, excluding the second payment integration.

The idea was great, but the website didn't tell that story. At the time, I lacked my understanding of marketing to help them. There was never any deal beyond the launch.

LawyerLocator Minisites and Miscellany

Laywer Locator Minisites

LawyerLocator wanted a whole bunch of websites that had similar content, but different details.

Forgive me Google, but there was integrity in these sites. Each site was connected to an office of the company in each state, with its own number and contact. I was provided with a list of domains and unique content for them. I needed to build a CMS that could display custom content for each location.

I created a CMS which progressively clarified content depending upon which website you were on. Starting from an initial base of data, specific data was applied per-category, per-URL, per-site. In this way, custom content could be on many sites with minimal data rows. The CMS supported custom site maps, listing pages that would only be found on the website using custom data about the website.

The design called for multiple sections of content that can be swapped through. Simple content recursion loaded which supplementary content was loaded, which may include call-to-action forms.

TheNatework: More than just "My Websites"

TheNatework.com is an exhaustive curation of a near-decade of web creations by me. Spanning more than coding, my writing, webdesign, and artwork have found homes here.

It was a difficult procedure to restore much of the above content. Though I enjoy organizing, some files went missing. Moreover, not all my creations were fit, being old in both design and artistic approaches. :)

The current NateWay describes the path I took, leading me to the present day. A simplistic autobiography for fanchildren, it also spoke of the experiences that shaped me as a person.

My original "NateWay" was a Gateway site, linking users to all my internet presences. Though it succeded in how it directed users, I sought something more personal and expressive. I don't think many ever provided an easily-digestible autobiography for a web-culture.

Dislike the horizontal scrolling? Me too. I was fond of this approach at first, but the Scrollerama.js library had many shortcomings that have been exposed with age. The website still performs in displaying all the elements, but I'm seeking a new approach—vertical scrolling—in my planned relaunch.

I had a Japanese friend who was curious: how could Japanese artists receive drawing requests from English-speakers, without a translator?

I am pretty proud of this project, since I started from a sleepover's coding impulse. Convinced I could complete it within only a few hours, I started right when people were beginning to sleep. Hours later, I had the initial file format and validation system. The project needed a way to calculate complex pricings. I solved this by requiring the questionnaire to be in order of the calculations necessary. Different parts of the form would open and close in response to the user's entries, altering the final calculation.

The project used jQuery, jQuery Validate, and PHP Unicode. The system uses two JSON files, one in Japanese and one in English. Though it was an ambitious start, my friend didn't push back with new requirements. For example, I had not yet built an editor for the JSON files.

I loved these characters, and wanted to make my LJ a new videogame homage to them. Alas, I could not vary the fonts to the page-size, and so it sat unused.

I loved the idea of responsive design before (2008) the term was even coined (2012-2014). In example, my design was intended to scale to any browser size, using images, layouts, and CSS-based percentages. Alas, fonts cannot be controlled like this, and Media Queries were not yet in use. So, the design languished, unused. (PS: The game and game series are fantastic.)

If you're aware of Livejournal designs, there are cute quirks that the best designs use: variances based on days or tags. This design featured the former, changing the post's companion depiction along with the post's day of the week.

This design was sensational, winning poll after poll. My LJ followers/friends could not help appreciate it more than my previous designs!

This was during a time when I was gaining some positive self-image (finally) and faith in my artistic skills (jury's out ). Taking the idea of an artist's canvas to theme my LJ, the approach seems simple, despite being novel and well-received even to the current date.

Polar Design and Older, Personal and Not

I was initially hired for my animation and flash actionscripting capabilities. Though my animation skills still run strong, I developed many other skills at Polar Design. I created technical documentation, managed projects, met with clients, scoped projects, pitched projects, designed websites, coded Joomla extensions, and even installed and rackmounted production servers in Redhat Linux.

During my tenure at Polar Design, I wore many hats. Sticking to only my web coding, the site to the left was built in SilverStripe CMS; an oldie. I did the cutups of the design into the HTML and CSS template.

Pentacycle was established to chronicle a bicyclist's cross-country journey to promote peace for the 2008 Beijing Olympics. I created a Wordpress-based template for the website from a fantastic design.

Possibly my proudest project. I learned the company's proprietary, documentation-less CMS and used it to finish the site in less than a month. Through interviews with colleagues in Slovakia and in the USA, I began my tenure as the resident expert in this CMS after coding this website.

I got hired at Polar Design for my promising flash and animation skills. To the left is a simple animation done as an introduction to my flash animation courses. .. In 2005.

Hungry for more? See some below...!

Resume