What I have always loved about being in the computer technology field is the constant learning. Technology is constantly changing with new advances and new consumer demands. And it doesn’t matter how old I get; I see myself always learning and trying something new. I’ll never forget a student I met in the STEM lab while at Edmonds College. She was in her 70s. I was blown away when I heard she was studying astrophysics. That’s the type of person I aspire to be.
My three and a half years at DIRECTV as a content writer were excellent for expanding my mental horizons. I’ve always been a writer, but writing words to improve the user experience when using a website beyond “Push Here!” was a whole new perspective.
UX Writing
Writing for UI/UX differs significantly from writing books, articles, posts, and technical reviews, especially in a Twitterized, Instagrammed, and TikToked world. Attention spans are short; anything read on a webpage must be short, sweet, to the point, and appealing. I have Microsoft’s Manual of Style, the foundation of DTV’s content styling, and The Chicago Manual of Style, the biggest book on my bookshelves. I learned a lot by researching what other sites are doing and by writing detailed prompts in ChatGPT. I also read a lot on baymard.com, uxwritinghub.com, and the Nielsen Norman Group site at nngroup.com. However, one book I highly recommend is “Strategic Writing for UX” by Torrey Podmajersky, published by O’Reilly. I plan on writing a book review for it.
Accessibility
I learned a lot about accessibility testing and how important it is to ensure that the website can be used by people with physical challenges. (Thank you, Terri Hawkins.) One of the services we use is Level Access, which provides automated and manual accessibility testing. They have a plugin that works with all the major browsers. I also learned how to use the Mac Accessibility tools to read and navigate what is on the screen. Did you know you can be fined for not ensuring your website meets government accessibility standards? You can learn more here: W3C Web Accessibility Initiative.
Figma
Wow! This is one of the most amazing tools I have ever come across. I’m tempted to return to college for some courses to become a UX Designer. This is how excellent this product is to use. Figma is a collaborative cross-platform interface design tool. DTV has standardized all of its website design work with this tool, and they’re implementing their internal design system library called Fusion. I got involved with the migration and implementation process by writing training guides, recording training videos, and analyzing various Figma plugins for content management. I learned how to prototype and create animated mockup designs to simulate how various website components function.
Figma on Mac with one of my prototype designs.
Keep Learning
Learning is living! Don’t be afraid to tackle something new.
One-Year Kforce Contract Turns Into Three-and-a-half
Within days of turning on the “Available for work” banner on my LinkedIn page, I received a note from a recruiter with Kforce asking if I would be interested in a one-year content writer contract with DIRECTV. Without hesitation, I responded positively. The rep sent me the job description, and I sent my resume. The next day, I had a video interview with the Director of UX. It was an excellent interview, and I was pretty upfront about my views of AT&T (who currently owned DIRECTV) even though DIRECTV was splitting off as their own company. I didn’t think I would get the job. The next day I had the job and the onboarding process began.
What’s a Content Writer?
Generally, I knew I would be responsible for writing and editing copy for the website. But as I dove into the assignment, many light bulbs came on. I soon discovered I had been a “content writer” most of my life. I wince whenever I see a poorly written sign, advertisement, news header, or instructions – wanting to fix it. Now, it was my responsibility to quit wincing and start fixing.
DTV Business Writer and Producer
For the first five months, I was assigned to help DTV Business with content for a site refresh. DTV Business caters to Restaurants, Hotels, Offices, and more. We worked with a vendor to provide the media graphics; our designer would build the UI for the pages, and I would provide the written content. I created a new MS Word document as a CRD, a Content Requirements Document. I would match a CRD with the designer’s Adobe XD design document. These would be reviewed, approved, and handed over to the developers. But there was a bit of a problem. We didn’t have a Producer assigned to the team to coordinate the assigned content and media movement. With agreement from my director, I assumed the role of Producer and Content Writer. There were a couple of long weekends, but we completed the business site refresh.
Upper Funnel and Buy Flow Content
My following content writing assignments were for various teams and content, mainly for the new customer product selection and purchasing processes. It is incredible how often content has to be changed when dealing with websites that sell products and services. Many of those changes also require approval from the legal department. Product names, logos, trademarks, styling, and element grouping must be just right.
The Skunkworks
My assignment was with the Quadro team for most of the last two years of the contract. I feel pretty privileged to have been selected to be on this team. We referred to ourselves as the “Skunkworks” of DIRECTV. Our job was to develop new ideas and website components to drive traffic to the site and have better engagement with potential customers. And we didn’t follow the usual business processes. The team’s principal product manager would give us an idea of what he hoped to accomplish. We would have the entire team involved in a meeting. The manager, product owner, designer, writer, and development team will all be involved in discussing and determining feasibility.
Now, due to my extensive background as a developer, I slipped into the role of analyst. I would research the best approach, design, and content for the best results. I would then mock up some options and present them to the team. The PM would make a selection, and then we would hand it over to the designer. Once the design was completed and accepted, we would hand it over to the developers, who already had a head start since they were involved from the beginning of the request. This level of communication and involvement allowed us to provide solutions quickly.
Quiz Flow component created by the Quadro Team.
Fusion Design System and Migration to Figma
One of the first questions I asked when I started with DIRECTV was if there was a Style Guide. I knew from my courses at Edmonds College that a style guide would be necessary to provide efficient and effective website content. The answer was, “Well, kind of…” There were font guides, color guides, a sort-of element guide, and an attempt at a content voice. But these were scattered about in different files and tribal knowledge.
The director who hired me was now a VP, and he asked for feedback from the team before attending an off-site strategic planning meeting. I mentioned how a Style Guide would be helpful, and I’m sure others noted the need for a Design System.
During the past two years, we migrated to Figma. The new Fusion Design Team has been busy designing and building atoms, molecules, elements, and components for the Fusion Design Library (based on Material UI.) I had the privilege of writing content for the Sharepoint-based Fusion Design Style Guide and content for the Fusion Design Library, and I recorded multiple training videos on how to use Figma, the Fusion Design Library, and how to integrate the Microsoft Visual Studio Code extension for Figma, for the developers. As my last parting project, I designed and developed a CRD template for Figma, which shows how to manage the copy content within the Figma design files.
Image of the CRD Template in Figma. (Image only. I do not possess the file. Property of DIRECTV.)
Project Summary
While I am sad to part ways with the DIRECTV team, I am very pleased that this contract lasted much longer than one year. My skills in UX content writing and research have been greatly expanded. I’ve learned how to do some design and prototyping in Figma and improved my video recording and editing processes. But mostly, I have met and made new friends in the UX/UI industry. Thank you, Kforce and DIRECTV, for the incredible time.
From Bricks to Clicks! – City Lights SF Shopify Project.
Last December (2020) a friend, past work associate, and fellow author, McNall got in touch with me and asked if I had any Shopify experience. Truthfully, I responded that I had an account, had done some minor store configuration with it, and that it was just another CMS (Content Management System) on the web. Little did I know that I would soon be the primary developer on a major, push the boundaries of Shopify project.
I soon met the team of J.R. (PM), Whitney (UX), McNall (Content), Mike (Configuration), and Carolyn (Client) via a Zoom meeting and learned the initial scope of the project.
Project Scope
City Lights SF Lighting is an upscale lighting store in the City Lights district of San Francisco. Like many other businesses in a pandemic-stricken world, they had to close their brick-and-mortar-based business operation. They had an excellent website, but it was only for attracting visitors to the physical store location. Our challenge was to create an online storefront for a catalog with tens of thousands of products and have it up and running by the end of April 2021. No pressure!
It had already been decided that Shopify would be the store’s platform. We were at the very beginning of a significant project. We only had a platform, a live date, and a team. Thankfully, the team was impressive. We defined our key goals:
Pick a theme for the UI/UX.
Determine how to import tens of thousands of products.
With the theme as a foundation, design the required pages.
Define the menu structure.
We all dove in feet first to our specific tasks. My initial responsibility was to help define the menu structure and determine how to get the products into the store database.
The Shopify Environment
Fortunately, I’m a speedy student willing to take on anything new. Even though Shopify is just another CMS, it does have its own structure, terminology, and development language. Shopify has a prebuilt database structure for supporting products. Products can have descriptions, pictures, options (variants), types, attributes (dimensions, weight, barcode, vendor, etc.), and tags can be defined and attached. Shopify also has Collections, which is a grouping of products. The grouping can be by vendor, types, tags, and just about any relationship that one can think of.
The themes have a slightly different structure—nothing like WordPress, Wix, or Square. Home pages have a bunch of different dynamic sections, while other pages are pretty static. Most themes are designed for a specific type of product or industry and with the intent that everything you need is already provided. A Pages section provides the ability to build custom pages with a Real-Time Editor or toggle to the source and use HTML.
The programming environment is based on the Liquid template language and allows users to customize the existing theme files or add new pages, sections, functions, and styling. HTML, CSS, Javascript, JSON, and AJAX are all supported.
The Theme and Apps (Plug-ins)
The Shopify sales representative, Philip, was very helpful in directing us to the themes and apps that would best meet our needs. After much discussion and some research, we landed on the following:
Empire theme by Pixel Union – the UI/UX layout
Tabs – Product Page Tabs – for putting tabs on the product description
Matrixify (Excelify) – For importing and exporting data
Product Reviews – To get and show product reviews.
Product Filter & Search – Provides expanded search and filtering
Instafeed – To show the client’s Instagram feed
GDPR/CCPA + Cookie Management
Shopify Email – For email notifications
Accessibility Assistant – To ease website use for those with disabilities
Variant Image Automator – For displaying images of variant options
Variant Options Swatch King – Additional swatch image options
Yes, those are a lot of plugins, but they are quite necessary for a full-blown shopping experience and presence.
Product Data
My first development task was actually in Microsoft Excel. We use the Matrixify app to import the products into the store. The product description can be formatted with HTML for an excellent presentation. We have a lot of information to present about the product and will divide that information into tabs. So, it was necessary to add columns to the importing spreadsheet with HTML code to gather the data from other columns, format it, and then have the product description column reference the columns with the code. It was a lot of work to get it right, but it worked pretty nicely. We provide the spreadsheet to a third party who adds the product data to the spreadsheet, and the code in the columns automatically handles the formatting.
Some of the Excel code.What the Excel code generates. The Product Description.
Theme Challenges
As is usually the case with most CMS-based websites, the theme does not always meet the client’s needs. This was the case with this project. While the Empire theme is very robust, a lot of functionality was needed to make it into the required storefront. Here are some of the customizations and the associated challenges I ran into:
Category Pages: The site needed to add pages to show specific lighting categories, such as outdoor, track lighting, etc. The Category Pages needed to have Sub-categories. Unfortunately, Shopify does not allow the embedding of sub-collections under a collection. Initially, I built these in the Pages section in HTML and inline CSS. Upon discovering that these pages would need to be changed by the client regularly, I moved the code into Liquid and added JSON fields to expose the settings to the UI for easy customization. Then, the challenge was adding calculations to determine how many rows and sub-categories are on the page and then adjusting the page length to compensate.
Home Page HTML Section: Adding a section to the home page with HTML and inline CSS is a nice feature. We added an “About Us” section with an image, some text, and a button. It works, but the only way to change the content is to edit the source code in the box.
Dynamic vs. Designated Collection Pages: The Empire theme has a nice feature that allows a customer to click on a product’s vendor name and a Collection Page for that vendor will be dynamically generated. However, we wanted that link to go to the collection page we manually created, with a description and a banner image. This required diving into the Liquid code for the Collection page and changing the vendor link to point to our manually created collection pages.
End of Contract
Unfortunately, as is sometimes the case with website implementation projects, they don’t always go according to schedule. In this case, with a planned completion of April, I had put my feelers out for new projects via LinkedIn. I didn’t expect any immediate hits. However, Kforce contacted me about an opportunity with DIRECTV for a one-year contract. I landed the gig and spent the next two weeks helping City Lights hire another Shopify developer. The good news is that City Lights and the team completed the project, and the new website is doing great. You can read about my DIRECTV experience in the next posting.
Last year, I had the privilege of meeting Hanna Smith, MA LMHC CGP. She had an interesting dilemma of being locked into a very limited WordPress-based hosting platform. She wanted to expand the functionality of her site and was told the features were not available. I presented her with an affordable solution which included:
Moved the hosting to a flexible WordPress-based platform.
Redesigned the UI and Menu structure.
Added all of her blog posts and provided video training to her content manager.
Implemented spam protection, contact form, subscription form, SEO support, and Mailchimp integration.
Provided custom CSS and code change for content formatting.
Added her Book page.
Conversion of her paper fillable forms to downloadable PDF electronic fillable forms.
I manage the site backups and plugin upgrades.
Primed for Long-term Growth
I am very pleased with how the site has turned out and to see how happy Hanna is with the progress. She now has the flexibility to dream up new features and functionality for her site and thus gain more exposure for her services and products.
Soon, I will be integrating a courseware platform for hosting training videos and content.
A very special thanks to Hanna, for being one of my first website customers and trusting me with her site.
Potential Finders Blog PagePotential Finders Subscription Page
If you follow the trends in the computer software industry, you might have noticed many articles discussing “No Code” approaches to software and website development. Some have even gone so far as to say that programmers would no longer be needed in the future.
I do admit that many of the big website hosting platforms make it easy to dive in and put together a site with a minimum amount of effort. WIX, Squarespace, WordPress, Joomla, Website.com, and Shopify are great examples. You can pick a theme, upload your pictures, drag-and-drop text boxes, buttons, menus, and Boom!, yer done.
So, Why Know How to Code?
Right off the top of my head, I can give two good reasons why developers are still important.
1.) They know what is going on behind the curtain. When a non-developer sits down to build a website with a no-code tool, they sit down and just start building, without giving it much thought. Then the frustration hits when they discover their site is slow, does not look good on mobile devices, fonts and colors don’t blend well, buttons and menus are not staying in the desired positions, and they can’t figure out how to add an extra page. The site sits stagnant and the owner gives up.
A developer who understands the technology will ask the client what they want to achieve with the website. The dev will design a plan for the website, take performance and mobile devices into consideration, structure the pages and menus, select appropriate fonts and colors, and make sure the buttons and menus flow nicely. If the client already has a specific tool in mind, the developer will determine if the tool will match the expectations of the client. Otherwise, the developer can recommend a specific tool or platform based on the client’s requirements.
2.) A developer can customize beyond the limits of the no-code tool. Most of the no-code solutions provide the ability to peek behind the curtain and access the source code for the site. The no-code site tools usually provide a wealth of Themes, Apps, and Plugins for providing the client with decent solutions. However, what if the client does not like the font being used, wants the color changed, or needs an element to be repositioned – and the interface for the tool does not provide for those changes? The developer can go into the code and make the necessary changes.
Why Is This a Topic?
I hear many conversations that make me shake my head.
“I needed a website for my business, so I signed up with so-and-so, but I can’t get it linked to my PayPal account. Can you help?”
“I heard about a new site that uses A.I. to build a website for you. Is it going to put you out of work?”
If you’re a developer, don’t worry. You’re NOT going to be out of a job. If anything, web developers are going to become even more important as businesses, small and large, are discovering they have to be on the web – especially when people can’t visit their brick and mortar stores.
If you need a website, hire an expert! Trust me! You’ll save many hours of time and frustration. Even if the expert selects a no-code solution for you, at least it is a decision made with wisdom and experience. And if later you need to have your site customized, the developer will know what to do.
I keep hearing the word, “Unprecedented” in the news media and in conversations. This year is definitely unprecedented in the number of never before seen events. While this word is heavily utilized when describing the pandemic, hurricanes, fires, global warming, political/social unrest, etcetera – I prefer to use it for defining my personal approach to highlighting my services. Did you notice that huge shift from world-changing events down to me?
This is what we’re all doing. We’re trying to adapt our personal lives to a rapidly changing world environment. We’re asking ourselves, “How do I get from here to there?” From now to survival in the future. The answer? We take unprecedented or never before tried, approaches.
Marketing Me
My last post reflected on being flexible and adaptable to changing conditions. I’m juggling DoorDash, creative writing, technical writing, and website development. The goal is to have enough freelance website and writing work to support my creative writing, and only DoorDash when necessary. I currently have two clients:
So, how do I get more? Set up a storefront website? Advertise to big businesses? Pitch my services to every single person that comes along? Nada!
Focus
Here are the approaches I am taking with my bootstrapping as a freelancer:
Transparency – I’m a big believer in honesty and transparency. I have nothing to hide and I’m not going to pretend to be a big business. I am one guy with a few friends in the industry and a knack for learning what I don’t already know via the internet.
Target Clients – My clients are and will be those who don’t have a clue about putting together a web site. They don’t want to learn how to do it or try to understand it. They already have their nitch and they want a website to reflect it.
Personal Touch Marketing – Let’s talk! My marketing will be via contacts, word-of-mouth, and personal interaction. I want to know who you are and what you want to accomplish before I start talking numbers and timeframes.
The only thing that will not be unprecedented is business cards. I will have them in my shirt pocket, ready to hand out, to anyone who is interested. I will not be blanketing everyone I meet with cards. Only those who have expressed interest or need. That is how I roll.
So, is this an unprecedented approach to freelancing website development and writing? I’d be curious to hear what you think.
I updated my resume last week with my new skills, education, and projects. It was in the typical text-only format in Microsoft Word. Which is also just a boring text-only format that I have been using throughout my career. Having a semester of graphic arts made me decide that I need to do something a little different.
I also stumbled across this awesome video on Youtube while checking out web development videos. It’s called, “The Resume That Got Me Into Microsoft” by a young Microsoft Intern who does a lot of videos, blogging, and podcasts about programming. (His channel is TechWithTim.) I liked his formatting and it gave me some ideas.
At a quick glace, which one would you rather look at?
The Old Format
The New Format
I hope you said the one on the bottom. Unfortunately, many recruiting firms still want a straight text format. They have sophisticated AI routines that scan the resumes for keywords, skills, and experience. They don’t even read the resume until it gets flagged by their internal search engines if they have a client to match up with.
So, I’ll still keep and maintain my resume in both formats. I am curious to see if this makes any difference in my search for clients. I’ll be sure to post my results in a few weeks.
You can download the new resume here or via the link on the main menu. Thanks for looking.
My wife calls me an overachiever and says I’m not happy if I’m not doing 80 with my hair on fire. Well, in many ways she’s right. I’ve always kept myself busy. I’ll be working on one thing and thinking about the next thing. And yes, I’ve been diagnosed with mild ADD. I call it a blessing. If I didn’t have the ability to focus I never would have accomplished as much as I have. The proof is in this transcript. I’m 62 and I managed to get a 3.99 GPA while getting my Web Application Developer Certificate. (Psssst! I blame the .01 loss on medical situation and the beginning of the Covid pandemic.)
I’m not trying to brag. Really! But, I am proud of this accomplishment. Especially in light of the challenging world situation right now. I also want to take this opportunity to give a big shout out to my wife. Not only has she put up with this “slightly” eccentric creative for over 41 years, but she still supports my crazy decisions and ideas. Okay, see?! I’m getting sidetracked.
What’s Next?
I mentioned this morning, “How can I be so busy and I don’t have a job?” Well, I have a very small webmaster contract with Edmonds College Teachers Union, on an as-needed basis. Now that I’m out of college I have a lot of goals and action plans on my plate. Such as:
Get myself up to speed on React and Angular. I plan on doing this via the LinkedIn Learning site. And I’ll be applying what I learn to my next big website project – CEPAR.
Redo my resume and make it available here. I updated it last week with my education and new skills. But, it’s still in the bland old MS Word format. I really need to spice it up to get attention. I’m going to put these new graphic arts skills to good use.
Start blogging about CEPAR. I’ve been working on this idea for several years. Based on the training I have received as a first-aid responder and disaster planning, I am building a site for Critical Event Planning and Recovery.
Write the Business Plan for CEPAR. Not only do I want to build the site and the technology to drive it, but I also want to create a plan for implementation and feasibility. I need to show a projected ROI to demonstrate that the effort is worth the time.
Continue to design CEPAR. I have the Business Statement and Goals. I have designed the Business Graphics. I have mapped out the website structure and features. Now I need to design the database and start coding the UI.
Oh, and look for work! School is done. Government support for the school is done. I’ll be pinging the freelancing sites (Upwork, Fiverr, LinkedIn, etc.) for projects and contracts.
Prepare my Onschool.com course. I have applied to be a teacher at Onschool.com and my first course will be on creative writing. It is already outlined. I just need to run through it and then schedule the course.
Wear my Creative Writer hat! I’m halfway through writing Air Storm. It has suffered during my college courses and I really need to dive back into it. My fans are chomping at the bit, and I really want to get it into print before the end of this year.
How to Get It All Done?
Serious geeking gear!
If you have hung around me enough, you know I’m pretty good at scheduling my time and focusing my attention on my goals. I try to spend most of my time in my Circle of Influence. I don’t play a lot of games and I don’t watch any sports. I map out my day and tasks in Microsoft’s OneNote and I schedule which days I’m a geek, which days I’m an author, and which days I’m the handyman. (Yes, dear, I’ll take care of it.) Thank you, Stephen Covey, for showing me the way!
Cry havoc and send out the dogs of technology! I’m diving in!
