Lead UI Designer on a high profile, multi-million pound project to create a personalised, responsive homepage for British Airways, one of the most significant changes to ba.com in recent years.
The brief
To create a new, fully responsive, personalised homepage for British Airways’ website, enabling British Airways to deliver relevant content to their customers at the right time. The page will also integrate the new booking system that is being developed in parallel. Built within an Angular JS framework, the page will be translated into the core languages supported by British Airways. Page content is to be managed through the LiveSite CMS.
This was a very high profile multi-million pound project, one of the most significant changes made to ba.com in recent years.
The task
- Establish the vision and scope of the page.
- Agree content at a high level.
- Create wireframes to establish the page’s overall structure in its different states (e.g., pre and post-pin, forthcoming flight vs no forthcoming flight) across all breakpoints.
- Create prototypes in Axure to model page behaviour. Testing of prototypes carried out to obtain feedback on proposed solution.
- Create high resolution designs of individual components which will populate the page.
- Testing of high resolution version of the page.
- Signed-off designs redlined for build by off-site developers.
- Constant liaising with developers through the build process to ensure they know what is required, and also to take advantage of opportunities to make changes on the fly.
- Testing and sign off of finished modules.
- Agile methodology used across the project.
- Liaising with UX Designers across the British Airways portfolio to ensure that projects are in sync in terms of design standards.
- Liaising with Design Manager and UX Manager to ensure work is to standard.
Challenges
- This was an extremely high profile project, which meant that it was subject to high visibility from senior management and was highly politicised. Everybody wanted to have their input, the opinions of senior management often over-riding the opinions of UX professionals, such is the nature of large political organisations.
- Constantly changing scope of what can be delivered, technically and politically, meant constantly changing designs and timescales. Hence a very flexible approach had to be adopted.
- Constantly changing personnel on the project meant for lack of continuity.
- Evolving design standards meant designs had to be constantly updated even when signed-off.
- Integrating with other projects, notably a new flight selling engine, which had timescale and delivery issues. This meant that numerous scenarios had to be designer for to cover all eventualities.
- Working with off-site developers meant communication was often difficult.
Tools
- Pencil and paper, for basic sketching, wire-framing and brainstorming.
- Axure, for producing wireframes and low-resolution designs.
- Photoshop for producing high resolution designs.
- Axshare – used as a document repository to manage and distribute designs.