The British Fashion Council (BFC) is a not-for-profit organisation that harnesses the collective power of the industry to enable sustainable growth and strengthen British fashion in the global fashion economy. Founded in 1983, the BFC organises biannual womenswear and menswear showcases, London Fashion Week (LFW) and London Fashion Week Men’s (LFWM) promotes the best of British design to an international audience.

 

Note
The current website may not reflect my initial design given changes has been made in subsequent updates.

Main events from BFC

London Fashion Week
London Fashion Week takes place twice a year in February and September, showcasing over 250 designers to a global audience of influential media and retailers. It is estimated that orders of over £100m are placed during LFW each season.

 

The Fashion Awards
The Fashion Awards bring together the global fashion community in London to celebrate the best of British and international talent in the industry.

I led the design process with a clear and methodical approach, building each element while still keeping sight of the overall project aims.
A comprehensive library of components was created, using a bold and energetic visual language.

The use of imagery depicting the events of London Fashion Week, more vibrant colours, and bold typeface heightened the visual appeal to the wide audience of BFC. Using the black and with colours from BFC’s guideline, we created a unique colour theme for the most relevant sections, giving each a recognisable identity throughout the navigation.

Every element was crafted and combined in the layout to ensure a consistent and intuitive interaction with every screen while maintaining a unique personality for each section.

This created a stronger visual identity for BFC and its other websites, which embraced their users’ needs, positioning the users right at the centre of the online experience, with a much wider reach and impact for BFC through the fashion community, as designers, journalists, entrepreneurs and the general public.

Inform, Educate, Empower

The challenge & my role

Role: UI Designer

In the time-lapse of two years, I have lead several projects for BFC, aiming to deliver an ambitious overhaul of the main sites. London Fashion Week and London Collections went responsive. The corporate site was given a complete rebrand, with radically new information architecture and a range of new content features.

 

My Role
I led the redesign of the websites for London Fashion Week Men’s, London Fashion Week Festival, Designer Fact File and The Fashion Awards. Moreover, I have followed the development of the custom email marketing service based on a white label solution for all the needs of BFC’s events and audience.

 

Think-Aloud & Card sorting
As a flexible method and the adaptable to any stage in the development lifecycle “Think loud” was use to determinate the hierarchy and content of BFC’s business support service website. In addition “Open card sorting” method was used to understand how to organise the resources and step of the service.

Main challenge
I created frameworks and layouts to share the vision, design principles and content strategy. This helped to drive decision making during an overall redesign of the main BFC websites.

 

Use of the images
As Fashion events offer a wide range of bold and beautiful images, I worked and adapted the layouts of the sites, on desktop and mobile screens, to display the photos without any incorrect crop.

 

Design Execution & Validation
I executed journeys, wireframes, prototypes and design specs. Plus I have training BFC team on the use of the email marketing platform and other functionalities on the backend of the websites.

The challenge

Different websites, a single view

A few of the websites I have led the redesign

The Fashion Awards
www.fashionawards.com
The Fashion Awards is a ceremony held annually in the United Kingdom since 1989 to showcase both British and international individuals and businesses who have made the most outstanding contributions to the fashion industry during the year.

Fashion Trust
www.bfcfashiontrust.com
The Fashion Trust is a British Fashion Council charitable initiative which offers business support to UK based designers through financial grants, mentoring and funding to provide traineeships to graduates.

Designer Fact file
Designer Fact File helps designers with issues like cash flow, working with suppliers, and all those other areas that a designer needs to understand to run a profitable business.

London Fashion Week Men’s
London Fashion Week Men’s emphasises both the creative and commercial importance of Britain’s brands and emerging talent as well as the rich cultural landscape that contributes to the inspiration and success of this sector.

Designer profile

The use of a minimal layout to display all the needed information

Designers page

This page represents all the designers involved in LFW. The user, through filters and anchor links, can easily find the designers based on typology or name.

 

Designer details page

The Designer space was designed to display all the information regarding the designer at a glace. The use of toggles and scrolling gallery help to add more details without overwhelming the layout itself.

Generate style guides, specs, and documentation

My design system process

At the beginning of the process of scaling the design operations with design systems, I focus to understand the current state of the design and development ecosystem through screenshots and speaking with the developers about the frontend architecture.

 

1) The state of art
The first action is creating an inventory of all the different patterns, colours, text styles and assets used in the website(s) to help identify all the inconsistencies and issues with the user experience.

 

2) Explain the future steps
Before moving forward with the system, I present my findings to my team and other stakeholders, describing my proposals and how I plan to build the system.

 

My pitch will be based on:
– A description of the process of building the interface inventory
– A discussion of the key inconsistencies from every category
– A summary of the issues that can affect the development process
– The understanding that building a design system is an ongoing process that the designers and developers will have the opportunity to input into

 

3) Prototype
There are several ways to present the steps of the Design system, and I usually start with Sketch files or Invision prototype. Then involving the front-end developers, built and implement the approved steps/tasks in the development site.

 

4) Team leader and Decision maker
When leading the team, I review who is responsible for the different aspects of the system, how the overall decision-making process will look like and execute decisions appropriately.

 

5) Planning in an Agile process
Since clarity and time schedule are key points of designing a Design system, decision making and problem-solving are very important skills that enable me to clarify the direction of the design to the rest of the team and stakeholders

 

6) The starting point
Each project is different, and based on the information gathered previously and agreement with the team members and stakeholders, I decide whether it is necessary to build the system from scratch or start with a standard that can be adapted, improved and distributed across the product portfolio as the foundation of the system.

7) Distribution of the system.
Based on the objectives of the client/stakeholder and the KPIs of the system, I will define and discuss the measurable goals for the system deciding if I start to implement a specific section of the website, implement particular features or to release a beta version of the entire system.

 

8) Building the Color Palette, the Typographic Scale and Icons Library
My first step on designing the System is to unify and implement the colour palette because they affect all the parts of the system. This involves defining the primary/base colours and the full palette secondary colours using a naming convention.

 

The next step is the testing of the colour palette in sketch files or staging site, against the colours in the inventory to see how the new palette affects the interface. This helps both the team and me to check the contrast between colours in the new UI.

 

The typography is then analysed to see which typefaces will become a standard, then I aim to build a consistent scale, which is going to build a predictable information architecture across the product portfolio.

 

Finally, I collect and define the icons used in the website or product since icons are a very important part of the visual language and should become part of the system. I then finalize the library, choosing the implementation method and ensure that all team members have easy access to all icons.

 

9) Build-in accessibility
Part of the process is dedicated to accessibility in terms of implementation at the component level, optimization for those with disabilities, on slow Internet speeds, or on old computers.

 

10) Building and finalizing the Design System Pattern
Once all the building blocks of the system are built, tested and implemented, I can start building up the patterns and organize them in a system, as for example Atomic Web Design.

 

After adding the pattern to my design systems documentation I will test it with members of the team to make sure that everything is easy to understand.