All resources discussed here are free and will be linked at the end of the post. The client discussed in this post has approved of its publication.

Background

I am going to begin this post by briefly sharing my skill level and experience in webdev to provide better insight into my approach to my first paid freelance project, and hopefully inspire/guide other developers in taking on a freelance project of their own. I have been self-teaching web development alongside Leon Noels 100Devs training agency for a little over a year.
I am currently proficient in vanilla HTML, CSS, and frontend JavaScript, and have used these skills to complete several FrontendMentor projects and simple unpaid freelance websites. At the time of this blog post/freelance project, I had not yet worked with e-commerce/CMS platforms nor had I built more than simple landing pages for unpaid clients.
In summary: I am not a webdev expert so there may be moments as you read this where you have questions, suggestions, or concerns, and I happily encourage you to leave constructive comments.
To read more in-depth about how I started coding, check out my "Hello World" blog post (the Hello World post may not be public at the time this blog post is released, I will come back and link to it once it is).

Getting The Client

As mentioned above, I have completed several small personal and unpaid web development projects over the last few years, including things like basic landing pages for a family member's computer repair business or simple personal hobby pages for internet friends. Due to the scope of the projects and the lack of money involved, they were fairly easy, attainable, and relaxed.
When the assignment was given to secure a paid freelance client I was terrified. I knew that if I allowed myself to ruminate on the idea, I would never have the confidence to get started. I wrote a list of all of my fears and concerns about freelancing and burned them in my firepit, a symbolic measure of letting them go.

I started small by posting about my new freelancing venture on social media and reaching out to some local businesses that didn't have websites. Most didn't reply and the ones who did ghosted me soon after. I created small leaflets advertising my services with a QR code leading to my portfolio site and handed out more than 300 on Halloween. I visited local shops in person, called, emailed, and advertised everywhere I could think of, including displaying large posters at the numerous garage sales my family/friends had.
After a while, the process felt less like business and more like rejection exposure therapy.

The stress of cold-calling, negotiating contracts, deadlines, and client satisfaction bounced around in my head, leading me to a relieving yet disappointing conclusion: I wasn't ready. I allowed this thought to flourish and decided I would continue practicing and return to freelancing when I "felt ready" someday (spoiler alert: that day doesn't exist, you never totally feel ready).

Less than a month after making this decision, I was emailed by an individual who told me that they had found my information at one of the garage sales on a poster (you never know what methods of client acquisition will work for you!). They explained that they were starting a small business but had very little technical knowledge and simply wanted to chat about what I could provide. A bubbly and passionate woman, I couldn't help but feel inspired as I listened to her speak about her craft and her hopes of creating a career in which she can share her talents with the world.

Her passion and hope lit a flame in me that burned brighter than the fear of "Not ready" and we set out on the journey together.

The Project

After our initial brief chat, I requested a formal consultation with the client, to begin Phase 1 of our process (information gathering).
Throughout this project, the client and I maintained daily correspondence via email and met 1-2x weekly in person (this was highly feasible as she lives minutes away). The client was worried about forgetting to deliver pertinent information to me so we created an email thread wherein she would update me with any copy (text that goes on the website), images, or ideas she had each day.

Phase 1 (Information gathering)

I started this phase by working with ChatGPT to create a reusable questionnaire that would serve as the starting point for our design process.
( I have included the stripped-down versions of the blank questionnaire and the client's completed questionnaire, the original versions included examples to aid the client in understanding each question )

Blank (Basic Form) Questionnaire

(Text is copyable, feel free to use it for your own purposes)

What is the primary goal of your website?

• What is the primary goal of your website?

• What do you want your website to convey to your visitors?

• What features would you like to have on your website?

• List any colors you would like to use/avoid:

• List any fonts or font styles you would like to use/avoid:

• What is the overall style that you envision for your website?

• Are there any specific design elements that you would like to incorporate into your website? If so, please provide examples.

• Do you have any existing branding or marketing materials that we should incorporate into your website design?

• Are there any websites that you admire or find inspiring? If so, please provide links or examples.

• How many pages do you envision for your website?

• Are there any specific pages you would like to have?

• What is your preferred timeline for completing this project?

• What is your budget for this project?

• Do you have any other specific requests or requirements for your website design?

Clients Completed Questionnaire

To address the absence of marketing materials and design parameters, I prepared various design ideas, showcasing font pairings, color schemes, and layout possibilities. I also leveraged tools such as AI color palette generators that I have included in the resource list at the end of this article. These visual aids enabled the client to grasp the concepts effectively and make informed decisions.

Once I had a better idea of what the client wanted both in functionality and design, I began to research to find workarounds for the client's budget and timeline constraints. I informed the client that with her parameters and my current skill set, we would face the following challenges:

• We were unable to utilize hosting, themes, e-commerce platforms, or plugins that required financial investment

• I do not currently have the skills to build an e-commerce site from scratch, and learning as I go would likely take longer than the three weeks allotted

I reached out to my dev community on Twitter and Discord to gather opinions on the best options for this client's needs and compared them with my own choices. After reviewing these obstacles and discussing the options with the client we decided to use WordPress, as it allowed for the basics of what she could afford currently and the ability to scale later on.

Confused about the difference between Wordpress.com and Wordpress.org like I was? Click the arrow to check out the link below.

Wordpress.com vs Wordpress.org

As her business is currently very small and locally based we decided upon the use of WordPress forms to allow her current customer base to order products. This was a temporary solution with a long-term plan including an upgrade of her WordPress plan, that allows for e-commerce.

With a mutual understanding and agreement on the overall scope of the project, it was time to make things official with a contract. I utilized Sam Sycamores Contract Killer template to create a contract that was comprehensive, yet understandable (not packed with lawyer-speak). This contract outlined basic terms regarding payment, services provided, termination, and other details.

After reviewing everything together, signing the contract, and receiving the first payment, it was time to get started on Phase 2 (building the site).

Phase 2 (Building)

With the deadline hovering three weeks away, and my absolute lack of any experience with WordPress, I had a learning curve to overcome.
It was time to hunker down.

I could write an entirely separate post detailing the building process, but I don't feel that it would be appropriately helpful, so I'll keep this brief.

I began by creating a WordPress account, picking a simple theme, and creating a practice page where I would test certain blocks and layouts. I found some "Beginner Basics of WordPress" videos on Youtube, set them to 2x speed, and followed along using my practice page. After about 30 minutes I had a reference page with interactive examples of most of the blocks and combinations, lending itself as a great resource for me as I continued to build the site. I found this highly advantageous and would recommend it to anyone diving into WordPress, whether you have a tight learning deadline or not.

Feeling comfortable with my understanding of the basics I created a schedule for myself, utilizing time-blocking to create slots for each day in which I would work on certain aspects of the site. Tasks that required higher cognitive effort (such as logo creation) were placed earlier in the day, to avoid the sludge of afternoon fatigue impairing the quality of my work.
I encourage my fellow ADHDers/procrastinators to consider these methods or develop your own - please do NOT depend upon the magical deadline adrenaline to propel your success.

In order to create a more cohesive partnership, I had the client create her own WordPress account and assigned her the Editor Role, allowing her to watch my work in real-time. We both found this helpful as she was able to offer suggestions that were more relevant to what I was working on each day.
For the logo creation, I had her utilize the NameCheap logo generator to give us a jumping-off point from which I created a new design using Canva and Gimp, and we leveraged ChatGPT to aid us in finalizing her slogan/improving some of the copy.
Starting with the highest priority pages, the homepage and order form page, I began to build out the website and see her vision come to life.

Acknowledging my initial feelings of unease at building the site with WordPress, I knew that it was a skill that I would need to develop in my career, and I found gratitude at the opportunity to learn while using it in a real-world application.
Despite our decision to keep the website fairly minimal and clean I thoroughly enjoyed working through my learning curve and was reminded of why I started learning to develop in the first place. The experience of watching my client grow more excited every time I unveiled a new page provided a rush of motivation that helped me to overcome every roadblock I experienced along the way.

Phase 3 (Launch and Post-Launch)

A few days before our official launch, I decided to publish the site in order to test all of the features and forms, collecting feedback from the client and user testing group I created. I shared the site with the client, her husband, and a few of my peers, instructing them to try out different features of the site such as links, menus, and forms. I instructed my peers to imagine they are a potential customer of the clients and to provide feedback, focusing on the following measures:

• Ease of use

• Styling

• Responsiveness (especially on mobile devices)

• Ability to find pertinent info

  • Order forms

  • Pricing info

  • Product listings

(If I could go back, I would have soft-launched the site to some of the clients existing customers, as I feel this would have provided better insight.)

After going through the feedback and meeting with the client, I implemented the tweaks suggested and went through my final launch checklists. (I highly recommend utilizing at least one checklist to avoid forgetting things like adding alt text to images.) After quadruple checking everything and receiving approval from the client, I launched the website and stayed up two hours past my bedtime excitedly monitoring the viewerships stats (there were none yet, of course).

The next day I received a message from my client telling me to check the website stats, as she had shared her new website on social media. We were both ecstatic to see that she had received 100 views (not from me, I swear), and we both continued to monitor and update each other throughout the day with the final total being around 400 views from over 100 viewers (I had already informed her that the stats provided by Jetpack are not infallible).

As part of my services, I offered a training session to the client which she happily accepted. She had experimented a bit with adding blocks while I was building the site but needed more guided practice in order to do things like change images and add products in the future. I approached this training session very similarly to how I approached my own just three weeks earlier. We sat down together, a blank practice page on her screen, and added each of the blocks to the practice page, experimenting with details like margins/padding, gradient colors, and anchor linking. I also went over each item of the WordPress dashboard, and the tips and tricks I gathered throughout my own learning process. The training session was about two and a half hours long, but we made it so fun and digestible that she was excited to continue practicing after the session was over.

She completed the final payment, we created receipts, and it was time to head our separate ways. By completing the financial contract between us we were no longer client and provider but had returned to our original forms as visionary and architect. Before I left, we traded grateful sentiments and celebratory cheers, before finally opting for a parting hug instead of a handshake (if you take issue with my consensual hugging of a client, feel free to scream your complaints into the void).

Client Results and Testimony

Click here to view the clients website

"I have to say that Chloe did an amazing job creating an interactive website for my new business. Initially, I had no idea of where to even begin with creating something like this. She was very professional and concerned about every important detail and always asked for my input. She also shared in my excitement and encouraged me with my new business. I would highly recommend her for quality of work, dedication, and services!"

Next Steps

1. Lessons Learned: Reflecting on this freelance project, I've gained valuable insights and experiences that I can apply to future projects. Some key takeaways include:

   • You're never truly "ready" to start freelancing; taking the leap and learning along the way is crucial.

   • Finding a project or client that excites you can fuel your motivation and passion.

   • Be prepared for rejection; it's a common part of the freelancing journey.

   • Reaching out to potential clients through various channels and being persistent can lead to unexpected opportunities.

   • Clear communication and regular updates with the client are essential for a successful collaboration.

   • Creating visual aids and questionnaires can help both you and the client better understand and align on project requirements.

   • Leveraging community resources, such as AI color palette generators and design tools, can enhance the design process.

   • Utilizing contracts and agreements helps establish clear expectations and protect both parties involved.

2. Applying the Knowledge: Moving forward, I plan to use the knowledge and skills gained from this project to enhance my freelance work. I'll implement the following strategies:

   • Continuously seek out projects that align with my interests and passion.

   • Improve my communication skills to better understand and meet client expectations.

   • Strengthen my proficiency in WordPress and explore new platforms and tools to expand my capabilities.

   • Seek feedback from clients and peers to further refine my design and development processes.

   • Stay active in online communities and leverage their expertise for guidance and support.

   • Enhance my project management skills to ensure efficient timelines and client satisfaction.

Remember, freelancing is a journey of growth and continuous learning. By applying these lessons and leveraging the knowledge gained, I'm confident in my ability to tackle future freelance projects with increased confidence and success.

Summary

Objective

Client wanted to build her brand, showcase her products, and generate more awareness of her business.

Features Requested

- Marketing materials - logos, site icons, copy text, color schemes, etc

- Galleries showcasing products

- Allow customers to place orders

Constraints

- Aside from my compensation, client's budget was $0.

- Client desired a timeline of 3 weeks, from inception to site launch.

- My lack of any previous experience with Wordpress

- Client had minimal marketing materials, logos, color schemes, or design parameters to provide.

Approach

Our approach involved a three-phase process.
Phase 1: Information gathering
Phase 2: Site building
Phase 3: Launch and post-launch

In the initial consultation, we discussed the project's objectives, timeline, and budget. During the second phase, I created a comprehensive questionnaire to finalize project details, including the desired timeline, color schemes, budget, and features. To address the absence of marketing materials and design parameters, I prepared various design ideas, showcasing font pairings, color schemes, and layout possibilities. These visual aids enabled the client to grasp the concepts effectively and make informed decisions. Finally, we launched the site, sharing it on social media, and completed training for the client.

Resources, Tools, and Credit:

All resources, tools, and platforms used in this project were/are free.
I am not an affiliate of any of these and am not receiving any form of compensation for including them.

• Sam Sycamores Contract Killer contract template

• WordPress , utilized Stow theme

• Color palette generators: TintMint , Coolors , Colormind

• Logomaker: NameCheap Logo Generator

• Design/editing: Canva , Gimp

• Launch checklists: Wordpress Checklist