/lu:talika/
Share
Not A Phase is a registered charity which supports trans and gender-diverse adults. The charity is trans-led and committed to uplifting and improving the lives of trans people through campaigning, social projects and funding trans-led initiatives. In collaboration with Weirdo, we redesigned and developed the charity’s website on WordPress.
Credits
UX Design: Pietro Righini
UI Design: Zoe Tang
Development: Sofiia Bondarenko
Website
Following the brand guidelines our friends at Weirdo created for Not A Phase, we gave the charity a bright, playful new website full of colour, animation and interactive elements. One of the motifs running through the site is that of a low-fi community notice board, featuring animated post-its and polaroid frames.
Members' Area
The members’ area was made to be simple, accessible and user-friendly. When a member logs in, they are directed straight to a calendar, which gives them a clear overview of the exercise classes that are on in their city. Members can toggle between a calendar and a full list view of classes, depending on what they find easier to use.
Shop
Not A Phase sell a selection of merchandise to help raise funds for its initiatives. We kept the Shop simple and focused. The visitor is immediately presented with tile images of all products, under which is a simple product title and button. The checkout also makes use of a simple form, unlike the previous iteration which felt like a departure from the core branding.
Dark Mode
We made good use of the soft pastel brand palette on-site, with blocks of pink, lavender and yellow featuring heavily – as you can see on the nav bar, the post-it notes and various blocks and banners. Users can also use the toggle at the top to switch to dark mode, which makes use of a deep mauve and soft black but the bright yellow and pastel pink still feature.
Responsive Design
The full-width homepage stacks vertically on mobile, with banners seamlessly re-orientating to fill a 9:16 screen. The user can scroll continuously or click on the animated arrows, which jump directly down to the next screen (scroll-jacking). Mobile and tablet designs also feature ‘read more’ cards, so the visitor can access more information without navigating to a different page.
