Summary

A conceptual solo project to improve the User Interface, branding and responsiveness of the charity website GlobalGirl Media, a digital journalism training and platform dedicated to providing global content by, for and about girls and young women. 

Briefing

To redesign the GlobalGirl Media homepage for 3 viewports: small, medium and large.

Deliverables

Brand personality analysis, competitive analysis, style guide with colours, typography, layout grids and relevant components, Hi-Fi wireframes.

Research

Brand analysis

I started by analysing the brand personality by going to the GlobalGirl Media website and inspecting it on desktop, tablet and mobile. These were my first impressions:

• Dull

• Content heavy

• Not responsive

• Not organised

• Accessibility issues

Tone

GlobalGirl Media’s tone is powerful, though. Courageous. They provide authentic female-forward content for girls from resource-poor backgrounds interested in learning and sharing their unique perspectives on the world.

Competitor Analysis

I also looked at a few competitors' websites and came across completely different personalities, from young, to formal, powerful and structured.

Women In Journalism

• Professional

• Structured

• Organised

Young Women's Trust

• Young

• Colourful

• Casual

UN Women

• United Nations Entity

• Global

• Formal

Girl Effect

• Powerful

• Impactful

• Global

Define

I have, then, created the Personality Map, Personality Scales and Personality Grid (displayed below) for GlobalGirl Media, which really helped me to define their current position and how I envisioned the brand should be: more vibrant, a tiny bit more formal and definitely more organised.

Develop

Mood board

The mood board was created based on strong words, such as Journalism, Power, Activist, Girl and Loud. The images associated with these words helped me to define the colours. 

Colours

I knew I wanted to keep the logo colour and no more than 3 colours between primary and secondary. Why? To create impact and captivate the user but not to draw their attention from the content.

Contrast

Accessibility is something I care about. So, similar to all the projects I work on, I made sure that the contrast between my main colours and neutrals was spot on. To do so, I adjusted the neutrals to get good levels of accessibility.

Contrast: primary colour

Contrast: secondary colour

And with this in mind, a final list of colours came up!

Typography

Regarding typography, I searched for types of fonts associated with journalism and decided on Abril Fatface, for headers and titles, and Helvetica, for body text.

Desktop

Tablet / Mobile

Breakpoints

Finally, the breakpoints and their layout grids. Two things I would have done differently:

• to define a 16px margin for mobile;

• to add 2 extra columns to the medium size screen.

Small

375px - 767px

4 columns


8px gutter

8px margin

Medium

768px - 1279px

5 columns


16px gutter


32px margin

Large

1280px +

12 columns


16px gutter


40px margin

Sketch

Mobile first! Thanks to my background in e-commerce, I always think mobile first, which paid off in this project. It was easier to organise the components on the smaller screen and then move to the larger screens.

Components

I started building my Figma library for this project by creating key components. Here are a few:

Deliver

Hi-Fi wireframes

Mobile

Tablet

Desktop

Key learnings

• Mobile first! My professional experience always taught me to think mobile first, and that really paid off in this project. When working on a responsive solution with different breakpoints, start by adding the elements to the smallest screen because you’ll have more space to work on the remaining screens.

• Create layout grids specifically for each breakpoint. Layout grids are amazing to get that consistency with alignments and space between elements. The grid for a small screen won’t be the same as for a medium or larger screen. Defining the layout grids based on the size of the screen and on the components I was going to create was key to presenting a visually well-balanced solution.