I created this website for a new LGBTQ+ friendly telehealth clinic. In addition to designing mockups in Figma, I wrote the content across the website, developing a friendly, empathetic brand voice that aligned with my competitor research and the target audience.
This telehealth clinic is primarily intended to serve the LGBTQ+ community, although it is open to anyone seeking hassle-free online healthcare. I made sure to highlight the service's inclusivity & convenience through the content.
In order to understand how telehealth services work, I studied similar websites such as hers, ro.co, and Lemonaid Health. I also looked into a popular LGBTQ+ clinic called Folx. My research helped me determine the website's structure and content.
Next, I created a site map outlining the website structure. I modeled it off the websites I researched to align with industry standards. I included three landing pages for each type of care offered (primary care, mental health, and sexual health) and subpages for each condition treated. While I debated consolidating the landing pages with the subpages, I decided to create separate pages for each condition, so users could navigate to them directly.
Before wireframing in Figma, I brainstormed which sections to include for each page & shortlisted them with my client. For the homepage, we landed on:
To determine the hierarchy of the content, I anticipated the user's needs and placed the most relevant content first. The most pressing need is getting treatment for a condition, so the get started button (CTA) and links to treatment pages for common conditions are at the top.
I followed the same process for the rest of the pages. For the landing page, I included an overview of the type of care, the conditions within the category, and the "how it works" section. I debated whether or not to include the latter, since it's already on the homepage, but I chose to keep it in case the user navigated to this page before reading it. Again, I put the key information and links at the top of the page.
After receiving client feedback to add some more content, I included a chart comparing the clinic with other "typical" services side-by-side, to help market the business. Another section I added was the FAQ, to clear up any remaining ambiguity for new users.
.svg)
.svg)
I followed a similar structure to the landing pages for the condition pages, replacing the list of conditions with a list of treatments. Unlike the other pages, this one does not link to any others, since it's the last one in the flow (home > landing > condition). Instead, I prompted the user to take our assessment.
.svg)
.svg)
An important part of the transition from lofi to hifi wireframes was writing the final content. Throughout the website, I maintained a friendly, positive, and inclusive tone. Some copy—such as on the homepage—is more marketing-forward, establishing the value the business can offer customers. On other pages, such as the condition pages, the copy is short and straightforward, because the user has already been introduced to the business & has a specific goal in mind.
For the more creative copy elements, such as the website header, I began the writing process with ideation: getting as many ideas on the page as I could. Below is my brainstorm for the header copy:
Headings
Subheadings
The final header copy I went with is "Treatment without the judgment: Inclusive and accessible virtual healthcare." I chose this version because it captured the clinic's mission and purpose in the most concise, catchy way.
.png)
.png)
.png)
Once the content was outlined, I started to finalize the design. I drew inspiration from similar websites, aiming to evoke a balance of professionalism and approachability.
Like the rest of the website, the design system also went through multiple iterations. After I received my client's feedback on my first mockup, we agreed that the colors resembled another popular website in the space too closely. We also wanted branding that was bright, playful & colorful to differentiate from other telehealth clinics and speak to the target audience.
I created high-fidelity mockups for the entire website, which is currently still under development. However, you can click through part of it in the prototype and view the main pages below.
.png)
.png)
.png)
.png)
This project was my first experience designing alongside a developer. The process deepened my understanding of how designs scale from Figma to the final version, and how to design in a way that set the developer up for success.
I also collaborated closely with the startup's CEO, regularly soliciting feedback and presenting my work for review. This helped me practice both defending my design choices and incorporating feedback into iterations. Overall, the project expanded my comfort zone as a designer and prepared me well for future roles involving cross-functional collaboration.
