Rainbow Labs

I worked with Rainbow Labs in helping them redesign and restructure their website to be aesthetically pleasing, user-friendly, responsive, and help promote their mission. I used modern web trends and non-profit elements, designed with accessibility and usability in mind, and created sitemaps and mockups grounded in user-centered design principles

Rainbow Labs is a non-profit organisation helping LGBTQ+ youth to discover, curate, and experiment with the elements of a fulfilled life through community building and lived experiences of mentors.

Role: Web & UX Designer & Content Manager

Product: Website

Type: Social Impact & Non-Profit

Programs: Squarespace

View Website

The Research

To start my redesign process for Rainbow Labs, I begin by understanding their organisation, the programs they offer, and their user base. As a queer individual, I used my own experience and other lgbtq+ members to gain insight on features and design that would be useful to implement in the website. A large amount of LGBTQ+ youth has not 'come out', making it critical that a feature be added for a quick exit of the website.

Previous Website Version

Image of a wireframe of the Rainbow Labs previouse home page

Sitemap

As Rainbow Labs is a new organisation, their original sitemap was minimal. Alterations were made to get people engrossed in their organisation accompanying, by a good flow. The previous sitemap used hyperlinks to navigate users to sections of the Home page but the order to which they appeared confused users.

The alterations made to the sitemap were:

🌈 Removing the hyperlinks

🌈 Adding Our Mission page detailing the mission, values, and history of the organisation

Team to Our Team

Support to Get Involved

Wireframe

The placement of the information on the Home page stayed the same with the layout changed, keeping the colorful background for certain sections. The wireframe of the Home page helped structure the rest of the pages.

Mockup

Accessibility adjustments were made to text and colors working within the set brand guide requirements. The three-column layout design is used in specific sections to better display information. In addition to removing the full-width containers amongst various sections due to consistency and usability concerns, altering them to be a fixed-width container. The appearance of information went through the most significant transformation to improve the flow and layout. An exit link was added above the navigation for not 'out' LGBTQ+ youth to quickly exit the page to the google home page. Later in the design process, a Spanish version of the website became a necessity. To which a drop-down menu was implemented into the navigation.

Final Product

View Website