urBasics
Shopify Design + Illustration
Created by a trans woman and her mom, urBasics is a Toronto-based online shop that provides top-quality gender-affirming gear, as well as community and educational resources. We’d previously worked together to update their branded newsletter templates, so I was super excited to collaborate again on their website refresh. The old website was clean but a bit plain, so the goal with the new site was to give it a more friendly, colourful and modern look and spotlight both the products and the educational material that urBasics has poured a lot of heart into and become known for.
Landing Page
The urBasics team had already selected a solid theme for the new website, with some really fun dynamic animations that we used to add movement to the site to catch visitors’ attention and encourage them to interact with the different sections.
The previous landing page was pretty sparse and the team wanted to add additional content to better introduce themselves to new visitors. I re-organized the existing content, and added in sections that highlighted the brand’s values, feedback from their community to build trust, and spotlighted the Learn pages.
I expanded their established brand colour palette of dark purple + white to include a few different shades of purple, pink, and blue – this was, of course, inspired by the Transgender pride flag, but we wanted to tweak it a bit so it was more subtle and better suited the vibe we were going for.
I also created a set of custom icons to represent the different product offering; we used these to add more visual interest and make it easy for folks to find what they were looking for.
Learn Pages
A big focus of the project was to update the Learn pages, a series of how-to guides that the urBasics team has created to educate visitors on the Trans journey and gender-affirming products. These guides are really popular and receive a lot of visitors, a lot of whom are parents of Trans youth or folks who are just beginning their own gender journey, so it was important that these pages be easy to navigate and have a friendly, welcoming vibe.
Using the new expanded colour palette and some additional custom icons, I broke up the content into distinct sections, each intentionally designed to best suit the content that lived there. The pages could get quite long, so I also added a secondary menu to the top of each page with anchor links, so folks could quickly navigate to the content they were looking for.
Illustrated Icons
I created a collection of custom icons to use throughout the website; most of these icons represented the different products that urBasics offers, but we also created a few extras to call attention to different sections on the Learn pages. I used the product icons to create a repeating pattern that we used on the shop banners.
Additional Pages: Collections, Learn Index, and a Shop Category page