Spectrum Website Redesign and Development

Branding and Web Design

Client

Spectrum

Project Type

Website Design and Development

Project Year

2023

Tools

Procreate, Figma, Webflow, Netlify
Connecting LGBTQ+ People with Their Community

Spectrum is a company developing a queer community app for people who are isolated, closeted, or at risk with the tools to manage their mental health, find resources and information and connect with the community.

My role was to redesign and rebuild their website in order to better reach their target markets and increase their app downloads.

At the outset of this redesign I researched into other app websites that uniquely showcase their apps for inspiration on how to best create solutions.

Using this as inspiration, I created sketches using Procreate to brainstorm ideas and iterate through many design options.

Ideation sketches

I created high fidelity wireframes using Figma to provide an accurate representation of the redesigned user interface.

Drawing inspiration from the Spectrum logo and branding, I incorporated colors and curved visual imagery throughout the site, organically translating Spectrum’s branding into the web experience.

High fidelity wireframes of Home and About pages

As your first encounter of a website, the hero section needs to make a statement. By playfully combining a rainbow motif with a phone showcasing Spectrum’s app, as if it were a hand gripping the device, you’re drawn in and compelled to explore.

This set the stage for the rest of the sites design, where I repeated this motif to add a sense of cohesiveness.

Hero section Spectrum App showcase with rainbow motif in background

Following a design review and feedback from the Spectrum team, final alterations were made to the wireframes to improve the user-flow.

The ‘Download Spectrum Call to Action (CTA)’ was relocated to a more intuitive place after the Features section, and the ‘Pride Gin CTA’ was redesigned to be more eye-catching, allowing the gin bottle to flow over the sections boundaries.

Comparison between first Pride Gin CTA design (top) and revised design (bottom)

Accessibility and responsiveness across devices were prioritized to increase ease of use throughout the site, the Pride Gin CTA being a prime example.

To maintain its visual impact on smaller screens while ensuring text legibility, I decreased the rainbow motif’s opacity and rotated the Pride Gin image.

Previous versions of this section showed the bottle at different 90° angles. I rotated it to increase spaciousness within the section and add a sense of novelty, reflecting the way the bottle isn’t bound by the sections edge in the desktop and tablet layouts.

Pride Gin CTA mobile layout iterations. First iteration on the left through to the final on the right.

After a final review, I built the site in Webflow, using more professional visual assets for the phone displays, then deployed it with Netlify.

Comparison between original and redesigned homepage.
original
redesign

Learnings

What did you learn?

I gained a better understanding of Figma, utilizing auto-layout and components to speed up the process of wireframing. My programming knowledge came in handy in structuring these components.

I learned how to organize the project and standardize processes across pages in Webflow by using the Finsweet Client-First framework. Enabling faster development within Webflow and increasing the ease of future website alterations.

What was the most challenging thing about this project and how did you overcome it?

Threading together the process of designing a website in Figma, building it in Webflow, then deploying it on Netlify was challenging. Many project aspects needed to be considered and kept in the forefront of my mind. To handle all this information, I updated my knowledge and project management workflows. Leveraging the organizational capabilities of Obsidian, a markdown based, note taking app.

Testimonial

"

Wanted to give a massive shoutout to the divine Chris Barfod who designed our shiny new website for Spectrum!

He's been an absolute joy to work with and we are SO beyond happy with the end result. This new site tells our story in a much better way than we were doing previously and it looks absolutely fantastic.

I can't recommend his work enough!

Matthew Fiacchi - Spectrum Co-Founder

Want to get in touch?

If you like my work feel free to contact me if you have a project in mind. Fill in the form and I’ll get back to you as soon as I can.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.