I felt this vivid contrast gave a fresh and modern feel.
Global Girl Media
UI Design | Brand Strategy
The challenge
The goal in this project was to work on a charity website that had a poor brand voice and could do with a reskin and redesign. We had to develop 2–3 pages of fully responsive pages with a documented style guide.
The opportunity
I chose Global Girl Media, a charity which aims to combat sexism and racism by training young women and girls in journalistic skills, so that in their own words, they can:
‘Change the story tellers so they can change the world.’
Who and how long?
4 weeks in total, 2 of which were spent on planning and designing in Figma, and the other 2 were spent applying designs into Webflow.
This project was completed individually.
The solution:
How did we get here?
Branding Questions
Who are we making this for?
Socially and politically conscious young women and girls.
Activists who want to learn from others
Why are we making this?
To promote the organisation in order to engage young women in media and journalism as well and to amplify the voices of those from marginalised groups
What is the brand tone and why?
Strong yet approachable and trendy in order to reflect the vision and the target audience, tapping into youth activism that is on the rise.
Who are the competitors?
Empoword Journalism
youthjournalist.org
Malala fund
Brand Tone:
Strong
Inspiring
Trendy
Modern
Brand Personality Scale & Brand Personality Grid
Global Girl Media Sounds...
Energetic
Inspirational
Empowering
Academic
Honest
Confident
Loud
Cheeky
Global Girl Media Looks...
Hip
Modern
Trendy
Funky
Bold
Original
Impactful
Global Girl Media Acts...
Authentically
Conscientiously
Adventurously
Cutting-edge
Courageously
Dynamically
Innovatively
Colour Palette
Moodboard
Bold illustrations and a style inspired by street art and graffiti incorporates a youthful, cutting-edge and empowering voice and feel, as well as the colours and textures of neon and neon lights.
Font & Logo
Sketches
-
Initial sketch of largest screen.
-
Final design plan on the largest screen size.
-
Final design plan on the medium sized screen.
-
Final design plan on the smallest screen size.
Final Prototypes
Reflections and Learnings
I achieved my aim of adding a more modern and cutting edge voice to the brand and site, however what I would say is that the more elements I added, the more this perhaps got a little lost. However, this was a good learning for me going forward, as now I know I need to make sure the visual identity doesn’t get watered down beyond the hero section, it needs to be maintained as strong throughout. To do this, I would sketch more as I know this has helped me in other projects.
I also think another key learning is to consider the smallest screen first, I was aware of this practise going into sketching, but I had such a strong idea for the largest screen in my head I got too mixed up in that. Going forward if this happens again, I will jot down the idea for the big screen, but return to sketching out more ideas for the smallest screen. This last learning is particularly important, as I can see that that fully responsive design is a necessity nowadays as more and more people use their phone for the majority of online tasks.
That being said, I am really happy with the use of animations is this project as I feel it strengthened not only my prototyping skills, but also gave me experience in using animations to add interest and joy for the user, particularly considering I was aiming to attract a younger target audience.