SQSH, or the St. Louis Queer+ Support Helpline, is a project started by Luka Cai, a friend and WashU alum (2020), which aims to support the St. Louis LGBTQIA community via “free, confidential, and identity-affirming emotional support, resources, and referrals.
Revamped SQSH Site (as of January 2021)
During the summer of 2019, I worked with Luka and the website team to launch SQSH’s first site. I wasn’t there for the initial stages of planning, and when I started working with them on it, they’d already built most of it in Google Sites. I’d never worked with Google Sites and found it rudimentary and frustrating to use. The original SQSH site wasn’t the greatest to read or navigate. 
One year later in 2020, I re-joined the team to help with building a complete revamp of the site, this time using Webflow instead of Google Sites. In the Spring, I built a mock website using HTML, CSS, and the UIkit framework to help with planning.

Revamped SQSH Site (as of September 2020)

We launched the SQSH site revamp in August 2020. Throughout the summer, I worked with the team to add content and styling using Webflow. It was a long process to refine the website, but I’m glad my mock remake could help it along. As a team, we re-structured the sitemap, collected and implemented two rounds of user feedback, and improved accessibility (such as: adding “alt” text to links, testing color contrast, adding a “leave page” button, and making sure all elements are responsive).

My mock remake of the SQSH site

The Google Sites site had a lot of different information that could be better presented using UIkit elements such as Accordion (for "How to use the Helpline"), Navbar (for the navigation), Card (for team members and/or the FAQ). Right now, this information is hard to read and navigate. Much of the text is centered, which isn't good for legibility either.

Old SQSH site (as of May 2020)

The Summer 2019 web team also grappled with making the site responsive (mobile-friendly), which they began considering too late in the process. In my mock remake, I wanted to pay close attention to responsiveness, accessibility, functionality, and overall visuals. SQSH is an important resource that deserves a better website.
When I began wireframing, I thought a lot about navigation and each page's content. In my opinion, the current SQSH website's content is confusingly organized. I looked into each page and re-arranged the content into five main pages: Home, About Us, Services, Resources, Support. I ended up discussing with the current SQSH web team (which I re-joined at the beginning of this project) about reworking the sitemap, and we came up with a much clearer version: Home, About Us, Helpline, Resources, FAQ.

For navigation, I decided to use a topbar with buttons. I referenced several websites like QLife (LGBTQI+ helpline in Australia), MAAM, and Bellweather Agency. I was also inspired by the bands of color around the ring of SQSH's logo, and thought they could transfer well to topbar nav buttons, with each button a different color.
Lo-fidelity desktop view
Lo-fidelity desktop view
Lo-fidelity mobile view
Lo-fidelity mobile view
I created these hi-fidelity wireframes using Figma. I was worried that there might be too much information on the topbar and the footer felt unresolved. The colors on each page corresponded to that page's button color in the nav bar, whose colors were taken from the SQSH logo. I was still unsure about how to indicate hover/active states for the nav buttons. View these live on Figma.
When I started to build the site, the web team was discussing what imagery and visuals we could use to liven up the new site. I ruled out photographs of helpline volunteers or the internal team due to privacy and the need for constant maintenance. Ideally, the imagery would be quickly and easily made but still visually interesting. I was concurrently taking Ben Kiel's Programming Design course, in which we created visuals using Python in DrawBot. Inspired by designers like Andy Clymer and Agyei Archer, I wanted to see if I could utilize DrawBot to create an infinitely-varying yet similar set of graphics to use as backgrounds or images on the site. You can view that process here!
The bulk of the work lay in putting in all the content (there’s a lot!) and figuring out how to get UIkit elements styled how I wanted them. Making my own CSS file while tinkering with the UIkit CSS files to override some of their styling took a lot of time. I didn’t love how the mobile menu was styled and even tried to override UIkit’s styling to do it myself, but I eventually just decided to stick with their default styling because it was functional. However, I was grateful that UIkit provided so many interactive elements (ie: dropdowns and fixed-scrolling images) that I would have had to use JavaScript to build on my own.
As a team, we decided that using dropdowns was a good solution for fitting in all the content of the original website but not making the user scroll for ages. Also, a “home” button would be helpful for older users who may not be used to newer conventions, even though the “SQSH” in the navigation bar also lead to the home page.
My mock website remake opened up a lot of dialogue about what the new SQSH site had the potential of looking and functioning like. I was excited to see what we can do with our new, reworked SQSH site.
After the launch, I’m happy we were able to work together through this pandemic to create a site that is hopefully more usable to people in the community. We still welcome user feedback regardless of involvement in SQSH, so if you have any suggestions, please feel free to reach out to us.
“At SQSH, we believe in using design as a tool to promote social justice and increase our community’s access to resources. That’s why we completely redesigned our website to better represent our organization, mission, and services. Check it out today at thesqsh.org! We value your feedback and welcome your comments in this thread. Alternatively, email our SQSHWeb Team at sqshweb@gmail.com or fill out our General Contact Form (linked in our website’s footer) if you’d like to provide feedback privately!”  —SQSH website launch post on Instagram​​​​​​​
Update: as of January 2021, the SQSH Web Team has been hard at work maintaining the site, especially for important updates like SQSH’s Black Lives Matter statement and its big fundraiser. After discussing with SQSH’s Graphic Design team, I changed the website’s typefaces (previously Montserrat) to be more in line with SQSH’s visual branding system. It now uses Qanelas Soft, the same typeface the logo is in, and Raleway, which has rounder and more compact letterforms than Montserrat does. In the future, we hope to add more photography of people, numbers, and data vis to the website.
Impact
“Your website is actually really great—looks really good, great functionality, user experience, etc...I think your website is possibly your biggest asset” —The Hive Marketing Collective
Attribution
Montserrat designed by Julieta Ulanovsky, Sol Matas, Juan Pablo del Peral, Jacques Le Bailly
Edwin Q set up the site on Webflow, made base structure, and implemented content and feedback.
I styled most elements, made all elements responsive, and implemented content and feedback.
Luka Cai provided content and constant user feedback.
Lisa Bergman provided user feedback and set up user testing.
Abram Siemsen provided mentorship as I developed my mock website.

More Work

Back to Top