Shannon was ready to start her own accent and pronunciation coaching business, but she needed a website and other marketing materials like printed flyers. Before she reached out to me, she had used Squarespace to create a draft of her website that didn’t have a cohesive brand.
I was confident that I could help. Together, we identified the key elements of a brand that would meet her business needs:
The Sharma Speech & Language logo needed to be friendly and memorable. The African Grey parrot is considered the smartest and one of the most talkative birds, so it felt like an apt choice of mascot for this accent and pronunciation coaching business.
Throughout the design, I used bright, moderately saturated colors and rounded shapes to communicate friendliness. For the display font, I chose Bitter, a humanist slab serif, to highlight the brand’s approachable professionalism.
Shannon’s feedback told me that my initial design (V1) was generally going in the right direction, but also that the branding felt too “cool” and not warm or human enough. To address this, I made some key changes:
While V2 succeeded in achieving a good balance between elements of the brand on the less complex pages of the site, Shannon felt that this version of the landing page design was too busy and didn’t prioritize the clean and simple aspect of the brand enough.
In response, I used just one photo of a potential customer instead of several, increased the whitespace throughout the site, and pared back the variety of elements I’d used to add visual interest to the landing page so the best ones could shine.
Brand-color hand-drawn accents were the most effective visual interest strategy I’d tried so far because they guided the user’s gaze, highlighted key headings, and added human warmth and friendliness to the page. I not only kept them in V3 but also added more prominent ones above the fold.
I’d successfully simplified the design, but Shannon felt something was missing from V3. I had overcorrected; the feedback suggested that more prominent transitions between sections could help, and this pointed me toward a great solution.
In V4 of the landing page, I used curved and wavy background shapes to delineate transitions between sections, add visual interest, and draw the user’s gaze down the page. The final design successfully conveys this brand’s specific balance of warm friendliness, relaxed professionalism, and simplicity.
Shannon had drafted some mostly unstructured website copy that used a formal, academic voice and wasn’t easily scannable or conversion-focused. This didn’t suit the business needs or the brand well, so I devised a clear structure for the information and rewrote all the copy in a more casual and friendly voice.
Informative headings, bullet points, and strategically bolded text make the copy scannable. I also followed copywriting best practices like these to make it persuasive:
The lead-generating CTA button appears both in the nav bar and at the bottom of each informational page so it’s always easy for users to find.
Shannon had already signed up for Squarespace before she sought my help with this project, so I chose to design the website to work within its constraints. Because she doesn’t consider herself to be especially tech-savvy and her budget didn’t allow for a dedicated developer, I offered to take on the development of her website as well as the design.
My existing familiarity with HTML and CSS and previous experience using both WordPress and Webflow gave me confidence in my ability to learn another low-code CMS and development tool despite the fact that I’d never used Squarespace before this project.
<!-- Sharma Services Pricing Table -->
<div class="table-container">
<table class="styled-table">
<tr>
<td><b>Consultation</b>
<br class="mbr" />(15 min)</td>
<td class="brand-color"><b>FREE</b></td>
</tr>
<tr>
<td><b>Assessment</b>
<br class="mbr" />(45 min)</td>
<td>$300</td>
</tr>
<tr>
<td><b>One Coaching Session</b>
<br class="mbr" />(60 min)</td>
<td>$150 per hour</td>
</tr>
<tr class="last-row">
<td><b>Coaching Package</b>
<br class="mbr" />(6 sessions)</td>
<td>$810</td>
</tr>
</table>
</div>Some aspects of the design I created in Figma were simple to replicate using Squarespace’s no-code system, but some were not so straightforward.
For example, Squarespace 7.1 doesn’t natively support tables. There are some third-party options for implementing tables in Squarespace, but my design only calls for one simple pricing table that appears on the Services page, so those feature-rich and sometimes expensive add-on tools would have been overkill here. I opted to write the responsive HTML and CSS myself and used a Squarespace “code block” to implement it.
Another challenge involved the hand-drawn curly arrow on the landing page that adds visual interest above the fold and helps to direct the user’s gaze down the page. It needed to cross the boundary between the page sections, which isn’t a design choice that Squarespace is built to enable.
I didn’t initially know how to make this work, but online research, trial and error, and perseverance allowed me to craft a “custom code” solution that uses the CSS transform property along with a series of media queries to make it responsive.
I relied on my previous experience designing and typesetting book interiors when using Adobe InDesign, Illustrator, and Photoshop to create printed flyers and business cards for Sharma Speech & Language.
I was able to reuse some copywriting and visual elements from the website to keep the message and branding consistent across mediums. However, physical printing constraints like the bleed, margins, page size, and CMYK color required me to prioritize, resize, and redesign each element to work well in context.
Less than 24 hours after Shannon first posted about her business launch on LinkedIn and asked her network to spread the word, she got her first new client lead through the contact form!
One important lesson I learned while working on this project is that I should always be ready to drop my favorite design elements as soon as they stop serving the project as a whole.
My writing and editing background first taught me this concept as “kill your darlings.” I realized that it also applies to design after I found that I needed to hide the above-the-fold curly arrow from the Sharma landing page on mobile screens because it’s not essential to understand the content. Its absence allows enough space for that first section of the home page to have a much more visually pleasing and legible layout at the smallest screen sizes.
I’m sure this insight will make me a better, more efficient designer in the future.
Just click the button below and tell me about your design problems, goals, and wildest dreams. Even if you don’t hire me, you’ll meet a good listener with a curious mind and a unique perspective.
Drop me a quick line and I’ll reply within one business day.
Imagine what your team can accomplish when I join it. If you give me a chance, I could be your best hire ever.
All you need to do is reach out.
... Oh, you’re still here! You’re a rare one, truly; I’d love to meet you. Why don’t you click this button?
